SVG，即可缩放矢量图形（Scalable Vector Graphics），是一种基于可扩展标记语言（XML）的图形存储格式。SVG格式的图形具有分辨率无关的特性，可以在任何大小的屏幕上清晰显示，而且SVG文件的大小通常比位图文件小很多。这使得SVG成为网页设计和打印行业的理想选择。
本教程将从零开始，带你一步步学会如何使用SVG绘制矢量图形。无论是网页开发还是图形设计，掌握SVG都是非常有用的技能。
初识SVG
什么是SVG？
SVG是一种矢量图形格式，可以描述任何形状和路径。它支持多种图形元素，如图形、文本、矩形、圆形、椭圆、线条、路径等，还可以应用渐变、滤镜等高级效果。
SVG的优势
- 可缩放性：SVG图形可以无限放大或缩小，而不会失真。
- 小文件大小：SVG文件通常比位图文件小，有利于提高网页加载速度。
- 支持交互：SVG图形可以与JavaScript等其他技术结合，实现交互效果。
- 兼容性强：几乎所有的现代浏览器都支持SVG。
SVG基础
SVG元素
SVG元素是SVG图形的基本构建块。以下是一些常用的SVG元素：
<svg>：定义SVG图形的根元素。<circle>：圆形元素。<rect>：矩形元素。<ellipse>：椭圆元素。<line>：直线元素。<polyline>：折线元素。<polygon>：多边形元素。<path>：路径元素。
SVG属性
SVG元素可以设置多种属性，例如：
x和y：元素的中心点坐标。width和height：元素的宽度和高度。rx和ry：圆角矩形元素的半径。stroke：线条颜色。stroke-width：线条宽度。fill：填充颜色。
绘制第一个SVG图形
现在，让我们开始绘制一个简单的SVG图形：一个圆形。
创建SVG元素
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="50" stroke="black" stroke-width="3" fill="transparent" />
</svg>
在这段代码中，我们创建了一个SVG元素，并设置了宽度和高度。<circle>元素表示圆形，cx和cy属性定义了圆形的中心点坐标，r属性定义了圆的半径。stroke和stroke-width定义了圆的边框颜色和宽度，fill属性设置了圆的填充颜色。
浏览器中查看效果
将上述代码保存为.html文件，然后在浏览器中打开，你会看到一个黑色的边框圆形。
进阶技巧
使用渐变
SVG支持渐变效果，可以用来创建更丰富的图形。以下是一个使用线性渐变的例子：
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<circle cx="100" cy="100" r="50" stroke="black" stroke-width="3" fill="url(#grad1)" />
</svg>
在这段代码中，我们定义了一个名为grad1的线性渐变，从黄色到红色。然后将这个渐变应用到圆的填充颜色上。
使用滤镜
SVG滤镜可以用来创建复杂的图形效果。以下是一个使用滤镜的例子：
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="1" dy="1" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="5" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<circle cx="100" cy="100" r="50" stroke="black" stroke-width="3" fill="white" filter="url(#f1)" />
</svg>
在这段代码中，我们创建了一个名为f1的滤镜，包括偏移和模糊效果。然后将这个滤镜应用到圆形上，使其看起来更加立体。
总结
通过本教程，你学习了如何使用SVG绘制矢量图形。从简单的圆形开始，你逐渐了解了SVG的基本元素、属性和渐变、滤镜等高级效果。现在，你已经具备了绘制复杂SVG图形的能力，可以将其应用到网页或打印设计中。祝你学习愉快！