淺談SVG

一、什么是SVG？

  • SVG指可伸縮矢量圖形（Scalable Vector Graphics）；
  • SVG用來(lái)定義用于網(wǎng)絡(luò)的基于矢量的圖形；
  • SVG使用xml格式定義圖形；
  • SVG圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會(huì)有所損失；
  • SVG是萬(wàn)維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)；
  • SVG與諸如DOM和XSL之類的W3C標(biāo)準(zhǔn)是一個(gè)整體（于2003年1月14日成為W3C推薦標(biāo)準(zhǔn)）。

二、SVG優(yōu)勢(shì)

參與定義SVG的組織有：太陽(yáng)微系統(tǒng)、Adobe、蘋(píng)果公司、IBM以及柯達(dá)。
與其他圖像格式相比，使用SVG的優(yōu)勢(shì)在于：

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

三、SVG實(shí)例

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

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

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

//第二和第三行引用了這個(gè)外部的 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> 元素開(kāi)始，包括開(kāi)啟標(biāo)簽 <svg> 和關(guān)閉標(biāo)簽 </svg> 這是根元素。width 和 height 屬
//性可設(shè)置此 SVG 文檔的寬度和高度。version 屬性可定義所使用的 SVG 版本，xmlns 屬性可定義 SVG 命名空間。

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

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

</svg>
//注釋：所有的開(kāi)啟標(biāo)簽必須有關(guān)閉標(biāo)簽！

四、SVG形狀

SVG有一些預(yù)定義的形狀元素，可被開(kāi)發(fā)者使用和操作：

  • 矩形<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 屬性用來(lái)定義 CSS 屬性
  • CSS 的 fill 屬性定義矩形的填充顏色（rgb 值、顏色名或者十六進(jìn)制值）
  • 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 屬性定義矩形的左側(cè)位置（例如，x="0" 定義矩形到瀏覽器窗口左側(cè)的距離是 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 屬性定義整個(gè)元素的透明值（合法的范圍是：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 屬性可使矩形產(chǎn)生圓角。
圓形

<circle> 標(biāo)簽可用來(lái)創(chuàng)建一個(gè)圓。

<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 屬性定義圓點(diǎn)的 x 和 y 坐標(biāo)。如果省略 cx 和 cy，圓的中心會(huì)被設(shè)置為 (0, 0)。
  • r 屬性定義圓的半徑。
橢圓

<ellipse> 標(biāo)簽
<ellipse> 標(biāo)簽可用來(lái)創(chuàng)建橢圓。橢圓與圓很相似。不同之處在于橢圓有不同的 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 屬性定義圓點(diǎn)的 x 坐標(biāo)
  • cy 屬性定義圓點(diǎn)的 y 坐標(biāo)
  • rx 屬性定義水平半徑
  • ry 屬性定義垂直半徑

通過(guò)ellipse創(chuàng)建三個(gè)累疊而上的橢圓：

<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>

組合兩個(gè)橢圓：

<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> 標(biāo)簽用來(lái)創(chuàng)建線條。

<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 軸定義線條的開(kāi)始
  • y1 屬性在 y 軸定義線條的開(kāi)始
  • x2 屬性在 x 軸定義線條的結(jié)束
  • y2 屬性在 y 軸定義線條的結(jié)束
多邊形

<polygon> 標(biāo)簽用來(lái)創(chuàng)建含有不少于三個(gè)邊的圖形。

<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 屬性定義多邊形每個(gè)角的 x 和 y 坐標(biāo)
折線

SVG <polyline> 標(biāo)簽用來(lái)創(chuàng)建僅包含直線的形狀。

<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> 標(biāo)簽
<path> 標(biāo)簽用來(lái)定義路徑。
下面的命令可用于路徑數(shù)據(jù)：

  • 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
    以上所有命令均允許小寫(xiě)字母。大寫(xiě)表示絕對(duì)定位，小寫(xiě)表示相對(duì)定位
<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>

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

創(chuàng)建一個(gè)螺旋：

<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 濾鏡用來(lái)向形狀和文本添加特殊的效果。
在 SVG 中，可用的濾鏡有：

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

必須在<defs>標(biāo)簽中定義SVG濾鏡。
高斯模糊（Gaussian Blur）
<filter> 標(biāo)簽用來(lái)定義 SVG 濾鏡。<filter> 標(biāo)簽使用必需的 id 屬性來(lái)定義向圖形應(yīng)用哪個(gè)濾鏡？
<filter> 標(biāo)簽必須嵌套在 <defs> 標(biāo)簽內(nèi)。<defs> 標(biāo)簽是 definitions 的縮寫(xiě)，它允許對(duì)諸如濾鏡等特殊元素進(jìn)行定義。

