V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
VictorFrank1
V2EX  ›  程序员

关于前端使用 SVG 图标的问题

  •  
  •   VictorFrank1 · 2021-12-24 16:48:44 +08:00 · 2969 次点击
    这是一个创建于 1099 天前的主题,其中的信息可能已经有所发展或是发生改变。
    本人 UI 设计师,想问一下用 background-image 里直接引用一个 svg 图标的链接,和把 svg 图标放在 HTML 里渲染有什么区别?找了几个大厂的网页发现都是采用后者的模式。
    18 条回复    2021-12-26 22:36:12 +08:00
    bnm965321
        1
    bnm965321  
       2021-12-24 16:52:06 +08:00
    链接需要网络请求后才能渲染,可能会有一段背景是空白的时间
    yaphets666
        2
    yaphets666  
       2021-12-24 16:54:01 +08:00
    其实设计师不用考虑这些问题.主要是程序上的问题.比如维护这个 url 的字符串.我不希望他出现在 css 里.而且用 bg 和用 svg 都得一个标签.没必要去用 bg
    MissSixty
        3
    MissSixty  
       2021-12-24 16:57:06 +08:00   ❤️ 1
    第一种每个 svg 都会请求一个 url ,而第二种前端优化后会让所有 svg 只请求一次
    VictorFrank1
        4
    VictorFrank1  
    OP
       2021-12-24 16:57:57 +08:00
    @bnm965321 刚确实发现了这个问题,图标 hover 时,确实会空白闪一下再变成 hover 状态。
    VictorFrank1
        5
    VictorFrank1  
    OP
       2021-12-24 17:06:42 +08:00
    @yaphets666 我感觉稍微了解一下才能更好的跟前端同学打交道,目前项目的图标到色号都比较混乱,想整体重构一下
    @MissSixty 准备让前端同学用个 2 倍 png 切图了,好像 svg 不能很好的支持渐变色
    demo
        6
    demo  
       2021-12-24 17:10:06 +08:00
    设计师随便设计,前端是有解决方案的,比如用 svg-sprite-loader 直接全部挂到 DOM 里。
    superfatboy
        7
    superfatboy  
       2021-12-24 17:14:00 +08:00
    @MissSixty 不过好多网站都采用内联的 svg 方式,无需额外的请求
    FFFFourwood
        8
    FFFFourwood  
       2021-12-24 17:42:59 +08:00
    我个人的看法:
    1 ,在写一些自适应页面时候,比如一个页面 一套代码, 兼容 小到 iphone5 大到 5k 8k 的超大屏,,直接写在 src 或者直接用<svg></svg>,可以很轻松的做到自适应调整图片的大小或者一些奇奇怪怪的动画
    2 ,src 或者<svg> 直接写 后期好维护,直接替换就行了,,不至于还要改 css 文件
    3 ,只有涉及到雪碧图之类的 用 background 方式 比较方便,一次加载,节省资源
    duduaba
        9
    duduaba  
       2021-12-24 17:45:04 +08:00
    网络慢就看出差异了,但是一般这个可以忽略,有的有技术规范,比如一定数量级减少 http 请求,跟设计没关系。
    renmu123
        10
    renmu123  
       2021-12-24 18:12:00 +08:00 via Android
    要不用 font ,好处多多
    thinkershare
        11
    thinkershare  
       2021-12-24 18:12:49 +08:00
    HTTP2 后面应该就不需要考虑这些破事了, 反正链接可以多路复用, 现在为了加速加载实际, 会使用一些类似 css sprite 这样的技巧, 尽量在一个 HTTP 请求里面加载好资源, 可以节省服务器资源
    VictorFrank1
        12
    VictorFrank1  
    OP
       2021-12-24 18:26:05 +08:00
    @renmu123 用浏览器字体渲染 icon 吗
    kidonng
        13
    kidonng  
       2021-12-24 20:11:25 +08:00
    其实其他格式的图像也能 base64 后直接放 HTML 省请求,只是 SVG 比较适合这种用途罢了。
    SVG 还有 <use> 这种专门用来复用的元素。
    old9
        14
    old9  
       2021-12-24 21:13:46 +08:00
    放在 HTML 里灵活很多,可以用 CSS 控制样式,也可以用 JS 控制内容
    nondanee
        15
    nondanee  
       2021-12-24 23:13:27 +08:00
    其实在 background-image 里用 svg 也可以是内联的,不一定需要网络请求
    做一下 urlencode 就行,可以用这个转换 https://yoksel.github.io/url-encoder/

    svg 内联在 html 的好处楼上大佬已经说的很多了,svg 放在 background-image 中也有些好处

    1. 如果 svg 里定义了 id (比如用了渐变 /遮罩效果),内联在 html 中 id 相同可能会有 bug ,在 background-image 中即使 id 相同也不会相互干扰

    2. 垂直居中问题,如果上下间距和除不尽 2 ,那 html 中内联 svg 就很难居中,放在 background-image 里用 `background-position: center` 保证是居中的
    shenyuzhi
        16
    shenyuzhi  
       2021-12-25 11:55:50 +08:00
    1 前者没有 dom ,性能好,更干净。后者有 dom ,有时候还很多。
    2 前者无法用 css 进一步修改,后者可以用 css 进一步修改(主要是可以改颜色,别的没什么要改的)。
    3 作为背景图片,前者定位很方便,center/cover/contain 就一两行 css 的事情。后者麻烦一点。
    4 前者的缓存由浏览器控制,更方便。后者由开发者自己控制,没处理好可能会抖一下。
    lysS
        17
    lysS  
       2021-12-25 15:15:46 +08:00
    @VictorFrank1 不只是闪一下的问题,新的 http 请求会加大服务器负担,而且如果是 https 的话,光证书的大小都有 1~2KB ,而且还要进行一系列协商啥的,至少 5 个 RTT 以上。所以小文件能放在一起就放在一起,包括 js,css 啥的
    yaphets666
        18
    yaphets666  
       2021-12-26 22:36:12 +08:00
    @VictorFrank1 看你们是什么项目了。偏向中后台或者 B 端的项目,其实没必要优化了,下次做好吧。哪怕调个颜色,前端调个颜色没你想的那么简单,有时候样式是被程序( js )控制的。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2855 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 11:24 · PVG 19:24 · LAX 03:24 · JFK 06:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.