SVG Scalable Vector Graphics
SVG 使用 XML 格式定義圖像
內嵌使用
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle
cx="100"
cy="50"
r="40"
stroke="black"
stroke-width="3"
fill="red"
/>
</svg>
外部引用
<embed src="circle.svg" type="image/svg+xml" />
示例
1、矩形
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect
x="50"
y="20"
width="300"
height="100"
style="fill: rgb(0, 0, 255); stroke-width: 1; stroke: rgb(0, 0, 0);"
/>
</svg>
x 矩形到瀏覽器窗口左側的距離
y 矩形到瀏覽器窗口頂端的距離
width 寬度
height 高度
fill 填充顏色
stroke-width 邊框寬度
stroke 邊框顏色
2、10 號字
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text fill="#000000" font-size="10" font-family="Verdana" x="0" y="10">
你好
</text>
</svg>
資源
SVG 教程 https://www.runoob.com/svg/svg-tutorial.html
SVG 在線編輯 https://c.runoob.com/more/svgeditor/