📅 最后修改于: 2023-12-03 15:35:11.867000 🧑 作者: Mango
SVG全称为Scalable Vector Graphics，是一种基于XML语言的2D矢量图形格式，其内容可以很容易地通过文本编辑器进行创建和修改。与其他图像格式（如JPEG和PNG）不同，SVG可以通过改变其大小而不失去其清晰度和细节，这使得它非常适合用于各种不同的应用程序。
矢量图形：SVG文件是由矢量图元素构成的，当你放大或缩小SVG图像时，图像的质量不会受到影响。这使得SVG图像非常适用于某些场景，如Logo等。
缩放性：SVG图像可以随意缩放，不会失去其清晰度和细节。
可以被搜索：由于SVG图像是由文本构成的矢量图形，它们可以被搜索和索引。
可以被动态地修改和操纵：SVG图像可以被动态地修改和操纵，使他们成为创建交互式应用程序的理想选择。
以下是一些常用的SVG标签，它们以及它们的属性可以用于创建各种不同类型的SVG图像。
<svg>标签是SVG文档中最重要的标签之一，它定义了SVG图形容器。它还定义了SVG的宽度，高度，视口大小和背景颜色等。
属性：
width：图形的宽。
height: 图形的高。
viewBox：定义了视口的范围，一个用户代理以用户空间坐标系来构建一个视口。
示例代码：
<svg width="100" height="100" viewBox="0 0 100 100">
<!-- 在此添加图形元素 -->
</svg>
<rect>标签用于创建矩形。
属性：
x：矩形左上角的x值。
y: 矩形左上角的y值。
width：矩形的宽。
height：矩形的高。
fill：填充颜色。
stroke：描边颜色。
stroke-width：描边宽度。
示例代码：
<rect x="10" y="10" width="80" height="80" fill="#fff" stroke="#000" stroke-width="2" />
<circle>标签用于创建一个圆形。
属性：
cx：圆心的x值。
cy：圆心的y值。
r：圆的半径。
fill：填充颜色。
stroke：描边颜色。
stroke-width：描边宽度。
示例代码：
<circle cx="50" cy="50" r="40" fill="#fff" stroke="#000" stroke-width="2" />
<ellipse>标签用于创建一个椭圆形。
属性：
cx：椭圆中心的x值。
cy：椭圆中心的y值。
rx：椭圆在水平方向上的半径。
ry：椭圆在垂直方向上的半径。
fill：填充颜色。
stroke：描边颜色。
stroke-width：描边宽度。
示例代码：
<ellipse cx="50" cy="50" rx="30" ry="20" fill="#fff" stroke="#000" stroke-width="2" />
<line>标签用于创建直线。
属性：
x1：线段起点的x值。
y1：线段起点的y值。
x2：线段终点的x值。
y2：线段终点的y值。
stroke：描边颜色。
stroke-width：描边宽度。
示例代码：
<line x1="0" y1="0" x2="100" y2="100" stroke="#000" stroke-width="2" />
<polygon>标签用于创建多边形。
属性：
points：每个点的x，y坐标。
fill：填充颜色。
stroke：描边颜色。
stroke-width：描边宽度。
示例代码：
<polygon points="10,10 90,10 50,90" fill="#fff" stroke="#000" stroke-width="2" />
<path>标签用于创建路径。
属性：
d：路径命令。
fill：填充颜色。
stroke：描边颜色。
stroke-width：描边宽度。
示例代码：
<path d="M10 10 H 90 V 90 H 10 L 50 50 L 10 10" fill="#fff" stroke="#000" stroke-width="2" />
以上是一些常用的SVG标签和属性的介绍，通过这些标签，你可以创建出各种形状的SVG图像，希望本文能够对程序员有所帮助。