SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的XML标记语言。在web开发中，SVG被广泛应用于绘制图形、图表和动画等方面。本章节将介绍SVG的基本概念和语法，以便读者能够更好地理解和应用SVG。
SVG基本概念
SVG是一种基于XML的标记语言，用于描述二维矢量图形。与位图图像相比，矢量图形具有无限的分辨率和缩放性，因此在不同大小的屏幕上显示时不会失真。SVG图形由一系列的图形元素组成，如矩形、圆形、线条等。
SVG语法
SVG文档由<svg>标签开始和结束，用于定义SVG图形的宽度、高度和其他属性。在<svg>标签内部，可以使用各种图形元素和属性来绘制图形。
<svg width="200" height="200"> <rect x="50" y="50" width="100" height="100" fill="red" /> <circle cx="150" cy="150" r="50" fill="blue" /> <line x1="50" y1="50" x2="150" y2="150" stroke="black" /> </svg>
上面的示例代码演示了如何使用SVG绘制一个红色的矩形、一个蓝色的圆形和一条黑色的线条。
SVG属性
SVG元素可以包含各种属性，用于控制元素的外观和行为。常用的SVG属性包括fill（填充颜色）、stroke（边框颜色）、stroke-width（边框宽度）等。
<rect x="50" y="50" width="100" height="100" fill="red" stroke="black" stroke-width="2" /> <circle cx="150" cy="150" r="50" fill="blue" stroke="black" stroke-width="2" /> <line x1="50" y1="50" x2="150" y2="150" stroke="black" stroke-width="2" />
上面的示例代码中，fill属性用于设置填充颜色，stroke属性用于设置边框颜色，stroke-width属性用于设置边框宽度。
SVG坐标系统
SVG使用一个笛卡尔坐标系统来定位图形元素的位置。坐标原点位于左上角，x轴向右延伸，y轴向下延伸。可以使用x、y、cx、cy等属性来指定图形元素的位置。
<rect x="50" y="50" width="100" height="100" /> <circle cx="150" cy="150" r="50" /> <line x1="50" y1="50" x2="150" y2="150" />
上面的示例代码中，x和y属性用于指定矩形的左上角坐标，cx和cy属性用于指定圆形的中心坐标，x1、y1、x2、y2属性用于指定线条的起始和结束坐标。
以上就是关于SVG参考手册的内容，希望读者能够通过本章节对SVG有更深入的了解。