svg使用总结

一、什么是SVG
可缩放矢量图形是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。

基本信息
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)；
SVG 用来定义用于网络的基于矢量的图形；
SVG 使用 XML 格式定义图形；
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失；
SVG 是万维网联盟的标准；
SVG 与诸如 DOM和 XSL 之类的W3C标准是一个整体；

二、HTML页面中嵌入SVG的几种方式

1. 作为图片使用img标签
2. 作为CSS背景图片
   .el {background-image: url(mySVG.svg);}
3. 作为对象用object标签引入
   使用object的一大好处是可以提供浏览器不支持情况下的备选方案。
4. 使用iframe标签
   如果想将SVG代码以及脚本和主页面彻底分离，iframe是个不错的选择。但是这样一来在主页面用 JavaScript操作SVG内容就变得稍微麻烦了，并且还有浏览器的同源策略限制。
5. 使用embed标签
   embed虽然不是HTML规范的一部分，但仍然被广泛支持。它原本是为了支持某些外部插件而存在的，比如 Adobe Flash插件就要依赖这个标签。但是它不能提供浏览器不支持时的备选显示内容。
6. 使用内联svg标签
   <svg version=“1.1” xmlns=“http://www.w3.org/2000/svg” …> 这是目前最常用的方式。使用内联SVG的好处是，可以将CSS样式规则和控制脚本放在当前文档的任何位置，而不是限制在svg 标签中。
   三、SVG工具
   在线工具https://editor.method.ac/#delete

四、SVG的viewBox属性
viewBox的四个参数分别代表：最小X轴数值；最小y轴数值；宽度；高度。
将viewBox属性设置为: 0 0 原始svg的宽 原始svg的高, 再就可以任意修改svg的宽高, 其内容就会自动缩放了