大家好，欢迎来到IT知识分享网。
转载请注明来源：Web前端(W3Cways.com) – Web前端学习之路 » 阿里UX矢量图标库–最强大的矢量图标库（Icon font制作力荐工具）
使用SVG来代替Web Iconfont(图形字体化)
- 浏览器将其视为文字进行抗锯齿优化，有时得到的效果并没有想象中那么锐利。 尤其是在不同系统下对文字进行抗锯齿的算法不同，可能会导致显示效果不同。
- Icon Font 作为一种字体，Icon 显示的大小和位置可能要受到
font-size、line-height、word-spacing等等 CSS 属性的影响。 Icon 所在容器的 CSS 样式可能对 Icon 的位置产生影响，调整起来很不方便。 - 使用上存在不便。首先，加载一个包含数百图标的 Icon Font，却只使用其中几个图标，非常浪费加载时间。 如果是自己制作 Icon Font 以及把多个 Icon Font 中用到的图标整合成一个 Font 也非常不方便。当然使用阿里UX矢量图标库可以解决这个问题
- 为了实现最大程度的浏览器支持，可能要提供至少四种不同类型的字体文件。包括TTF、WOFF、EOT 以及一个使用 SVG 格式定义的字体。如果是自己制作的话，可能要头疼死
SVG优势
- SVG是矢量图形文件，可以随意改变大小，而不影响图标质量。
- 可以用CSS样式来自由定义图标颜色，比如颜色/尺寸等效果。
- 所有的SVG可以全部在一个文件中，节省HTTP请求 。
- 使用SMIL、CSS或者是javascript可以制作充满灵性的交互动画效果。
由于SVG也是一种XML节点的文件，所以可以使用gzip的方式把文件压缩到很小。
开发者们想出了多种使用 SVG 的技巧来解决/缓解上述问题，下面我们来逐个盘点目前常见的使用方法。
img/object 标签
Inline SVG
Data URIs
Data URIs 是一种不怎么常见的技巧。之前我们在 CSS 里定义元素的背景图片时，常使用像下面这种方式
.icon { backgound-image: url(icons/a.png) /* ... */ }
而现在，url当中可以放置的可以不仅仅是指向资源的 URL 链接，而可以是数据本身。使用 Data URIs，无论是图片还是 SVG， 你都可以将其编码为 base64 并直接写入 CSS。譬如
.icon{ background: url(data:text/svg+xml;base64,<base64 encoded data>) }
使用这种方法的缺点是不能方便地使用 CSS 修改 Icon 的颜色和边线属性。
SVG Sprite
在 Icon Font 还没普及、图标还主要依靠位图显示的时候，前端工程师都会使用 Sprite 来减少图片请求的次数。 其原理很简单：将所有的图标以一定的间隔排列起来组成一整张大图片，使用时对于某个 Icon，编写如下所示的 CSS。
.icon-a { background-image: url(/path/to/pic/contains/all/icons.png); background-position: 0 120px !important; width: 24px; height: 24px; }
上述 CSS 通过设定background-position调整大图片在背景中的位移，只将某个单个 Icon 暴露出来，其他部分都切掉。 对于所有的 Icon 都写成这样的 CSS 即可使用了。基础的 SVG Sprite 其实只是将原来的位图改成了 SVG。
SVG Defs/Symbols
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <symbol id="circle-cross" viewBox="0 0 32 32"> <title>circle-cross icon</title> <path d="M16 1.333q2.99 0 5.703 1.161t4.677 3.125 3.125 4.677 1.161 5.703-1.161 5.703-3.125 4.677-4.677 3.125-5.703 1.161-5.703-1.161-4.677-3.125-3.125-4.677-1.161-5.703 1.161-5.703 3.125-4.677 4.677-3.125 5.703-1.161zm0 2.667q-2.438 0-4.661.953t-3.828 2.557-2.557 3.828-.953 4.661.953 4.661 2.557 3.828 3.828 2.557 4.661.953 4.661-.953 3.828-2.557 2.557-3.828.953-4.661-.953-4.661-2.557-3.828-3.828-2.557-4.661-.953zm3.771 6.885q.552 0 .948.391t.396.943-.396.948l-2.833 2.833 2.833 2.823q.396.396.396.938 0 .552-.396.943t-.948.391-.938-.385l-2.833-2.823-2.823 2.823q-.385.385-.948.385-.552 0-.943-.385t-.391-.938q0-.563.385-.948l2.833-2.823-2.833-2.833q-.385-.385-.385-.938t.391-.948.943-.396.948.396l2.823 2.833 2.833-2.833q.396-.396.938-.396z"/> </symbol> <symbol id="circle-check" viewBox="0 0 32 32"> <title>circle-check icon</title> <path d="M16 1.333q2.99 0 5.703 1.161t4.677 3.125 3.125 4.677 1.161 5.703-1.161 5.703-3.125 4.677-4.677 3.125-5.703 1.161-5.703-1.161-4.677-3.125-3.125-4.677-1.161-5.703 1.161-5.703 3.125-4.677 4.677-3.125 5.703-1.161zm0 2.667q-2.438 0-4.661.953t-3.828 2.557-2.557 3.828-.953 4.661.953 4.661 2.557 3.828 3.828 2.557 4.661.953 4.661-.953 3.828-2.557 2.557-3.828.953-4.661-.953-4.661-2.557-3.828-3.828-2.557-4.661-.953zm4.49 7.99q.552 0 .943.391t.391.943-.396.948l-5.656 5.656q-.385.385-.938.385-.563 0-.948-.385l-2.833-2.823q-.385-.385-.385-.948 0-.552.391-.943t.943-.391.948.396l1.885 1.885 4.708-4.719q.396-.396.948-.396z"/> </symbol> <!-- .... --> </svg>
<svg class="icon"> <use xlink:href="#circle-cross"></use> </svg>
这里的use标签直接使用#circle-cross这个 id 引用了 SVG 中的图标。这种方式的浏览器兼容性较好。
第二种方式，这种方式不需要在 body 开始的地方插入 SVG，而是使用完整路径引用 Icon。
<svg class="icon"> <use xlink:href="/img/posts/svg-icons.svg#circle-check"></use> </svg> <svg class="icon"> <use xlink:href="/img/posts/svg-icons.svg#circle-cross"></use> </svg>
显示出来的效果就是下面这个样子 (可以使用浏览器的 Debug 工具来检视下面的代码)。
这种方式使用上跟img标签没有什么太大的差别了。好处在于所有的图标都在一个文件中，因此只会请求一次。 这种不需要像 Sprite 那样繁琐的设置图片的位移。使用 id 命名图标并使用时直接使用 id 引用既直观又简单。 其灵活性和 Inline SVG 几乎一样——你可以设置颜色、边线样式、大小等等。 视浏览器的不同，有时你需要使用作为 SVG 标签的开始。
<svg xmlns="http://www.w3.org/2000/svg">
对于 IE 则需要使用object标签代替<svg><use>。关于兼容性讨论详见
这篇文章。
原文地址：http://www.w3cways.com/1733.html
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/121550.html
