一、SVG简介
SVG（Scalable Vector Graphics）是一种用于描述二维矢量图的XML标记语言，可用于创建静态、动态或交互式图形和动画，支持多种图形效果和过渡效果。相对于HTML语言而言，SVG是更专注于图形的呈现技术，拥有更好的视觉效果。
SVG标签应用于HTML和XHTML文档中，可以被任何XML软件包读取，像Firefox、Chrome、Safari、Opera和Internet Explorer浏览器。可以通过使用CSS对SVG文档进行样式化，使得开发人员可以轻松地控制SVG文档中的元素。
二、SVG语法规则
SVG是基于XML语法规则的矢量图像格式，因此，SVG文档必须是良好的XML文档。以下是SVG语法规则的核心内容：
- SVG文档必须以XML声明开始：
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
- SVG文档必须包含一个根元素：
<svg>...</svg>
- SVG文档中的所有元素必须拥有命名空间：
<svg xmlns="http://www.w3.org/2000/svg">...</svg>
- SVG属性可以包含在起始标签中，例如：
<rect x="50" y="50" width="200" height="100" />
- SVG属性可以包含在样式表中，例如：
<style type="text/css"> rect {fill: blue; stroke: red;} </style>
三、SVG基本形状
SVG提供了很多基本图形的绘制方法，例如：矩形、圆形、椭圆、线条等。以下是一些常见的基本形状的绘制方法：
1、矩形 – <rect>
矩形是SVG中最常见的形状之一，使用矩形标签<rect>可以绘制一个矩形，矩形的位置和大小可以通过添加x、y、width、height属性来定义。以下是一个例子，绘制一个宽度为200px，高度为100px的蓝色矩形：
<svg> <rect x="50" y="50" width="200" height="100" fill="blue" /> </svg>
2、圆形 – <circle>
圆形是一个具有确定半径和中心坐标的园。在SVG中使用圆形标签<circle>可以绘制一个圆形，圆形的位置和大小可以通过添加cx、cy和r属性来定义，cx和cy表示圆心的x和y坐标，r表示圆的半径。以下是一个例子，绘制一个半径为50px，中心点坐标为(100,100)的红色圆形：
<svg> <circle cx="100" cy="100" r="50" fill="red" /> </svg>
3、椭圆 – <ellipse>
椭圆是一个长度为两个焦点的定点之和的所有点的集合。在SVG中使用椭圆标签<ellipse>来绘制椭圆形，椭圆的位置和大小可以通过添加cx、cy、rx和ry属性来定义。以下是一个例子，绘制一个水平半径为80px，垂直半径为50px，中心点坐标为(150,125)的橙色椭圆形：
<svg> <ellipse cx="150" cy="125" rx="80" ry="50" fill="orange" /> </svg>
4、线条 – <line>
在SVG中使用线条标签<line>绘制直线。线条的位置和长度可以通过添加x1、y1、x2和y2属性来定义，x1和y1表示线条的起始点，x2和y2表示线条的终点。以下是一个例子，绘制一个从(0,0)到(200,200)的一条4px粗的黑色线条：
<svg> <line x1="0" y1="0" x2="200" y2="200" stroke="black" stroke-width="4px" /> </svg>
5、多边形和折线 – <polygon>和<polyline>
在SVG中使用多边形标签<polygon>和折线标签<polyline>绘制多边形和折线。<polygon>标签用于绘制闭合的多边形，而<polyline>标签用于绘制不闭合的折线。两种类型的图形都可以使用points属性定义它们的点，每个点用逗号分隔。
以下是绘制一个黑色三角形和一个红色五边形的代码示例：
<svg> <polygon points="200,10 250,190 160,210" stroke="black" fill="none" /> <polygon points="300,100 250,240 350,240 400,100 325,50" stroke="red" fill="none" /> </svg>
四、SVG transform属性
SVG提供了transform属性，可以在绘制图形时将其移动、旋转、缩放和倾斜。transform属性可以添加到任何SVG元素上，包括<rect>、<circle>、<ellipse>、<line>、<polygon>和<polyline>等。以下是一些常见的transform操作：
1、移动 – translate
使用translate(x,y)函数可以将元素移动到一个新的坐标位置。其中，x和y表示元素在水平和垂直方向上的移动距离，坐标是相对于元素本身的位置。下面的例子演示了将一个圆形沿着x轴向右移动50个单位：
<svg> <circle cx="100" cy="100" r="20" fill="green" transform="translate(50,0)" /> </svg>
2、旋转 – rotate
使用rotate(a,x,y)函数可以使SVG元素绕着一个指定的点旋转一个角度。其中，a表示角度，x和y表示旋转的点的坐标。下面的例子中，将一个矩形绕着左上角旋转45度：
<svg> <rect x="50" y="50" width="100" height="50" fill="blue" transform="rotate(45,50,50)" /> </svg>
3、缩放 – scale
使用scale(x,y)函数可以缩放SVG元素。其中，x和y分别表示水平和垂直方向上的缩放比例。下面的例子中，将一个矩形在水平和垂直方向上同时缩放到原来的两倍：
<svg> <rect x="50" y="50" width="100" height="50" fill="blue" transform="scale(2,2)" /> </svg>
五、SVG滤镜效果
SVG提供了一些滤镜效果，可以通过在元素上添加filter属性来实现。filter属性可以包含各种滤镜效果，例如模糊、锐化、颜色矩阵、亮度调节、高斯模糊等。以下是一些常用的滤镜效果：
1、模糊 – <feGaussianBlur>
使用<feGaussianBlur>标签可以实现模糊效果。该标签包含stdDeviation属性，表示模糊程度，值越大，图像就越模糊。以下是一个例子，给一个圆形添加模糊效果：
<svg>
<defs>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
</defs>
<circle cx="100" cy="100" r="50" fill="red" filter="url(#blur)" />
</svg>
2、颜色矩阵 – <feColorMatrix>
使用<feColorMatrix>标签可以通过矩阵转换改变图像的颜色。该标签包含一个type属性，定义要应用的矩阵类型，值可以是matrix、saturate、hueRotate、luminanceToAlpha。以下是一个例子，将一个圆形变为灰色：
<svg>
<defs>
<filter id="gray">
<feColorMatrix type="matrix" values="0.5 0.5 0.5 0 0
0.5 0.5 0.5 0 0
0.5 0.5 0.5 0 0
0 0 0 1 0" />
</filter>
</defs>
<circle cx="100" cy="100" r="50" fill="red" filter="url(#gray)" />
</svg>
3、高斯模糊 – <feGaussianBlur>
使用<feGaussianBlur>标签可以实现高斯模糊效果。与模糊效果类似，不同之处在于高斯模糊效果在模糊时允许保留一些图像的细节。以下是一个例子，给一个矩形添加高斯模糊效果：
<svg>
<defs>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
</defs>
<rect x="50" y="50" width="100" height="50" fill="blue" filter="url(#blur)" />
</svg>
总结
SVG标签是一种用于描述二维矢量图的XML标记语言，支持多种图形效果和过渡效果。SVG提供了丰富的基本形状、transform属性和滤镜效果等，使得开发人员可以轻松创建具有各种效果的静态或动态图形。使用SVG标签时需要注意语法规则和命名空间，同时也需要在各种浏览器上进行测试和优化。