什么是 SVG？
SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
SVG 用于定義用于網(wǎng)絡(luò)的基于矢量的圖形
SVG 使用 XML 格式定義圖形
SVG 圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會有損失
SVG 是萬維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)
在 HTML5 中，你能夠直接將 SVG 元素嵌入 HTML 頁面中。
要使用 SVG 繪制圖形，你首先需要創(chuàng)建一個 <svg> 標(biāo)簽。
<svg width="1000" height="1000"></svg>
要創(chuàng)建一個圓形，需要添加一個 <circle> 標(biāo)簽。
下面是 SVG 代碼：
<svg width="1000" height="1000"> <circle cx="100" cy="50" r="40" fill="red" /> </svg>
cx和cy屬性定義圓點的x和y坐標(biāo)。如果省略cx和cy，圓的中心會被設(shè)置為 (0, 0)。
r屬性定義圓的半徑。
運行顯示結(jié)果如下圖：
<svg width="1000" height="1000"> <circle ="50" cy="25" r="20" fill="red" /> </ >
我們來看看 SVG 一些預(yù)定義的其他形狀元素：
SVG 矩形 - <rect>
<rect> 標(biāo)簽可用來創(chuàng)建矩形，以及矩形的變種。
<svg width="1000" height="1000"> <rect width="400" height="200" x="20" y="20" fill="red" /> </svg>
運行顯示結(jié)果如下圖：
SVG 直線 - <line>
<line> 標(biāo)簽是用來創(chuàng)建一個直線。
<svg width="500" height="510">
<line x1="20" y1="20" x2="300" y2="200"
style="stroke:#000000; stroke-linecap:round;
stroke-width:20" />
</svg>
運行顯示結(jié)果如下圖：
SVG 曲線 - <polyline>
<polyline> 標(biāo)簽是用于創(chuàng)建任何只有直線的形狀。
<svg width="2000" height="500">
<polyline style="stroke-linejoin:miter; stroke:black;
stroke-width:12; fill: none;"
points="100 100, 150 150, 200 100" />
</svg>
運行顯示結(jié)果如下圖：
SVG 橢圓 - <ellipse>
<ellipse> 標(biāo)簽是用來創(chuàng)建一個橢圓。
橢圓與圓很相似。不同之處在于橢圓有不同的x和y半徑，而圓的x和y半徑是相同的。
<svg width="500" height="250"> <ellipse cx="200" cy="100" rx="150" ry="70" style="fill:red" /> </svg>
運行顯示結(jié)果如下圖：
SVG 多邊形 - <polygon>
<polygon> 標(biāo)簽用來創(chuàng)建含有不少于三個邊的圖形。
<svg width="1000" height="1000">
<polygon points="100 100, 200 200, 300 0"
style="fill: red; stroke:black;" />
</svg>
運行顯示結(jié)果如下圖：
