SVG，即可缩放矢量图形（Scalable Vector Graphics），是一种基于可扩展标记语言（XML）的图形图像格式。SVG格式的图像可以无限放大而不失真，非常适合用于网页设计、图标制作等领域。本指南将从零开始，带你轻松掌握SVG图形的绘制。
SVG基础
SVG文档结构
一个SVG文档的基本结构如下：
xmlns
：指定SVG命名空间。
width
和
height
：定义SVG文档的宽度和高度。
viewBox
：定义图形的显示区域。
基本形状
SVG提供了多种基本形状，如矩形、圆形、椭圆、线、折线、多边形等。
矩形
x
和
y
：定义矩形左上角的坐标。
width
和
height
：定义矩形的宽度和高度。
fill
：定义矩形的填充颜色。
stroke
：定义矩形的边框颜色。
stroke-width
：定义边框的宽度。
圆形
cx
和
cy
：定义圆心的坐标。
r
：定义圆的半径。
椭圆
rx
和
ry
：定义椭圆的水平和垂直半径。
线
x1
和
y1
：定义线段的起始点坐标。
x2
和
y2
：定义线段的结束点坐标。
折线
points
：定义折线段的坐标点，多个点用空格分隔。
多边形
points
：定义多边形的坐标点，多个点用空格分隔。
SVG属性
SVG图形具有丰富的属性，以下是一些常用的属性：
fill
：定义图形的填充颜色。
stroke
：定义图形的边框颜色。
stroke-width
：定义边框的宽度。
opacity
：定义图形的透明度。
transform
：定义图形的变换操作，如平移、缩放、旋转等。
SVG动画
SVG支持动画效果，可以通过
元素实现。
attributeName
：指定要动画化的属性。
from
和
to
：定义动画的起始值和结束值。
dur
：定义动画的持续时间。
repeatCount
：定义动画的重复次数。
总结
SVG是一种强大的图形图像格式，通过本指南的学习，相信你已经掌握了SVG图形的基本绘制方法。在实际应用中，你可以根据自己的需求，灵活运用SVG的各种属性和动画效果，创作出丰富多彩的图形作品。祝你学习愉快！