HTML教程-HTML<svg>标签

HTML SVG（Scalable Vector Graphics）是一种基于XML的模块化语言，用于描述图形。它主要用于创建二维矢量和混合矢量/光栅图形。SVG是W3C的推荐标准，SVG图像以XML文本文件的形式定义。尽管可以使用文本编辑器创建和编辑SVG图像，但通常更常用的是绘图程序，如Inkscape。

SVG常用于创建基于矢量的图表，例如饼图、二维图表等。

<svg>元素用于定义SVG片段。

HTML SVG 圆形示例

下面是使用svg标签绘制圆形的示例：

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="4" fill="red" />
</svg>

在上面的示例中，我们使用了circle标签的cx、cy和r属性来定义圆形。这些属性不能与svg的rect标签一起使用。

HTML SVG 矩形示例

下面是使用svg标签绘制矩形的示例：

<svg width="200" height="100">
  <rect width="200" height="100" stroke="yellow" stroke-width="4" fill="red" />
</svg>

在上面的示例中，我们使用了rect标签的width和height属性来定义矩形。

HTML SVG 多边形示例

下面是使用svg标签绘制多边形的示例：

<svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:red;stroke:yellow;stroke-width:5;fill-rule:nonzero;" />
</svg>

在上面的示例中，我们使用了polygon标签的points属性来定义多边形的顶点坐标。

为什么优先使用SVG而不是其他图像格式？

SVG图像可以以最小的尺寸保存。与像JPG或PNG这样的位图图像格式不同，它不包含固定的像素点集。因此，它可以以任何分辨率高质量打印。

SVG图像可以进行一定程度的缩放而不会降低图像质量。

SVG图像及其行为是在XML文本文件中定义的，因此可以使用任何文本编辑器创建和编辑。