SVG矢量圖：

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

在html中使用SVG圖像：

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

<!-- 此標簽允許使用腳本，支持在HTML5中使用 --><embed src="circle1.svg" type="image/svg+xml" /><!-- 此標簽不支持腳本，支持在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><!-- 當點擊鏈接后跳到SVG文件顯示圖像 --><a href="circle1.svg">點擊查看SVG文件</a>

SVG中預定義圖形：

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

<div><svg width='500' height='600'><!-- 1.<sircle/> 定義圓，其中屬性：cx定義圓心橫坐標 cy定義圓心縱坐標 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表示坐標 rx和ry定義圓角 width和height定義尺寸 stroke定義描邊顏色 stroke-width定義描邊寬度 fill定義填充顏色 opacity定義半透明，當前加以下前綴則表示該屬性控制的半透明--><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表示圓心坐標 rx和ry表示水平半徑和垂直半徑 后面的屬性和上面一樣--><ellipse cx="300" cy="80" rx="50" ry="50" style="fill:yellow;stroke:purple;stroke-width:2"/><!-- 4.<line/> 定義直線，x1和y1表示直線起始坐標 x2和y2表示結束坐標 后面屬性和上面一致--><line x1="20" y1="20" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2"/><!-- 5.<polygon/> 定義至少三條邊的多邊形，points='左邊對'，里面表示x,y的坐標對，每個坐標對表示線的交點，有前后順序，自動封閉，后面屬性和上面一致--><!-- fill-rule屬性：由于判斷畫布上某區域是否屬于該圖形內部，內部區域會被填充，外部區域則不會被填充，屬性值：nonzero | evenodd | inherit,關于屬性值解釋：查閱官方文檔：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的坐標對，有前后順序，依次連接，后面的屬性和上面一致--><polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" /><!-- 7.<path/> 定義路徑，下面的命令可用于路徑數據：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表示開始坐標 transform表示轉換里面rotate(角度 坐標)表示旋轉--><text x="100" y="15" transform="rotate(45 0,100)" fill="red">hello word</text></svg></div>

SVG濾鏡：

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

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

濾鏡定義在元素中，標簽用來定義SVG濾鏡,如：

<div><svg><defs><filter id="f1" x="0" y="0"><feGaussianBlur in="SourceGraphic" stdDeviation="15" /><!--feGaussianBlur 用于創建模糊效果 --></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在實際開發中并不常用，因此這里不做詳細介紹，如果想了解更多，建議閱讀官方文檔：https://www.runoob.com/svg/svg-tutorial.html

提示：本文圖片等素材來源于網絡，若有侵權，請發郵件至郵箱：810665436@qq.com聯系筆者 刪除。
筆者：苦海

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。