SVG 可缩放矢量图形

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/