SVG矢量圖：

html5支持內(nèi)聯(lián)svg,svg指可以伸縮的矢量圖，其優(yōu)點是放大不會模糊，支持任意尺寸打印不損壞品質(zhì)，可通過編輯器創(chuàng)建和修改，；使用XML定義，其本質(zhì)就是XML文件，和Canvas類似；

在html中使用SVG圖像：

SVG 文件可通過：、 或者 標(biāo)簽嵌入 HTML 文檔,或直接鏈接到SVG文件。具體如下：

<!-- 此標(biāo)簽允許使用腳本，支持在HTML5中使用 --><embed src="circle1.svg" type="image/svg+xml" /><!-- 此標(biāo)簽不支持腳本，支持在HTML5和HTML4、XHTML使用 --><object data="circle1.svg" type="image/svg+xml"></object><!-- 允許使用腳本，支持HTML5中使用 --><iframe src="circle1.svg"></iframe><!-- 直接顯示在HTML元素中 --><div><svg xmlns="http://www.w3.org/2000/svg" version="1.1"><circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /></svg></div><!-- 當(dāng)點擊鏈接后跳到SVG文件顯示圖像 --><a href="circle1.svg">點擊查看SVG文件</a>

SVG中預(yù)定義圖形：

SVG像Canvas一樣提供了一套預(yù)定義好的元素（標(biāo)簽，這些標(biāo)簽可以是單標(biāo)簽，也可以是雙標(biāo)簽，控制屬性的屬性詞位置和html標(biāo)簽中的屬性寫法一樣，可以用style屬性替換），具體如下面案例：

<div><svg width='500' height='600'><!-- 1.<sircle/> 定義圓，其中屬性：cx定義圓心橫坐標(biāo) cy定義圓心縱坐標(biāo) r定義圓的半徑 stroke定義圓邊框的顏色 stroke-width定義圓邊框的寬度 fill定義圓的填充顏色 --><circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /><circle cx="10" cy="50" r="40" stroke="yellow" stroke-width="2" fill="blue" opacity='.5'></circle><!-- 2.<rect/> 定義矩形，x和y表示坐標(biāo) rx和ry定義圓角 width和height定義尺寸 stroke定義描邊顏色 stroke-width定義描邊寬度 fill定義填充顏色 opacity定義半透明，當(dāng)前加以下前綴則表示該屬性控制的半透明--><rect x='30' y='130' rx="20" ry="20" width='200' height='50' stroke='yellow' stroke-width='10' stroke-opacity = '.4' fill='blue' fill-opacity='0.5'/><rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"></rect>><!-- 3.<ellipse/> 定義橢圓，cx和cy表示圓心坐標(biāo) rx和ry表示水平半徑和垂直半徑 后面的屬性和上面一樣--><ellipse cx="300" cy="80" rx="50" ry="50" style="fill:yellow;stroke:purple;stroke-width:2"/><!-- 4.<line/> 定義直線，x1和y1表示直線起始坐標(biāo) x2和y2表示結(jié)束坐標(biāo) 后面屬性和上面一致--><line x1="20" y1="20" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2"/><!-- 5.<polygon/> 定義至少三條邊的多邊形，points='左邊對'，里面表示x,y的坐標(biāo)對，每個坐標(biāo)對表示線的交點，有前后順序，自動封閉，后面屬性和上面一致--><!-- fill-rule屬性：由于判斷畫布上某區(qū)域是否屬于該圖形內(nèi)部，內(nèi)部區(qū)域會被填充，外部區(qū)域則不會被填充，屬性值：nonzero | evenodd | inherit,關(guān)于屬性值解釋：查閱官方文檔：https://www.runoob.com/svg/svg-polygon.html --><polygon points="0,0 100,0 100,100 0,100" style="fill:lime;stroke:purple;stroke-width:1"/><!-- 6.<polyline> 定義折線， points屬性里面的值是x,y的坐標(biāo)對，有前后順序，依次連接，后面的屬性和上面一致--><polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" /><!-- 7.<path/> 定義路徑，下面的命令可用于路徑數(shù)據(jù)：M = moveto,L = lineto,H = horizontal lineto,V = vertical lineto,C = curveto,S = smooth curveto,Q = quadratic Bézier curve,T = smooth quadratic Bézier curveto,A = elliptical Arc,Z = closepath,注意：以上所有命令均允許小寫字母。大寫表示絕對定位，小寫表示相對定位。--><path d="M150 0 L75 200 L225 200 Z" /><!-- 8.<text></text> 文本， x和y表示開始坐標(biāo) transform表示轉(zhuǎn)換里面rotate(角度 坐標(biāo))表示旋轉(zhuǎn)--><text x="100" y="15" transform="rotate(45 0,100)" fill="red">hello word</text></svg></div>

SVG濾鏡：

SVG濾鏡用來增加對SVG圖形的特殊效果，如：

SVG可用的濾鏡是：feBlend - 與圖像相結(jié)合的濾鏡、feColorMatrix - 用于彩色濾光片轉(zhuǎn)換、feComponentTransfer、feComposite、feConvolveMatrix、feDiffuseLighting、feDisplacementMap、feFlood、feGaussianBlur、feImage、feMerge、feMorphology、feOffset - 過濾陰影、feSpecularLighting、feTile、feTurbulence、feDistantLight - 用于照明過濾、fePointLight - 用于照明過濾、feSpotLight - 用于照明過濾，除此之外，您可以在每個 SVG 元素上使用多個濾鏡。

濾鏡定義在元素中，標(biāo)簽用來定義SVG濾鏡,如：

<div><svg><defs><filter id="f1" x="0" y="0"><feGaussianBlur in="SourceGraphic" stdDeviation="15" /><!--feGaussianBlur 用于創(chuàng)建模糊效果 --></filter></defs><rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" /></svg></div>

SVG漸變：

SVG漸變主要有兩種類型：Linear線性漸變、Radial徑向漸變

<div><svg><defs><linearGradient id="gr" x1="0%" y1="100%" x2="100%" y2="0%"><stop offset="0%" stop-color='rgb(255,255,0)'/><stop offset="100%" stop-color='rgb(0,0,0)'/></linearGradient></defs><ellipse cx="0" cy="0" rx="100" ry="100" fill="url(#gr)" /></svg></div>

推薦文檔：

由于SVG在實際開發(fā)中并不常用，因此這里不做詳細(xì)介紹，如果想了解更多，建議閱讀官方文檔：https://www.runoob.com/svg/svg-tutorial.html

提示：本文圖片等素材來源于網(wǎng)絡(luò)，若有侵權(quán)，請發(fā)郵件至郵箱：810665436@qq.com聯(lián)系筆者 刪除。
筆者：苦海

總結(jié)

以上是生活随笔為你收集整理的SVG矢量图简介的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。