HTML SVG

本文概述

• HTML SVG Circle示例
• HTML SVG矩形示例
• HTML SVG多边形示例
• 为什么SVG比其他图像格式更受青睐？

HTML SVG是可缩放矢量图形的缩写。

HTML SVG是一种模块化语言, 用于描述XML中的图形。它描述了XML中的二维矢量和矢量/栅格混合图形。这是W3C的建议。 SVG图像及其行为在XML文本文件中定义。因此, 作为XML文件, 你可以使用文本编辑器创建和编辑SVG图像, 但是通常首选诸如inkspace之类的绘图程序来创建它。

SVG主要用于向量类型图, 例如饼图, X, Y坐标系中的二维图等。

<svg>元素指定SVG片段的根。你可以为SVG文件中的每个元素和每个属性设置动画。

HTML SVG Circle示例

让我们看一下通过svg标签绘制圆圈的示例。

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

在这里, 我们使用圆形标记的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>

在这里, 我们使用多边形标签的points属性。

立即测试

输出：

为什么SVG比其他图像格式更受青睐？

SVG图像可以保存为最小尺寸。与JPG或PNG等位图图像格式不同, 它不包含固定的点集。因此, 以任何分辨率进行高质量打印也很容易。

SVG图像可以缩放到一定水平而不会降低图像质量。

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