淺談SVG

一、什么是SVG？

  • SVG指可伸縮矢量圖形（Scalable Vector Graphics）；
  • SVG用來定義用于網絡的基于矢量的圖形；
  • SVG使用xml格式定義圖形；
  • SVG圖像在放大或改變尺寸的情況下其圖形質量不會有所損失；
  • SVG是萬維網聯盟的標準；
  • SVG與諸如DOM和XSL之類的W3C標準是一個整體（于2003年1月14日成為W3C推薦標準）。

二、SVG優勢

參與定義SVG的組織有：太陽微系統、Adobe、蘋果公司、IBM以及柯達。
與其他圖像格式相比，使用SVG的優勢在于：

  • SVG可被非常多的工具讀取和修改（比如記事本）；
  • SVG與JPEG和GIF圖像比起來，尺寸更小，且可壓縮性更強；
  • SVG是可伸縮的；
  • SVG圖像可在任何的分辨率下被高質量的打印；
  • SVG可在圖像質量不下降的情況下被放大；
  • SVG圖像中的文本是可選的，同時也是可搜索的（很適合制作地圖）；
  • SVG可以與java技術一起運行；
  • SVG是開放的標準；
  • SVG文件是純粹的XML。
    SVG的主要競爭者是flash。
    與flash相比，SVG最大的優勢是與其他標準（比如XSL和DOM）相兼容，而flash則是未開源的私有技術。

三、SVG實例

<?xml version="1.0" standalone="no"?>

//第一行包含了XML聲明。standalone 該屬性規定此SVG文件是否是“獨立“，或含有對外部文件的引用。
//standalone="no" 意味著 SVG 文檔會引用一個外部文件 - 在這里，是 DTD 文件。

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

//第二和第三行引用了這個外部的 SVG DTD。該 DTD 位于 //“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”。
//該 DTD 位于 W3C，含有所有允許的 SVG 元素。

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

//SVG 代碼以 <svg> 元素開始，包括開啟標簽 <svg> 和關閉標簽 </svg> 這是根元素。width 和 height 屬
//性可設置此 SVG 文檔的寬度和高度。version 屬性可定義所使用的 SVG 版本，xmlns 屬性可定義 SVG 命名空間。

<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>

//SVG 的 <circle> 用來創建一個圓。cx 和 cy 屬性定義圓中心的 x 和 y 坐標。如果忽略這兩個屬性，
//那么圓點會被設置為 (0, 0)。r 屬性定義圓的半徑。
//stroke 和 stroke-width 屬性控制如何顯示形狀的輪廓。我們把圓的輪廓設置為 2px 寬，黑邊框。
//fill 屬性設置形狀內的顏色。我們把填充顏色設置為紅色。
//關閉標簽的作用是關閉 SVG 元素和文檔本身。

</svg>
//注釋：所有的開啟標簽必須有關閉標簽！

四、SVG形狀

SVG有一些預定義的形狀元素，可被開發者使用和操作：

  • 矩形<rect>
  • 圓形<circle>
  • 橢圓<ellipse>
  • 線<line>
  • 折線<polyline>
  • 多邊形<polygon>
  • 路徑<path>
矩形
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>

</svg>

代碼解釋：

  • rect 元素的 width 和 height 屬性可定義矩形的高度和寬度
  • style 屬性用來定義 CSS 屬性
  • CSS 的 fill 屬性定義矩形的填充顏色（rgb 值、顏色名或者十六進制值）
  • CSS 的 stroke-width 屬性定義矩形邊框的寬度
  • CSS 的 stroke 屬性定義矩形邊框的顏色
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/>

</svg>

代碼解釋：

  • x 屬性定義矩形的左側位置（例如，x="0" 定義矩形到瀏覽器窗口左側的距離是 0px）
  • y 屬性定義矩形的頂端位置（例如，y="0" 定義矩形到瀏覽器窗口頂端的距離是 0px）
  • CSS 的 fill-opacity 屬性定義填充顏色透明度（合法的范圍是：0 - 1）
  • CSS 的 stroke-opacity 屬性定義筆觸顏色的透明度（合法的范圍是：0 - 1）
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
opacity:0.9"/>

</svg>

代碼解釋：

  • CSS 的 opacity 屬性定義整個元素的透明值（合法的范圍是：0 - 1）。
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<rect x="20" y="20" rx="20" ry="20" width="250"
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>

</svg>

代碼解釋：

  • rx 和 ry 屬性可使矩形產生圓角。
圓形

<circle> 標簽可用來創建一個圓。

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>

</svg>

代碼解釋：

  • cx 和 cy 屬性定義圓點的 x 和 y 坐標。如果省略 cx 和 cy，圓的中心會被設置為 (0, 0)。
  • r 屬性定義圓的半徑。
