SVG，即可缩放矢量图形（Scalable Vector Graphics），是一种基于可扩展标记语言（XML）的图形图像格式。SVG图形可以无限放大而不失真，非常适合用于网页设计、动画制作等领域。本教程将从零开始，带你轻松掌握SVG图形绘制的技巧。
SVG基础
SVG文档结构
一个SVG文档的基本结构如下：
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<!-- 图形内容 -->
</svg>
其中，width 和 height 属性定义了SVG图形的宽度和高度，xmlns 属性指定了SVG命名空间。
SVG元素
SVG图形由多种元素组成，以下是一些常用的SVG元素：
<circle>：绘制圆形<rect>：绘制矩形<line>：绘制直线<polyline>：绘制多边形<polygon>：绘制闭合多边形<ellipse>：绘制椭圆<path>：绘制任意路径
SVG图形绘制实例
绘制圆形
以下代码绘制了一个半径为50像素的圆形：
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="50" stroke="black" stroke-width="2" fill="none" />
</svg>
其中，cx 和 cy 属性定义了圆心的坐标，r 属性定义了圆的半径，stroke 和 stroke-width 属性定义了圆的边框颜色和宽度，fill 属性定义了圆的填充颜色。
绘制矩形
以下代码绘制了一个宽度为100像素、高度为50像素的矩形：
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<rect x="50" y="50" width="100" height="50" stroke="black" stroke-width="2" fill="none" />
</svg>
其中，x 和 y 属性定义了矩形左上角的坐标，width 和 height 属性定义了矩形的宽度和高度。
绘制直线
以下代码绘制了一条从点(10, 10)到点(150, 150)的直线：
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<line x1="10" y1="10" x2="150" y2="150" stroke="black" stroke-width="2" />
</svg>
其中，x1 和 y1 属性定义了直线的起点坐标，x2 和 y2 属性定义了直线的终点坐标。
SVG高级技巧
动画
SVG支持动画效果，以下代码演示了如何使用<animate>元素实现圆形的放大和缩小动画：
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="50" stroke="black" stroke-width="2" fill="none">
<animate attributeName="r" from="50" to="100" dur="1s" fill="freeze" />
</circle>
</svg>
其中，attributeName 属性指定了要动画化的属性，from 和 to 属性定义了动画的起始和结束值，dur 属性定义了动画的持续时间，fill 属性定义了动画的填充模式。
交互
SVG支持交互效果，以下代码演示了如何使用<a>元素实现点击圆形跳转到指定链接：
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="50" stroke="black" stroke-width="2" fill="none">
<a href="https://www.example.com" target="_blank">
<title>点击这里</title>
</a>
</circle>
</svg>
其中，href 属性指定了链接的URL，target 属性定义了链接打开的方式，title 属性定义了鼠标悬停时显示的提示信息。
总结
通过本教程，你已初步掌握了SVG图形绘制的技巧。在实际应用中，你可以根据需要组合使用各种SVG元素和属性，创造出丰富多彩的图形效果。希望本教程能帮助你更好地了解SVG，为你的创作之路添砖加瓦。