這篇文章主要介紹如何使用svg，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)始終堅(jiān)持【策劃先行，效果至上】的經(jīng)營理念，通過多達(dá)十載累計(jì)超上千家客戶的網(wǎng)站建設(shè)總結(jié)了一套系統(tǒng)有效的全網(wǎng)推廣解決方案，現(xiàn)已廣泛運(yùn)用于各行各業(yè)的客戶，其中包括：成都玻璃隔斷等企業(yè)，備受客戶贊美。

SVG是什么？
SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
SVG 用來定義用于網(wǎng)絡(luò)的基于矢量的圖形
SVG 使用 XML 格式定義圖形
SVG 圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會(huì)有所損失
SVG 是萬維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)
SVG 與諸如 DOM 和 XSL 之類的 W3C 標(biāo)準(zhǔn)是一個(gè)整體

與其他圖像格式相比，使用 SVG 的優(yōu)勢(shì)在于：
SVG 可被非常多的工具讀取和修改（比如記事本）
SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強(qiáng)。
SVG 是可伸縮的
SVG 圖像可在任何的分辨率下被高質(zhì)量地打印
SVG 可在圖像質(zhì)量不下降的情況下被放大
SVG 圖像中的文本是可選的，同時(shí)也是可搜索的（很適合制作地圖）
SVG 可以與 Java 技術(shù)一起運(yùn)行
SVG 是開放的標(biāo)準(zhǔn)

SVG 文件是純粹的 XML

代碼結(jié)構(gòu)

 
This is an HTML paragraph
 



 

SVG提供的預(yù)定義形狀元素的使用和操作：

標(biāo)簽可用來創(chuàng)建矩形，以及矩形的變種

代碼解釋：
1)rect 元素的 width 和 height 屬性可定義矩形的高度和寬度
2)style 屬性用來定義 CSS 屬性
3)CSS 的 fill 屬性定義矩形的填充顏色（rgb 值、顏色名或者十六進(jìn)制值）
4)CSS 的 stroke-width 屬性定義矩形邊框的寬度
5)CSS 的 stroke 屬性定義矩形邊框的顏色
6)x 屬性定義矩形的左側(cè)位置（例如，x="0" 定義矩形到瀏覽器窗口左側(cè)的距離是 0px）
7)y 屬性定義矩形的頂端位置（例如，y="0" 定義矩形到瀏覽器窗口頂端的距離是 0px）
8)CSS 的 fill-opacity 屬性定義填充顏色透明度（合法的范圍是：0 - 1）
9)CSS 的 stroke-opacity 屬性定義筆觸顏色的透明度（合法的范圍是：0 - 1)
10)rx 和 ry 屬性可使矩形產(chǎn)生圓角。

標(biāo)簽可用來創(chuàng)建一個(gè)圓

代碼解釋：
1)cx 和 cy 屬性定義圓點(diǎn)的 x 和 y 坐標(biāo)。如果省略 cx 和 cy，圓的中心會(huì)被設(shè)置為 (0, 0)
2)r 屬性定義圓的半徑。

標(biāo)簽可用來創(chuàng)建橢圓

代碼解釋：
1)cx 屬性定義圓點(diǎn)的 x 坐標(biāo)
2)cy 屬性定義圓點(diǎn)的 y 坐標(biāo)
3)rx 屬性定義水平半徑
4)ry 屬性定義垂直半徑

標(biāo)簽用來創(chuàng)建線條

代碼解釋：
1)x1 屬性在 x 軸定義線條的開始
2)y1 屬性在 y 軸定義線條的開始
3)x2 屬性在 x 軸定義線條的結(jié)束
4)y2 屬性在 y 軸定義線條的結(jié)束

標(biāo)簽用來創(chuàng)建含有不少于三個(gè)邊的圖形

代碼解釋：
1)points 屬性定義多邊形每個(gè)角的 x 和 y 坐標(biāo)

標(biāo)簽用來創(chuàng)建僅包含直線的形狀

代碼解釋：
1)points 屬性定義每段線的每個(gè)角的 x 和 y 坐標(biāo)

標(biāo)簽用來定義路徑

下面的命令可用于路徑數(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

注釋：以上所有命令均允許小寫字母。大寫表示絕對(duì)定位，小寫表示相對(duì)定位

SVG 濾鏡 可用的濾鏡有：

feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight

Gaussian Blur高斯模糊

標(biāo)簽用來定義 SVG 濾鏡。 標(biāo)簽使用必需的 id 屬性來定義向圖形應(yīng)用哪個(gè)濾鏡？
標(biāo)簽必須嵌套在 標(biāo)簽內(nèi)。 標(biāo)簽是 definitions 的縮寫，它允許對(duì)諸如濾鏡等特殊元素進(jìn)行定義。

代碼解釋：
1) 標(biāo)簽的 id 屬性可為濾鏡定義一個(gè)唯一的名稱（同一濾鏡可被文檔中的多個(gè)元素使用）
2)filter:url 屬性用來把元素鏈接到濾鏡。當(dāng)鏈接濾鏡 id 時(shí)，必須使用 # 字符
3)濾鏡效果是通過 標(biāo)簽進(jìn)行定義的。fe 后綴可用于所有的濾鏡
4) 標(biāo)簽的 stdDeviation 屬性可定義模糊的程度
5)in="SourceGraphic" 這個(gè)部分定義了由整個(gè)圖像創(chuàng)建效果

可用來定義 SVG 的線性漸變

標(biāo)簽必須嵌套在 的內(nèi)部。 標(biāo)簽是 definitions 的縮寫，它可對(duì)諸如漸變之類的特殊元素進(jìn)行定義。
線性漸變可被定義為水平、垂直或角形的漸變：
1)當(dāng) y1 和 y2 相等，而 x1 和 x2 不同時(shí)，可創(chuàng)建水平漸變
2)當(dāng) x1 和 x2 相等，而 y1 和 y2 不同時(shí)，可創(chuàng)建垂直漸變
3)當(dāng) x1 和 x2 不同，且 y1 和 y2 不同時(shí)，可創(chuàng)建角形漸變

代碼解釋：
1) 標(biāo)簽的 id 屬性可為漸變定義一個(gè)唯一的名稱
2)fill:url(#orange_red) 屬性把 ellipse 元素鏈接到此漸變
3) 標(biāo)簽的 x1、x2、y1、y2 屬性可定義漸變的開始和結(jié)束位置
4)漸變的顏色范圍可由兩種或多種顏色組成。每種顏色通過一個(gè) 標(biāo)簽來規(guī)定。offset 屬性用來定義漸變的開始和結(jié)束位置。

用來定義放射性漸變

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

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

在svg中提供了如g元素這樣的將多個(gè)元素組織在一起的元素。由g元素編組在一起的可以設(shè)置相同的顏色，可以進(jìn)行坐標(biāo)變

以上是“如何使用svg”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！