SVG，即可缩放矢量图形（Scalable Vector Graphics），是一种基于可扩展标记语言（XML）的图形矢量格式。SVG图形在放大或缩小时不会失真，因此常用于网页设计、移动应用和印刷出版等领域。本文将带你从零开始，轻松掌握SVG绘图，快速上手创作矢量图形。
SVG基础概念
1. SVG文档结构
一个SVG文档的基本结构如下：
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<!-- SVG图形内容 -->
</svg>
其中，width 和 height 属性定义了SVG画布的大小，xmlns 属性指定了SVG命名空间。
2. SVG图形元素
SVG包含多种图形元素，如：
<line>：直线<circle>：圆形<ellipse>：椭圆<rect>：矩形<polygon>：多边形<polyline>：折线<path>：路径
3. SVG属性
SVG图形元素可以具有多种属性，如：
x、y：定义图形元素的起始位置width、height：定义图形元素的宽度和高度r：定义圆形的半径cx、cy：定义椭圆、圆形和路径的圆心坐标fill：定义图形元素的填充颜色stroke：定义图形元素的描边颜色stroke-width：定义图形元素的描边宽度
SVG绘图实例
下面是一个简单的SVG绘图实例，绘制一个红色的矩形：
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="180" height="180" fill="red" stroke="black" stroke-width="2" />
</svg>
在这个例子中，我们创建了一个宽度为180、高度为180的红色矩形，并为其添加了黑色边框。
SVG高级技巧
1. SVG动画
SVG支持多种动画效果，如：
<animate>：关键帧动画<animateTransform>：变换动画<set>：属性动画
下面是一个使用<animate>元素的示例，实现红色矩形的放大和缩小动画：
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="180" height="180" fill="red" stroke="black" stroke-width="2">
<animate attributeName="width" from="180" to="300" dur="2s" repeatCount="indefinite" />
<animate attributeName="height" from="180" to="300" dur="2s" repeatCount="indefinite" />
</rect>
</svg>
2. SVG滤镜
SVG支持多种滤镜效果，如：
<feGaussianBlur>：高斯模糊<feColorMatrix>：颜色矩阵<feConvolveMatrix>：卷积矩阵
下面是一个使用高斯模糊滤镜的示例：
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
<rect x="10" y="10" width="180" height="180" fill="red" stroke="black" stroke-width="2" filter="url(#blur)" />
</svg>
总结
通过本文的介绍，相信你已经对SVG绘图有了初步的了解。SVG绘图具有多种优势，如可缩放、易于编辑、支持动画和滤镜等。希望本文能帮助你轻松掌握SVG绘图，快速上手创作矢量图形。