📅 最后修改于: 2023-12-03 15:05:25.291000 🧑 作者: Mango
SVG（Scalable Vector Graphics，可伸缩矢量图形）是一种用于描述二维矢量图形的XML标记语言。它提供了一种使用直线、曲线、形状、文字和图像等元素来创建图形的方式。
SVG是使用XML格式定义的矢量图形。与其他图像格式（如JPEG和PNG）不同，SVG图像以文本形式储存，可以被编辑、搜索和压缩。由于SVG是矢量图形，无论放大还是缩小，图像保持清晰和锐利，不会失真。
SVG文件以.svg扩展名保存，并且可以使用任何文本编辑器进行编写。SVG图像可以使用CSS进行样式化，也可以通过JavaScript进行交互操作。将SVG嵌入到HTML文件中也非常简单，只需使用<svg>标签并提供必要的属性和元素。
以下是一个简单的SVG示例代码片段：
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
<rect x="50" y="50" width="200" height="100" fill="red" stroke="black" stroke-width="2" />
<circle cx="150" cy="150" r="50" fill="blue" />
<text x="50%" y="50%" text-anchor="middle">Hello SVG!</text>
</svg>
SVG元素可以分为多个类别，包括图形元素、文本元素、图像元素和其他元素。以下是一些常用的SVG元素：
<rect>：绘制矩形<circle>：绘制圆形<ellipse>：绘制椭圆<line>：绘制直线<polyline>：绘制折线<polygon>：绘制多边形<text>：绘制文本<tspan>：在文本内创建换行或样式化的子文本块<image>：插入图像<use>：重复使用元素<symbol>：定义可重用的图形片段<g>：创建分组元素<a>：创建超链接<defs>：定义可重用的元素<pattern>：定义填充和描边的图案<mask>：创建蒙版效果SVG属性用于控制图像的外观和行为。一些常见的SVG属性包括：
width：指定SVG宽度height：指定SVG高度fill：指定填充颜色stroke：指定描边颜色stroke-width：指定描边宽度opacity：指定透明度transform：指定变换效果（平移、缩放、旋转等）SVG可以使用CSS和JavaScript创建动画效果。可以使用CSS的@keyframes和animation属性来定义动画序列。通过使用JavaScript修改SVG属性或使用SVG.js等库来实现更复杂的动画效果。
以下是一个使用CSS动画的SVG代码片段示例：
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
<circle cx="150" cy="100" r="50" fill="blue">
<animate attributeName="cy" from="100" to="200" dur="1s" repeatCount="indefinite" />
</circle>
</svg>
SVG广泛应用于各种领域，包括图表、数据可视化、网页设计、游戏开发等。由于SVG文件可伸缩且体积较小，加载速度快，因此在响应式和移动设备设计中非常受欢迎。
以下是一些常用的SVG工具：
以上是关于SVG的简要介绍和基础知识。通过阅读本教程，你将能够使用SVG创建矢量图形，了解SVG元素、属性和动画，以及掌握常见应用场景和工具。希望对你的开发工作有所帮助！