本文概述
- HTML SVG Circle示例
- HTML SVG矩形示例
- HTML SVG多边形示例
- 为什么SVG比其他图像格式更受青睐？
HTML SVG是一种模块化语言, 用于描述XML中的图形。它描述了XML中的二维矢量和矢量/栅格混合图形。这是W3C的建议。 SVG图像及其行为在XML文本文件中定义。因此, 作为XML文件, 你可以使用文本编辑器创建和编辑SVG图像, 但是通常首选诸如inkspace之类的绘图程序来创建它。
SVG主要用于向量类型图, 例如饼图, X, Y坐标系中的二维图等。
【HTML SVG】< 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文本文件中定义, 因此可以使用任何文本编辑器来创建和编辑它们。
