內聯 SVG
內聯 SVG 允許在 HTML 中編寫的 SVG 標記在瀏覽器中生成圖形。
使用 SVG 內聯時,不嚴格要求 DOCTYPE。而只是 <svg>
開啟和關閉標籤以及 viewBox 或 width 和 height 屬性就足夠了:
<svg width="100%" height="100%">
<!-- SVG elements go here -->
</svg>
上面的 <svg>
片段既充當容器又充當結構元素。該片段建立了自己的座標系。
下面是使用某些內容呈現 SVG 片段的示例。它將生成一個帶有 Hello World!
的矩形。其中的文字。
<svg width="50%" viewBox="0 0 10 10">
<rect x="1" y="1" width="5" height="3" fill="teal" />
<text x="2" y="2" font-family="Palatino, Georgia, serif" font-size="3%" font-weight="bold" fill="white">Hello World!</text>
</svg>
結果: