此文档解决以下问题：
一、SVG的简单使用
二、SVG 实例
三、SVG 参考手册
SVG是可缩放向量图的缩写，它是HTML5画布一个有用的替代技术。通过SVG，可以采用一种大多数现代浏览器都支持的格式创建运行图形。与基于像素的画布不同，SVG是基本向量的。向量是独立于分辨率的，这意味着在重新调整或放大是它们的质量不会减低，而且与栅格化的图形相比，通常它们生成的文件更小。
1.当文件已经被导出为SVG时，可以用基本的<img>标记集成到Web页面
<img src="images/cartLogo.svg" width="400" height="150"/>
2.也可以使用XML文件创建SVG，或者在HTML页面中内嵌SVG。该代码要求使用一个XML命名空间以及特定的语法。这里不需要用JavaScript以编程方式创建图形。
<svg height="200" xmlns="http://www.w3.org/2000/svg"> <circle id="circle1" cx="100" cy="100" r="50" fill="blue" /> </svg>
3.完整代码
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>SVG Example</title> <style> #outerWrapper { width: 800px; margin: 1em auto; } svg { border: 1px solid #000; } </style> </head> <body> <div id="outerWrapper"> <svg height="200" xmlns="http://www.w3.org/2000/svg"> <!--<circle>标记中， cx代表中心x坐标，cy代表中心y坐标，r代表半径，fill代表填充颜色--> <circle id="circle1" cx="100" cy="100" r="50" fill="blue" /> </svg> </div> </body> </html>
4.运行结果
注意：
处理提供与画布一样的核心绘图能力，例如矩形、椭圆、线、多边形、文本和渐变等，SVG还包含很多过滤器，用于提供特殊效果。一些可用的SVG特效包括：
- 混合
- 偏移
- 高斯模糊
- 彩色矩阵
- 组合
- 卷积矩阵
- 漫射照明
- 镜面光
- 平铺
- 烟雾
结合使用SVG过滤器。通过结合混合、偏移和高斯模糊过滤器，为前面的圆形添加阴影。
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>SVG Example - Filters</title> <style> #outerWrapper { width: 800px; margin: 1em auto; } svg { border: 1px solid #000; } </style> </head> <body> <div id="outerWrapper"> <svg height="400" xmlns="http://www.w3.org/2000/svg"> <!--<defs> 和 <filter>的使用https://www.runoob.com/svg/svg-fegaussianblur.html feOffset - 过滤阴影 feColorMatrix - 用于彩色滤光片转换 feGaussianBlur> - 用于创建模糊效果 feBlend - 与图像相结合的滤镜 --> <defs> <filter id="filterDropShadow" x="0" y="0" width="200%" height="200%"> <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" /> <feColorMatrix result="matrixOut" in="offOut" type="matrix" values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" /> <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" /> <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> </filter> </defs> <circle id="circle1" cx="100" cy="100" r="50" fill="blue" filter="url(#filterDropShadow)" /> </svg> </div> </body> </html>
运行结果：