引言
SVG（可缩放矢量图形）是一种基于可扩展标记语言（XML）的图形图像格式，它允许你创建具有矢量图形的网页。SVG图像可以无限放大而不失真，这使得它们非常适合网页设计。如果你是初学者，想要学习如何使用SVG绘制图标，那么这篇文章将为你提供一个详细的教程攻略。
了解SVG基础
在开始绘制图标之前，我们需要了解SVG的一些基本概念。
SVG元素
SVG使用一系列的XML元素来定义图形。以下是一些常用的SVG元素：
<svg>：定义SVG图形的根元素。<circle>：定义圆形。<rect>：定义矩形。<line>：定义直线。<polyline>：定义多边形。<polygon>：定义闭合的多边形。<ellipse>：定义椭圆。<path>：定义复杂的路径。
SVG属性
SVG元素具有多种属性，用于定义图形的样式和行为。以下是一些常用的SVG属性：
width和height：定义SVG图形的宽度和高度。fill：定义图形的填充颜色。stroke：定义图形的边框颜色和宽度。stroke-width：定义边框的宽度。stroke-linecap：定义边框的线帽样式。stroke-linejoin：定义边框的线连接样式。
绘制第一个图标：爱心
现在，让我们开始绘制一个简单的爱心图标。
创建SVG文件
首先，打开文本编辑器（如Notepad++或Sublime Text），创建一个新的文件，并将文件扩展名保存为.svg。
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<!-- 图形内容将在这里添加 -->
</svg>
添加爱心路径
接下来，我们使用<path>元素来绘制爱心。以下是一个示例代码：
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<path d="M50,10 Q90,50 50,90 Q10,50 50,10" fill="red" />
</svg>
在这个例子中，d属性定义了爱心的路径。M50,10表示移动到坐标（50, 10），Q90,50 50,90表示从（50, 10）到（50, 90）的二次贝塞尔曲线，Q10,50 50,10表示从（50, 90）到（50, 10）的二次贝塞尔曲线。
添加边框
现在，我们为爱心添加一个边框。修改<path>元素如下：
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<path d="M50,10 Q90,50 50,90 Q10,50 50,10" fill="red" stroke="black" stroke-width="2" />
</svg>
保存并查看结果
将文件保存为.svg格式，然后在浏览器中打开它。你应该能看到一个红色的爱心，周围有一个黑色的边框。
总结
通过本教程，你学习了如何从零开始使用SVG绘制图标。现在，你可以尝试绘制其他形状和复杂的图标。记住，SVG是一个非常强大的工具，可以用于创建各种图形和动画。继续练习，你会越来越熟练。