SVG，即可缩放矢量图形（Scalable Vector Graphics），是一种基于可扩展标记语言（XML）的图形文件格式。SVG格式的图像可以无限放大而不失真，非常适合用于网页设计和移动设备。本教程将从零开始，带你轻松入门SVG绘图，让你掌握网页图形设计的秘密。
第一部分：SVG基础
1. SVG简介
SVG是一种基于XML的矢量图形格式，它允许你在网页上创建可缩放的图形。SVG图形可以包含直线、曲线、矩形、圆形、文本等多种元素，并且可以通过CSS和JavaScript进行样式和交互。
2. SVG基本结构
一个SVG文件的基本结构如下：
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<!-- 图形内容 -->
</svg>
其中，xmlns属性指定了SVG命名空间，width和height属性定义了SVG画布的大小。
3. SVG元素
SVG包含多种元素，以下是一些常见的元素：
<line>：绘制直线。<circle>：绘制圆形。<rect>：绘制矩形。<ellipse>：绘制椭圆。<polyline>：绘制折线。<polygon>：绘制多边形。<text>：添加文本。
第二部分：SVG绘制实例
1. 绘制矩形
以下代码绘制了一个200x200像素的矩形：
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<rect x="10" y="10" width="180" height="180" stroke="black" stroke-width="2" fill="none" />
</svg>
2. 绘制圆形
以下代码绘制了一个半径为50像素的圆形：
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<circle cx="100" cy="100" r="50" stroke="black" stroke-width="2" fill="none" />
</svg>
3. 绘制文本
以下代码在SVG画布上添加了一段文本：
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<text x="10" y="20" font-family="Arial" font-size="18" fill="black">Hello, SVG!</text>
</svg>
第三部分：SVG样式与交互
1. CSS样式
SVG图形可以通过CSS样式进行美化。以下代码为矩形添加了填充色：
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<rect x="10" y="10" width="180" height="180" stroke="black" stroke-width="2" fill="red" />
</svg>
2. JavaScript交互
SVG图形可以通过JavaScript进行交互。以下代码使用JavaScript为圆形添加了点击事件：
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<circle cx="100" cy="100" r="50" stroke="black" stroke-width="2" fill="none" onclick="alert('Circle clicked!')" />
</svg>
总结
通过本教程，你已成功入门SVG绘图。SVG绘图具有无限放大而不失真的特点，非常适合用于网页设计和移动设备。希望你能将所学知识应用到实际项目中，创作出更多精美的图形作品。