<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> 標(biāo)簽的 id 屬性可為濾鏡定義一個(gè)唯一的名稱（同一濾鏡可被文檔中的多個(gè)元素使用）
  • filter:url 屬性用來(lái)把元素鏈接到濾鏡。當(dāng)鏈接濾鏡 id 時(shí)，必須使用 # 字符
  • 濾鏡效果是通過(guò) <feGaussianBlur> 標(biāo)簽進(jìn)行定義的。fe 后綴可用于所有的濾鏡
  • <feGaussianBlur> 標(biāo)簽的 stdDeviation 屬性可定義模糊的程度
  • in="SourceGraphic" 這個(gè)部分定義了由整個(gè)圖像創(chuàng)建效果

漸變

SVG 漸變

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

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

<linearGradient> 可用來(lái)定義 SVG 的線性漸變。
<linearGradient> 標(biāo)簽必須嵌套在 <defs> 的內(nèi)部。<defs> 標(biāo)簽是 definitions 的縮寫(xiě)，它可對(duì)諸如漸變之類的特殊元素進(jìn)行定義。
線性漸變可被定義為水平、垂直或角形的漸變：

  • 當(dāng) y1 和 y2 相等，而 x1 和 x2 不同時(shí)，可創(chuàng)建水平漸變
  • 當(dāng) x1 和 x2 相等，而 y1 和 y2 不同時(shí)，可創(chuàng)建垂直漸變
  • 當(dāng) x1 和 x2 不同，且 y1 和 y2 不同時(shí)，可創(chuàng)建角形漸變
<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> 標(biāo)簽的 id 屬性可為漸變定義一個(gè)唯一的名稱
  • fill:url(#orange_red) 屬性把 ellipse 元素鏈接到此漸變
  • <linearGradient> 標(biāo)簽的 x1、x2、y1、y2 屬性可定義漸變的開(kāi)始和結(jié)束位置
  • 漸變的顏色范圍可由兩種或多種顏色組成。每種顏色通過(guò)一個(gè) <stop> 標(biāo)簽來(lái)規(guī)定。offset 屬性用來(lái)定義漸變的開(kāi)始和結(jié)束位置。
放射性漸變

<radialGradient> 標(biāo)簽必須嵌套在 <defs> 中。<defs> 標(biāo)簽是 definitions 的縮寫(xiě)，它允許對(duì)諸如漸變等特殊元素進(jìn)行定義。

<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> 標(biāo)簽的 id 屬性可為漸變定義一個(gè)唯一的名稱，fill:url(#grey_blue) 屬性把 ellipse 元素鏈接到此漸變，cx、cy 和 r 屬性定義外圈，而 fx 和 fy 定義內(nèi)圈 漸變的顏色范圍可由兩種或多種顏色組成。每種顏色通過(guò)一個(gè) <stop> 標(biāo)簽來(lái)規(guī)定。offset 屬性用來(lái)定義漸變的開(kāi)始和結(jié)束位置。

Canvas VS SVG

SVG可縮放矢量圖形（Scalable Vector Graphics）是基于可擴(kuò)展標(biāo)記語(yǔ)言（XML），用于描述二維矢量圖形的一種圖形格式。SVG是W3C制定的一種新的二維矢量圖形格式，也是規(guī)范中的網(wǎng)絡(luò)矢量圖形標(biāo)準(zhǔn)。SVG嚴(yán)格遵從XML語(yǔ)法，并用文本格式的描述性語(yǔ)言來(lái)描述圖像內(nèi)容，因此是一種和圖像分辨率無(wú)關(guān)的矢量圖形格式。

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

相關(guān)閱讀更多精彩內(nèi)容

  • 一.什么是SVG？ SVG 指的是可伸縮矢量圖形 (Scalable Vector Graphics),它用來(lái)定義...
    nightZing閱讀 17,567評(píng)論 11贊 62
  • SVG 學(xué)習(xí)筆記 SVG是什么 SVG 指可伸縮矢量圖形 (Scalable Vector Graphics) S...
    Penn_Xu閱讀 1,137評(píng)論 0贊 1
  • 轉(zhuǎn)載請(qǐng)聲明 原文鏈接 關(guān)注公眾號(hào)獲取更多資訊 這篇文章主要總結(jié)H5的一些新增的功能以及一些基礎(chǔ)歸納，這里只是一個(gè)提...
    前端進(jìn)階之旅閱讀 9,229評(píng)論 22贊 225
  • 王紅娟 山高，沒(méi)有媽媽的愛(ài)高 沒(méi)有媽媽的愛(ài)，就像一根草 海深，沒(méi)有媽媽的愛(ài)深 天闊，沒(méi)有媽媽的愛(ài)寬闊 地大，...
    宏昌居士123閱讀 639評(píng)論 0贊 9
  • 文/新鮮 如果一遇到困難就逃避，那只是短暫的舒服，之后的路會(huì)越來(lái)越難走。 十月底統(tǒng)計(jì)學(xué)開(kāi)課，第一堂課我有認(rèn)真的聽(tīng)。...
    新鮮wendy閱讀 1,383評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容