关于SVG图标

[Chaoming-L]

鉴于使用 SVG 图标系统能更好地遵循图形的访问性标准，并渲染出更高质量的图像。加之现代浏览器基本支持SVG,这对于推行SVG是一个很好契机。

iconfont 和 SVG的区别

先看看iconfont, iconfont作为一种字体,字体该有属性它都具备.
比较重要的有两点:

• 继承父元素字体大小,自动缩放
• 自动和文本对齐
  以上两个特点,SVG本身并不具备。

如何使SVG支持自动缩放?

SVG尺寸设置为1em/1em尺寸。SVG将自动根据文本缩放,大小取决于其 font-size 属性。

<svg width='1em' height='1em' />

如何使SVG自动和文本对齐?

给SVG添加一个处理类.svg-align-center

.svg-align-center {
  vertial-align: -0.125em;
}

使svg往下偏移12.5%正好居中.
此做法参考awesomefont 和 Align SVG Icons to Text and Say Goodbye to Font Icons