html5的svg是什麼-前端問答-PHP中文網

在html5中，svg指的是可伸縮向量圖形，是一種繪圖方式，可使用XML格式定義用於網路的基於向量的圖形。使用SVG的好處：1、具有解析度無關性和無限可伸縮性；2、可腳本編寫，透過CSS或JS將各種動畫和互動添加到繪圖中；3、閱讀無障礙等。

html5的svg是什麼

本教學操作環境：windows7系統、HTML5版、Dell G3電腦。

在Html5中有兩種繪圖方式，一種是Canvas，一種是SVG。本篇文章就來帶大家簡單了解html5 svg的應用。

一、什麼是SVG？

SVG 指的是可伸縮向量圖形 (Scalable Vector Graphics),它用來定義用於網路的基於向量的圖形，使用 XML 格式定義圖形。 SVG 影像在放大或改變尺寸的情況下其圖形品質不會有所損失。此外SVG 是萬維網聯盟的標準，SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個整體。 2003 年一月，SVG 1.1 被確立為 W3C 標準。與其他影像格式相比，使用SVG 的優勢有以下幾點：

1.SVG 可被非常多的工具读取和修改（比如记事本）
2.SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
3.SVG 是可伸缩的
4.SVG 图像可在任何的分辨率下被高质量地打印
5.SVG 可在图像质量不下降的情况下被放大
6.SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
7.SVG 可以与 Java 技术一起运行
8.SVG 是开放的标准
9.SVG 文件是纯粹的 XML

登入後複製

SVG 的主要競爭者是Flash,與Flash 相比，SVG 最大的優勢是與其他標準（例如XSL 和DOM）相兼容。而 Flash 則是未開源的私有技術。

為什麼要使用SVG？

SVG的真正價值在於它解決了現代Web開發中許多最棘手的問題，讓我們看看使用SVG的好處，以及它解決了哪些問題。

1、可擴展性和響應能力

SVG是使用形狀、數字和座標（而不是像素網格）在瀏覽器中渲染圖形，這使得它具有解析度無關性和無限可伸縮性。如果你仔細想想就可發現，不管你是用鋼筆還是用寫字板，創造圓形的指令都是相同的，只是比例改變。

使用SVG，我們可以組合不同的形狀、路徑和文字元素來創建各種視覺效果，並確保它們在任何尺寸大小下看起來都十分的清晰明快。

相較之下，基於柵格的格式（如GIF，JPG和PNG）具有固定的尺寸，這使得它們在縮放時會像素化。儘管各種響應性影像技術已經證明對像素圖形有價值，但它們永遠無法真正與SVG的無限擴展（伸縮）能力競爭。

2、可程式性和互動性

SVG是完全可編輯和可腳本編寫的，我們可以透過CSS或JavaScript將各種動畫和互動添加到繪圖中。

3、閱讀無障礙

SVG檔案是基於文字的，可以進行搜尋和索引。這使得它們可以透過螢幕閱讀器、搜尋引擎和其他裝置被閱讀。

4、效能高

影響Web效能的一個最重要方面是網頁上使用的檔案的大小。與柵格圖形（如GIF，JPG和PNG）相比，SVG圖形通常是較小的檔案。

二、SVG 實例

下面的範例是一個簡單的 SVG 檔案的例子。 SVG 檔案必須使用.svg 後綴來儲存：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <circle cx="200" cy="100" r="50" stroke="red" stroke-width="2" fill="green"/>
</svg>

登入後複製

html5的svg是什麼

#程式碼解釋：

第一行包含了XML 宣告。請注意 standalone 屬性！此屬性規定此 SVG 檔案是否是“獨立的”，或含有對外部檔案的參考。 standalone="no" 意味著 SVG 文件會引用一個外部檔案 - 在這裡，是 DTD 檔案。第二引用了這個外部的 SVG DTD。該 DTD 位於 W3C，含有所有允許的 SVG 元素。

1.SVG 程式碼以 < svg > 元素開始，包括開啟標籤 < svg > 和關閉標籤 < /svg > ，這是根元素。
2.width 和 height 屬性可設定此 SVG 文件的寬度和高度。 version 屬性可定義所使用的 SVG 版本，xmlns 屬性可定義 SVG 命名空間。
3.SVG 的< circle > 用來建立一個圓，cx 和cy 屬性定義圓中心的x和y 座標。如果忽略這兩個屬性，那麼圓點會被設定為 (0, 0)。 r 屬性定義圓的半徑。
4.stroke 和 stroke-width 屬性控制如何顯示形狀的輪廓。我們把圓的輪廓設定為 2px 寬，紅色邊框。
5.fill 屬性設定形狀內的顏色。我們把填滿色設定為原諒色。
關閉標籤的作用是關閉 SVG 元素和文件本身。
注意：所有的開啟標籤必須有關閉標籤！

