V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
VictorFrank1
V2EX  ›  程序员

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

  •  
  •   VictorFrank1 · 152 天前 · 2000 次点击
    这是一个创建于 152 天前的主题,其中的信息可能已经有所发展或是发生改变。
    本人 UI 设计师,想问一下用 background-image 里直接引用一个 svg 图标的链接,和把 svg 图标放在 HTML 里渲染有什么区别?找了几个大厂的网页发现都是采用后者的模式。
    18 条回复    2021-12-26 22:36:12 +08:00
    bnm965321
        1
    bnm965321  
       152 天前
    链接需要网络请求后才能渲染,可能会有一段背景是空白的时间
    yaphets666
        2
    yaphets666  
       152 天前
    其实设计师不用考虑这些问题.主要是程序上的问题.比如维护这个 url 的字符串.我不希望他出现在 css 里.而且用 bg 和用 svg 都得一个标签.没必要去用 bg
    MissSixty
        3
    MissSixty  
       152 天前   ❤️ 1
    第一种每个 svg 都会请求一个 url ,而第二种前端优化后会让所有 svg 只请求一次
    VictorFrank1
        4
    VictorFrank1  
    OP
       152 天前
    @bnm965321 刚确实发现了这个问题,图标 hover 时,确实会空白闪一下再变成 hover 状态。
    VictorFrank1
        5
    VictorFrank1  
    OP
       152 天前
    @yaphets666 我感觉稍微了解一下才能更好的跟前端同学打交道,目前项目的图标到色号都比较混乱,想整体重构一下
    @MissSixty 准备让前端同学用个 2 倍 png 切图了,好像 svg 不能很好的支持渐变色
    demo
        6
    demo  
       152 天前
    设计师随便设计,前端是有解决方案的,比如用 svg-sprite-loader 直接全部挂到 DOM 里。
    superfatboy
        7
    superfatboy  
       152 天前
    @MissSixty 不过好多网站都采用内联的 svg 方式,无需额外的请求
    FFFFourwood
        8
    FFFFourwood  
       152 天前
    我个人的看法:
    1 ,在写一些自适应页面时候,比如一个页面 一套代码, 兼容 小到 iphone5 大到 5k 8k 的超大屏,,直接写在 src 或者直接用<svg></svg>,可以很轻松的做到自适应调整图片的大小或者一些奇奇怪怪的动画
    2 ,src 或者<svg> 直接写 后期好维护,直接替换就行了,,不至于还要改 css 文件
    3 ,只有涉及到雪碧图之类的 用 background 方式 比较方便,一次加载,节省资源
    duduaba
        9
    duduaba  
       152 天前
    网络慢就看出差异了,但是一般这个可以忽略,有的有技术规范,比如一定数量级减少 http 请求,跟设计没关系。
    renmu123
        10
    renmu123  
       152 天前 via Android
    要不用 font ,好处多多
    thinkershare
        11
    thinkershare  
       152 天前
    HTTP2 后面应该就不需要考虑这些破事了, 反正链接可以多路复用, 现在为了加速加载实际, 会使用一些类似 css sprite 这样的技巧, 尽量在一个 HTTP 请求里面加载好资源, 可以节省服务器资源
    VictorFrank1
        12
    VictorFrank1  
    OP
       152 天前
    @renmu123 用浏览器字体渲染 icon 吗
    kidonng
        13
    kidonng  
       152 天前
    其实其他格式的图像也能 base64 后直接放 HTML 省请求,只是 SVG 比较适合这种用途罢了。
    SVG 还有 <use> 这种专门用来复用的元素。
    old9
        14
    old9  
       152 天前
    放在 HTML 里灵活很多,可以用 CSS 控制样式,也可以用 JS 控制内容
    nondanee
        15
    nondanee  
       152 天前
    其实在 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  
       152 天前
    1 前者没有 dom ,性能好,更干净。后者有 dom ,有时候还很多。
    2 前者无法用 css 进一步修改,后者可以用 css 进一步修改(主要是可以改颜色,别的没什么要改的)。
    3 作为背景图片,前者定位很方便,center/cover/contain 就一两行 css 的事情。后者麻烦一点。
    4 前者的缓存由浏览器控制,更方便。后者由开发者自己控制,没处理好可能会抖一下。
    lysS
        17
    lysS  
       152 天前
    @VictorFrank1 不只是闪一下的问题,新的 http 请求会加大服务器负担,而且如果是 https 的话,光证书的大小都有 1~2KB ,而且还要进行一系列协商啥的,至少 5 个 RTT 以上。所以小文件能放在一起就放在一起,包括 js,css 啥的
    yaphets666
        18
    yaphets666  
       150 天前
    @VictorFrank1 看你们是什么项目了。偏向中后台或者 B 端的项目,其实没必要优化了,下次做好吧。哪怕调个颜色,前端调个颜色没你想的那么简单,有时候样式是被程序( js )控制的。
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   4010 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 07:51 · PVG 15:51 · LAX 00:51 · JFK 03:51
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.