橢圓

<ellipse> 標簽
<ellipse> 標簽可用來創建橢圓。橢圓與圓很相似。不同之處在于橢圓有不同的 x 和 y 半徑，而圓的 x 和 y 半徑是相同的。

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<ellipse cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>

</svg>

代碼解釋：

  • cx 屬性定義圓點的 x 坐標
  • cy 屬性定義圓點的 y 坐標
  • rx 屬性定義水平半徑
  • ry 屬性定義垂直半徑

通過ellipse創建三個累疊而上的橢圓：

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<ellipse cx="240" cy="100" rx="220" ry="30"
style="fill:purple"/>

<ellipse cx="220" cy="70" rx="190" ry="20"
style="fill:lime"/>

<ellipse cx="210" cy="45" rx="170" ry="15"
style="fill:yellow"/>

</svg>

組合兩個橢圓：

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<ellipse cx="240" cy="100" rx="220" ry="30"
style="fill:yellow"/>

<ellipse cx="220" cy="100" rx="190" ry="20"
style="fill:white"/>

</svg>
線條

<line> 標簽用來創建線條。

<svg width="100%" height="100%" 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>

代碼解釋：

  • x1 屬性在 x 軸定義線條的開始
  • y1 屬性在 y 軸定義線條的開始
  • x2 屬性在 x 軸定義線條的結束
  • y2 屬性在 y 軸定義線條的結束
多邊形

<polygon> 標簽用來創建含有不少于三個邊的圖形。

<svg width="100%" height="100%" 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>

代碼解釋：

  • points 屬性定義多邊形每個角的 x 和 y 坐標
折線

SVG <polyline> 標簽用來創建僅包含直線的形狀。

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-width:2"/>

</svg>
路徑

<path> 標簽
<path> 標簽用來定義路徑。
下面的命令可用于路徑數據：

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Belzier curve
  • T = smooth quadratic Belzier curveto
  • A = elliptical Arc
  • Z = closepath
    以上所有命令均允許小寫字母。大寫表示絕對定位，小寫表示相對定位
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<path d="M250 150 L150 350 L350 350 Z" />

</svg>

代碼解釋：
上面的例子定義了一條路徑，它開始于位置 250 150，到達位置 150 350，然后從那里開始到 350 350，最后在 250 150 關閉路徑。

創建一個螺旋：

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<path d="M153 334
C153 334 151 334 151 334
C151 339 153 344 156 344
C164 344 171 339 171 334
C171 322 164 314 156 314
C142 314 131 322 131 334
C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C211 300 186 274 156 274"
style="fill:white;stroke:red;stroke-width:2"/>

</svg>

濾鏡

SVG 濾鏡用來向形狀和文本添加特殊的效果。
在 SVG 中，可用的濾鏡有：

  • feBlend
  • feColorMatrix
  • feComponentTransfer
  • feComposite
  • feConvolveMatrix
  • feDiffuseLighting
  • feDisplacementMap
  • feFlood
  • feGaussianBlur
  • feImage
  • feMerge
  • feMorphology
  • feOffset
  • feSpecularLighting
  • feTile
  • feTurbulence
  • feDistantLight
  • fePointLight
  • feSpotLight
    注釋：您可以在每個 SVG 元素上使用多個濾鏡！
高斯模糊

必須在<defs>標簽中定義SVG濾鏡。
高斯模糊（Gaussian Blur）
<filter> 標簽用來定義 SVG 濾鏡。<filter> 標簽使用必需的 id 屬性來定義向圖形應用哪個濾鏡？
<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>

代碼解釋：

  • <filter> 標簽的 id 屬性可為濾鏡定義一個唯一的名稱（同一濾鏡可被文檔中的多個元素使用）
  • filter:url 屬性用來把元素鏈接到濾鏡。當鏈接濾鏡 id 時，必須使用 # 字符
  • 濾鏡效果是通過 <feGaussianBlur> 標簽進行定義的。fe 后綴可用于所有的濾鏡
  • <feGaussianBlur> 標簽的 stdDeviation 屬性可定義模糊的程度
  • in="SourceGraphic" 這個部分定義了由整個圖像創建效果

漸變

SVG 漸變

漸變是一種從一種顏色到另一種顏色的平滑過渡。另外，可以把多個顏色的過渡應用到同一個元素上。
在 SVG 中，有兩種主要的漸變類型：

  • 線性漸變
  • 放射性漸變
線性漸變