HTML 文檔中的SVG

SVG 檔案可透過以下標籤嵌入HTML 文件：< embed > 、< object > 或< iframe > 。

三種把 SVG 檔案嵌入 HTML 頁面的不同方法。

使用 < embed > 标签

< embed > 标签被所有主流的浏览器支持，并允许使用脚本。

注释：当在 HTML 页面中嵌入 SVG 时使用 < embed > 标签是 Adobe SVG Viewer 推荐的方法！然而，如果需要创建合法的 XHTML，就不能使用 < embed >。任何 HTML 规范中都没有 < embed > 标签。
语法：

< src="rect.svg" width="300"    style="max-width:90%" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/">

登入後複製

注释：pluginspage 属性指向下载插件的 URL。

使用 < object > 标签

< object > 标签是 HTML 4 的标准标签，被所有较新的浏览器支持。它的缺点是不允许使用脚本。

注释：假如您安装了最新版本的 Adobe SVG Viewer，那么当使用 < object > 标签时 SVG 文件无法工作（至少不能在 IE 中工作）！

语法：

<object data="rect.svg" width="300" height="100" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install/" />

登入後複製

注释：codebase 属性指向下载插件的 URL。

使用 < iframe > 标签

< iframe > 标签可工作在大部分的浏览器中。

语法：

<iframe src="rect.svg" width="300" height="100"></iframe>

登入後複製

三、SVG 各形状介绍

（一）SVG 矩形

能根据之前的圆形联想到，rect元素会在屏幕上绘制一个矩形。其实只要6个基本属性就可以控制它在屏幕上的位置和形状。

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="20" y="20" rx="10" ry="10" width="300" height="100" 
    style="fill:rgb(0,0,255);
    stroke-width:1;
    stroke:rgb(0,0,0);
    fill-opacity:0.1;
    stroke-opacity:0.9;
    opacity:0.9"/>
</svg>

登入後複製

html5的svg是什麼

代码解释：

rect 元素的 width 和 height 属性可定义矩形的高度和宽度
style 属性用来定义 CSS 属性
CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
CSS 的 stroke-width 属性定义矩形边框的宽度
CSS 的 stroke 属性定义矩形边框的颜色
x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1
CSS 的 opacity 属性定义整个元素的透明值（合法的范围是：0 - 1）
rx 和 ry 属性可使矩形产生圆角。

（二）SVG 圆形：详细见上svg实例

（三）SVG椭圆：

ellipse 标签可用来创建椭圆。椭圆与圆很相似。不同之处在于椭圆有不同的 x 和 y 半径，而圆的 x 和 y 半径是相同的。

<svg width="100%"    style="max-width:90%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <ellipse cx="275" cy="125" rx="100" ry="50" style="fill:rgb(200,100,50);stroke:rgb(0,0,100);stroke-width:2"/>
</svg>

登入後複製

html5的svg是什麼

代码解释：

cx 属性定义圆点的 x 坐标
cy 属性定义圆点的 y 坐标
rx 属性定义水平半径
ry 属性定义垂直半径

（四）SVG线条

line 标签用来创建线条

<svg width="100%"    style="max-width:90%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>
</svg>

登入後複製

html5的svg是什麼

代码解释：

x1 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束

（五）SVG多边形

polygon 标签用来创建含有不少于三个边的图形。它们都是由连接一组点集的直线构成。polygon的路径在最后一个点处自动回到第一个点。需要注意的是，矩形也是一种多边形，如果需要更多灵活性的话，你也可以用多边形创建一个矩形。

<svg width="100%"    style="max-width:90%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <polygon points="220,100 300,210 170,250" style="fill:#cccccc;stroke:#000000;stroke-width:1"/>
</svg>

登入後複製

html5的svg是什麼

代码解释：

points 属性定义多边形每个角的 x 和 y 坐标
点集数列。每个数字用空白符、逗号、终止命令或者换行符分隔开。每个点必须包含2个数字，一个是x坐标，一个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”。路径绘制完后闭合图形，所以最终的直线将从位置(2,2)连接到位置(0,0)。

（六）SVG 折线

polyline 标签用来创建仅包含直线的形状。它是一组连接在一起的直线。因为它可以有很多的点，折线的的所有点位置都放在一个points属性中：

<svg width="100%"    style="max-width:90%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <polyline points="20,100 40,60 70,80 100,20" style="fill:white;stroke:red;stroke-width:2"></polyline>
</svg>

登入後複製

html5的svg是什麼

points
点集数列。每个数字用空白符、逗号、终止命令或者换行符分隔开。每个点必须包含2个数字，一个是x坐标，一个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”。路径绘制完后闭合图形，所以最终的直线将从位置(2,2)连接到位置(0,0)。

四、SVG 滤镜简介

