• SVG 和字符图标


    制作网站往往需要使用一些图标来提高用户体验,如果我们的是一些扁平化设计的图标,我们可以选择 SVG 或 图标字体来提高用户体验。

    下面对这两种技术进行比较。

    开发难度:

    现在的在线工具非常强大,比如 iconmoon 的生成工具,可以根据自己的意向选择生成内联的 SVG 图标或字体图标。而我们的设计师只需要提供 SVG 格式图标文件。使用方式和 CSS sprites 有些相同。就难易程度来讲两者差不多。

    精致度

    SVG 是最直接的矢量图形了,在任何大小的情况下都能细腻的显示图标,尤其是在 retina 显示屏上,效果绝佳,这是众多开发者选择 SVG 的最主要一个原因。

    字体图标被浏览器看做是字体,虽然和字体一样可以任意放大或是缩小,但会产生很明显的锯齿,这造成了很糟糕的视觉效果。

    视觉效果

    SVG 可以是多颜色的,SVG 的各个部分可以单独分开添加交互的动画效果,比如鼠标划过就打开的信封,或是鼠标点击就转动的手表。

    字体图标是单一的整体,它是单色,添加起交互效果往往是针对整体的放大缩小,变色旋转等等。

    实际使用的表现

    SVG 要比字体图标大得多,现在流行的做法是将其放在页面当中以减少HTTP请求。

    字体图标比较小,而且会缓存在页面当中。它适合在一些比较大的项目中使用,比如我们希望维护一个图标库,这些图标要满足大量不一样的需求。

    兼容性

    SVG 在这点上要逊于字体图标,它并不支持IE8,只能做优雅降级。

    字体图标有着非常良好的兼容性,它兼容到IE6。

    总结

    字体图标稳重,SVG潇洒。

    如果要兼容IE8及以前,使用字体图标保持兼容性。或是在一些项目非常大,图标很多的情况,用字体图标会更容易维护。

    如果只需支持高级浏览器,而网站追求一些创新,高级的视觉及交互效果,这时用SVG会是更好的选择。

    最后链接几个相关在线工具

    阿里icon font字库

    iconmoon 

    Font-Awesome

  • 相关阅读:
    权限管理命令
    常用命令2
    常用命令1
    queue
    poj 3984
    L3-008 喊山 (30 分)
    常州大学新生寒假训练会试 I 合成反应
    dfs 的全排列
    poj 1154
    hdu 1241
  • 原文地址:https://www.cnblogs.com/winderby/p/4366046.html
Copyright © 2020-2023  润新知