HTML5之SVG的使用

一、什么是SVG？

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)；
SVG 用于定义用于网络的基于矢量的图形；
SVG 使用 XML 格式定义图形；
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失；
SVG 是万维网联盟的标准；

二、SVG的优点

SVG 可被非常多的工具读取和修改（比如记事本）
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
SVG 可以与 Java 技术一起运行
SVG 是开放的标准
SVG 文件是纯粹的 XML

SVG 使用在 HTML 页面中

<svg aria-hidden="true" style="position: absolute; width: 0px; height: 0px; overflow: hidden;">
      <symbol id="icon-shouye" viewBox="0 0 1024 1024"><path d="M947.428555 427.315272 570.384223 129.316228c-32.457226-25.702382-83.383082-25.670659-115.812679 0L77.559958 427.315272c-12.878309 10.205433-15.080463 28.915563-4.907777 41.793872 10.172687 12.882402 28.470425 15.084557 41.35385 4.912893l11.747555-9.641591 0 360.324532c0 51.077306 53.819766 89.24458 101.145631 89.24458l594.983993 0c46.768163 0 77.350692-35.875069 77.350692-89.24458L899.233903 465.778282l10.857279 8.243755c5.475711 4.312212 12.19781 6.395664 18.652825 6.395664 8.774851 0 17.581424-3.867074 23.440875-11.308557C962.390315 456.230835 960.338586 437.520705 947.428555 427.315272L947.428555 427.315272zM482.742141 854.450443 482.742141 689.523159c0-8.208962 14.875802-12.313443 29.751604-12.313443 14.875802 0 29.750581 4.104481 29.750581 12.313443l0 164.928307L482.742141 854.451466 482.742141 854.450443zM839.735811 824.703955c0 19.723204-5.447059 29.746488-17.8526 29.746488L602.335936 854.450443c0-0.445138-0.594541-0.801249-0.594541-1.246387L601.741395 689.523159c0-34.597983-27.903513-71.845305-89.24765-71.845305-61.341067 0-89.248673 37.247322-89.248673 71.845305L423.245072 853.205079c0 0.445138 0.804319 0.801249 0.804319 1.246387l-197.150172 0c-18.650779 0-41.648562-16.123212-41.648562-29.746488l0-407.357731 305.794591-241.351883c10.975982-8.688893 30.789237-8.688893 41.797965 0l306.892599 242.74972L839.735811 824.703955 839.735811 824.703955zM839.735811 824.703955"></path></symbol>
</svg>

@ cc