在HTML5中，你可以直接嵌入SVG元素融入到你的HTML頁面。
嵌入SVG直接到HTML頁面
下面是一個簡單的SVG圖形的例子：
這裡是HTML代碼：
例
<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40"
stroke="green" stroke-width="4" fill="yellow"
/>
</svg>
</body>
</html> 試一試» SVG Code explanation:
- SVG圖像始於一個<svg>元素
- 在寬度和高度屬性<svg>元素定義了SVG圖像的寬度和高度
- 在<circle>元素被用來繪製一個圓
- 在CX和cy屬性定義的x和圓的中心的y坐標。 如果省略CX和CY，圓的中心被設定為(0, 0)
- 所述r屬性定義了圓的半徑
- 行程和卒中width屬性控制如何顯示形狀的輪廓。 我們把圓的輪廓設置為4像素綠色的“邊界”
- 該fill屬性指的是圓圈內的顏色。 我們設置填充顏色為黃色
- 閉幕</svg>標記關閉SVG圖像
注意：由於SVG是用XML編寫的，所有的元素必須正確關閉！