<linearGradient> 可用來定義 SVG 的線性漸變。
<linearGradient> 標簽必須嵌套在 <defs> 的內部。<defs> 標簽是 definitions 的縮寫，它可對諸如漸變之類的特殊元素進行定義。
線性漸變可被定義為水平、垂直或角形的漸變：

  • 當 y1 和 y2 相等，而 x1 和 x2 不同時，可創建水平漸變
  • 當 x1 和 x2 相等，而 y1 和 y2 不同時，可創建垂直漸變
  • 當 x1 和 x2 不同，且 y1 和 y2 不同時，可創建角形漸變
<svg width="100%" height="100%" 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>

代碼解釋：

  • <linearGradient> 標簽的 id 屬性可為漸變定義一個唯一的名稱
  • fill:url(#orange_red) 屬性把 ellipse 元素鏈接到此漸變
  • <linearGradient> 標簽的 x1、x2、y1、y2 屬性可定義漸變的開始和結束位置
  • 漸變的顏色范圍可由兩種或多種顏色組成。每種顏色通過一個 <stop> 標簽來規定。offset 屬性用來定義漸變的開始和結束位置。
放射性漸變

<radialGradient> 標簽必須嵌套在 <defs> 中。<defs> 標簽是 definitions 的縮寫，它允許對諸如漸變等特殊元素進行定義。

<svg width="100%" height="100%" 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>

代碼解釋：
<radialGradient> 標簽的 id 屬性可為漸變定義一個唯一的名稱，fill:url(#grey_blue) 屬性把 ellipse 元素鏈接到此漸變，cx、cy 和 r 屬性定義外圈，而 fx 和 fy 定義內圈 漸變的顏色范圍可由兩種或多種顏色組成。每種顏色通過一個 <stop> 標簽來規定。offset 屬性用來定義漸變的開始和結束位置。

Canvas VS SVG

SVG可縮放矢量圖形（Scalable Vector Graphics）是基于可擴展標記語言（XML），用于描述二維矢量圖形的一種圖形格式。SVG是W3C制定的一種新的二維矢量圖形格式，也是規范中的網絡矢量圖形標準。SVG嚴格遵從XML語法，并用文本格式的描述性語言來描述圖像內容，因此是一種和圖像分辨率無關的矢量圖形格式。

什么是SVG？
  • SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
  • SVG 用來定義用于網絡的基于矢量的圖形
  • SVG 使用 XML 格式定義圖形
  • SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有所損失
  • SVG 是萬維網聯盟的標準
  • SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個整體
Canvas 和 SVG 的區別：
  • SVG
    SVG 是一種使用 XML 描述 2D 圖形的語言。
    SVG 基于 XML，這意味著 SVG DOM 中的每個元素都是可用的。您可以為某個元素附加 JavaScript 事件處理器。
    在 SVG 中，每個被繪制的圖形均被視為對象。如果 SVG 對象的屬性發生變化，那么瀏覽器能夠自動重現圖形。
    特點：
    • 不依賴分辨率
    • 支持事件處理器
    • 最適合帶有大型渲染區域的應用程序（比如谷歌地圖）
    • 復雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）
    • 不適合游戲應用
  • Canvas
    Canvas 通過 JavaScript 來繪制 2D 圖形。
    Canvas 是逐像素進行渲染的。
    在 canvas 中，一旦圖形被繪制完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那么整個場景也需要重新繪制，包括任何或許已被圖形覆蓋的對象。
    特點：
    • 依賴分辨率
    • 不支持事件處理器
    • 弱的文本渲染能力
    • 能夠以 .png 或 .jpg 格式保存結果圖像
    • 最適合圖像密集型的游戲，其中的許多對象會被頻繁重繪
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 一.什么是SVG？ SVG 指的是可伸縮矢量圖形 (Scalable Vector Graphics),它用來定義...
    nightZing閱讀 17,110評論 11贊 62
  • SVG 學習筆記 SVG是什么 SVG 指可伸縮矢量圖形 (Scalable Vector Graphics) S...
    Penn_Xu閱讀 1,007評論 0贊 1
  • 轉載請聲明 原文鏈接 關注公眾號獲取更多資訊 這篇文章主要總結H5的一些新增的功能以及一些基礎歸納，這里只是一個提...
    前端進階之旅閱讀 9,108評論 22贊 225
  • 王紅娟 山高，沒有媽媽的愛高 沒有媽媽的愛，就像一根草 海深，沒有媽媽的愛深 天闊，沒有媽媽的愛寬闊 地大，...
    朝花夕拾123閱讀 574評論 0贊 9
  • 文/新鮮 如果一遇到困難就逃避，那只是短暫的舒服，之后的路會越來越難走。 十月底統計學開課，第一堂課我有認真的聽。...
    新鮮wendy閱讀 1,291評論 0贊 0