svg简介
svg就是一个小型的被分解的canvas，它可以画线段、圆形、椭圆、方形、图片等等，还有制作动画，每个功能被单独以标签形式应用在模板上。
标签结构
<svg>
需要展示的原素标签：线段、图形、图片......
</svg>
图片转化工具
因为我们本次主要介绍图片的转化，所以其他元素的svg制作方式暂时不做介绍，大家有兴趣可以去查相关文档。
有很多转化工具可以直接进行图片转化格式，下边推荐一个线上转化地址：
http://www.bejson.com/convert/image_to_svg/
图片转化的后的格式如下：
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="82px" height="34px" viewBox="0 0 82 34" enable-background="new 0 0 82 34" xml:space="preserve">
<image width="82" height="34" x="0" y="0" href="xxx" />
</svg>
因为展示的是图片，所以在svg标签里边是image标签，当然这个image标签也是svg里的专属标签。下边是它的属性介绍：
x="图像的左上角的x轴坐标"
y="图像的左上角的y轴坐标"
width="图像的宽度". 必须.
height="图像的高度". 必须.
xlink:href="图像的路径". 必须.
注：
1.在上边推荐的在线转化工具转化后的image标签的href地址，是把图片转成base64格式的。如果嫌他长的话，可以引用你线上图片的地址。
2.也可以有设计同事帮你转一个svg格式的图片，你直接拿过来使用。
展示相关的两个重要属性：viewport和viewbox
如果svg内没有转化工具自动生成的属性，如viewBox，那么它的样式会乱掉，图片也无法正常显示，这是什么原因呐，来了解下这些属性的作用。
先来了解这两个名词：viewport、viewbox
参考链接：
-
viewport
viewport是指svg的可见区域大小，如果把svg理解成一个画布或一个屏幕，viewport即画布的大小或一个屏幕可视区域的大小。它就是svg标签设置的width和height，可以写在标签内部，也可以通过css去控制。css文件内的svg样式优先级大于标签内部的宽高属性。
标签内部写法
<svg version="1.1" width="82px" height="34px" >
</svg>
css写法
svg{
height: .34rem;
width: .82rem;
}
这里插一个注释：
svg的css单位默认是px，同时适用常见的所有单位，除了我们常用的rem外，还有下边这些单位：
svg支持的css单位
-
viewbox
viewbox顾名思义，视图框。它是svg展示的一个重点。
viewbox是svg标签的属性，它的值包括：x，y，width，height。前边两个值是坐标，后边是宽高。
<svg x="0px" y="0px" width="82px" height="34px" viewBox="0 0 82 34" >
<image width="82" height="34" x="0" y="0" href="xxx" />
</svg>
首先，前边我们说到svg设置的width/height(viewport)，只是可视区域大小，和svg实际大小无关。svg的实际大小是内容区域占据的空间。那么svg的内容在可视区域怎样展示，就是由viewbox这四个值来决定的。
x、y是开始展示区域的起始坐标，width、height是展示区域的宽高。
简单理解，就是在起始坐标(x/y)位置开始截图，截取指定宽高(width/height)的区域在视图框(viewport)全屏展示。
所以，viewbox决定了svg的画布展示的内容，截什么，就展示什么。
最后总结：
经过研究发现，svg图片不能根据内部字体数量变化自动调整宽度。但是svg图片在缩放时，结构可以保持稳定不变，这个特性可以解决不同机型图导致标样式结构不稳定的问题。
如果有icon图标需要根据字体数量进行宽度自适应的需求，推荐以下解决方案：
1，通过和UI同学沟通，根据icon内文字数量不同，选出n个字数范围，每个范围对应一个固定宽度的图标
2，将这n个范围对应的图标转化成svg图片；
3，根据icon内部文字数量，通过js判断展示该范围对应的svg图片。
以上方案可以实现以下两个需求：
1，icon图标在不同机型展示，结构可以保持稳定不变；
2，icon图标内文字的数量在一定范围内变动时，图标的宽度也能跟着改变。
网友评论