SVG（Scalable Vector Graphics）是一种矢量图形格式，用于在 Web 页面上显示图像、图表和动画等内容。SVG 具有无限的放大缩小能力而不会失去清晰度，这使其成为前端开发中不可或缺的技术之一。
了解 SVG 基础语法
SVG 图形由 XML 编写，在 HTML 文档中可通过 <svg> 标签嵌入。下面是一个简单的 SVG 示例：
<svg width="100" height="100"> <circle cx="50" cy="50" r="40" fill="red" /> </svg>
其中 width 和 height 属性分别设置 SVG 的宽度和高度，cx 和 cy 属性指定圆心坐标，r 属性指定半径，fill 属性设置填充颜色。
SVG 支持多种基本形状，如矩形、圆形、椭圆等，在创建图形时需要注意各属性的使用方法和限制，详细信息可以参考 MDN Web 文档。
制作复杂的 SVG 图形
除了基本形状，SVG 还支持路径（path）和文本（text）等元素，这些元素可以结合使用创造出更加复杂的图形。
比如下面这个 SVG 图形，它由多个路径元素组成：
<svg width="200" height="200"> <path d="M 100 20 C 40 40, 40 160, 100 180 C 160 160, 160 40, 100 20 Z" fill="#fff" stroke="#000" /> <path d="M 100 60 L 80 80 L 120 80 L 100 60 Z" fill="#000" /> <path d="M 60 120 C 60 80, 140 80, 140 120 L 140 140 C 140 180, 60 180, 60 140 Z" fill="#666" /> </svg>
其中 d 属性指定了路径的绘制方式，可以创建直线、曲线和贝塞尔曲线等。同时，为了使图形更加美观，我们还可以使用渐变（gradient）、滤镜（filter）等功能。
SVG 动画效果实现
SVG 提供了动画标签来实现各种动态效果，例如让图形在页面加载时逐渐显示出来，或者让图形在鼠标悬浮时发生变化等。以下是一个简单的 SVG 动画示例：
<svg width="100" height="100">
<rect x="10" y="10" width="80" height="80" fill="red">
<animate attributeName="width" from="0" to="80" dur="1s" begin="0s" fill="freeze" />
</rect>
</svg>其中 <animate> 标签指定了动画属性名称、起始值、结束值和持续时间等参数，实现了矩形宽度从 0 到 80 的变化。
结语
学习 SVG 可以让前端开发者更好地掌握 Web 图形技术，提升页面的视觉表现力和用户体验。在实际开发中，我们还可以利用 JavaScript 控制 SVG 元素，实现更加丰富多彩的交互效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27620