　所有互联网的SVG滤镜定义在 < defs > 元素中， < filter > 标签用来定义SVG滤镜， < filter > 标签使用必须的ID属性来定义向图形应用到那个滤镜中。在 SVG 中，可用的滤镜有：

feBlend SVG 滤镜。使用不同的混合模式把两个对象合成在一起。
feColorMatrix SVG 滤镜。应用matrix转换。
feComponentTransfer SVG 滤镜。执行数据的 component-wise 重映射。
feComposite SVG 滤镜。
feConvolveMatrix SVG 滤镜。
feDiffuseLighting SVG 滤镜。
feDisplacementMap SVG 滤镜。
feDistantLight SVG 滤镜。 Defines a light source
feFlood SVG 滤镜。
feGaussianBlur SVG 滤镜。对图像执行高斯模糊。
feImage SVG 滤镜。
feMerge SVG 滤镜。创建累积而上的图像。
feMorphology SVG 滤镜。 对源图形执行"fattening" 或者 "thinning"。
feOffset SVG 滤镜。相对与图形的当前位置来移动图像。
fePointLight SVG 滤镜。
feSpecularLighting SVG 滤镜。
feSpotLight SVG 滤镜。
feTile SVG 滤镜。
feTurbulence SVG 滤镜。

登入後複製

注释：您可以在每个 SVG 元素上使用多个滤。

（一）SVG 高斯滤镜

< filter > 标签必须嵌套在 < defs > 标签内。< defs > 标签是 definitions 的缩写，它允许对诸如滤镜等特殊元素进行定义。

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
  <defs>  
    <filter id="Gaussian_Blur">    
        <feGaussianBlur in="SourceGraphic" stdDeviation="3" />  
    </filter>  
  </defs>  
  <ellipse cx="200" cy="150" rx="70" ry="40" style="fill:#ff0000;stroke:#000000;stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>

登入後複製

html5的svg是什麼

代码解释：

< filter > 标签的 id 属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用）
filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时，必须使用 # 字符
滤镜效果是通过 < feGaussianBlur > 标签进行定义的。fe 后缀可用于所有的滤镜
< feGaussianBlur > 标签的 stdDeviation 属性可定义模糊的程度
in="SourceGraphic" 这个部分定义了由整个图像创建效果。

（二）SVG 阴影效果

feOffset 元素用于创建阴影效果

偏移一个矩形（带 < feOffset > ），然后混合偏移图像顶部(含 < feBlend > )
SVG代码：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"  fill="yellow" filter="url(#f1)" />
</svg>

登入後複製

html5的svg是什麼

代码解释：

< filter > 标签的 id 属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用）
filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时，必须使用 # 字符

（三）SVG 线性渐变

　渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。

在 SVG 中，有两种主要的渐变类型：

线性渐变
放射性渐变

< linearGradient > 可用来定义 SVG 的线性渐变。

< linearGradient > 标签必须嵌套在 < defs > 的内部。< defs > 标签是 definitions 的缩写，它可对诸如渐变之类的特殊元素进行定义。

线性渐变可被定义为水平、垂直或角形的渐变：

当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变
当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变
当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变

<svg width="100%"  style="max-width:90%" version="1.1" xmlns=" http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="orange-red" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
            <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>        
        </linearGradient>    
     </defs>    
     <ellipse cx="200" cy="190" rx="85" ry="55" style="fill:url(#orange-red)"/>
</svg>

登入後複製

html5的svg是什麼

代码解释：
1.< linearGradient > 标签的 id 属性可为渐变定义一个唯一的名称。
2.fill:url(#orange-red) 属性把 ellipse 元素链接到此渐变。
3.< linearGradient > 标签的 x1、x2、y1、y2 属性可定义渐变的开始和结束位置。
4.渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 < stop > 标签来规定。offset 属性用来定义渐变的开始和结束位置。

（四）SVG 放射渐变

< radialGradient > 用来定义放射性渐变。

<svg width="100%"    style="max-width:90%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>    
      <radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">      
          <stop offset="0%" style="stop-color:rgb(200,200,200);stop-opacity:0"/>     
          <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"/>   
      </radialGradient>  
  </defs>    
      <ellipse cx="230" cy="200" rx="110" ry="100" style="fill:url(#grey_blue)"/>
</svg>

登入後複製

html5的svg是什麼

程式碼解釋：
　　標籤的id 屬性可為漸變定義一個唯一的名稱，fill:url(#grey-blue) 屬性將ellipse 元素連結到此漸變，cx、cy 和r 屬性定義外圈，而fx 和fy 定義內圈漸變的顏色範圍可由兩種或多種顏色組成。每種顏色透過一個標籤來規定。 offset 屬性用來定義漸層的開始和結束位置。

【相關推薦：html影片教學、web前端】

以上是html5的svg是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！