SVG，即可缩放矢量图形（Scalable Vector Graphics），是一种用于描述二维图形和图像的XML标记语言。SVG图形可自由缩放而不失真，非常适合用于网页设计和移动应用开发。本文将带你入门SVG绘图，从基本概念到绘制你的第一个图形。
SVG基本概念
1. SVG元素
SVG定义了一系列的图形元素，如矩形、圆形、折线、椭圆、路径等，以及文本元素。每个元素都有自己的属性，可以用来描述其形状、大小、颜色等。
2. 坐标系统
SVG使用笛卡尔坐标系来描述图形的位置和大小。坐标系统原点位于SVG画布的左上角。
3. 视口（Viewport）
视口是SVG画布的可见区域。可以通过viewBox属性来设置。
绘制第一个图形
接下来，我们将使用SVG绘制一个简单的圆形。
1. 创建SVG文档
首先，我们需要创建一个SVG文档。在HTML中，可以使用<svg>标签来定义SVG画布。
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<!-- 图形元素将在这里添加 -->
</svg>
在上面的代码中，我们定义了一个宽度为200像素、高度为200像素的SVG画布。
2. 添加圆形元素
现在，我们将添加一个圆形元素。
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
在上面的代码中，我们添加了一个圆形元素，其中心坐标为（50, 50），半径为40像素。圆形的轮廓颜色为绿色，轮廓宽度为4像素，填充颜色为黄色。
3. 保存SVG文档
将上面的代码保存为SVG文件，例如my-first-graphic.svg。现在，你就可以使用任何支持SVG的浏览器来查看你的第一个图形了。
总结
本文介绍了SVG绘图的基本概念和绘制第一个图形的方法。通过学习本文，你将能够使用SVG创建各种图形，并将其应用于网页和移动应用中。祝你学习愉快！