7
关于前端使用 SVG 图标的问题
source link: https://www.v2ex.com/t/824261
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
本人 UI 设计师，想问一下用 background-image 里直接引用一个 svg 图标的链接，和把 svg 图标放在 HTML 里渲染有什么区别？找了几个大厂的网页发现都是采用后者的模式。
13 条回复 • 2021-12-24 20:11:25 +08:00
yaphets666 3 小时 29 分钟前
其实设计师不用考虑这些问题.主要是程序上的问题.比如维护这个 url 的字符串.我不希望他出现在 css 里.而且用 bg 和用 svg 都得一个标签.没必要去用 bg
1
VictorFrank1 3 小时 16 分钟前
@yaphets666 我感觉稍微了解一下才能更好的跟前端同学打交道，目前项目的图标到色号都比较混乱，想整体重构一下
@MissSixty 准备让前端同学用个 2 倍 png 切图了，好像 svg 不能很好的支持渐变色
@MissSixty 准备让前端同学用个 2 倍 png 切图了，好像 svg 不能很好的支持渐变色
FFFFourwood 2 小时 40 分钟前
我个人的看法：
1 ，在写一些自适应页面时候，比如一个页面 一套代码， 兼容 小到 iphone5 大到 5k 8k 的超大屏，，直接写在 src 或者直接用<svg></svg>，可以很轻松的做到自适应调整图片的大小或者一些奇奇怪怪的动画
2 ，src 或者<svg> 直接写 后期好维护，直接替换就行了，，不至于还要改 css 文件
3 ，只有涉及到雪碧图之类的 用 background 方式 比较方便，一次加载，节省资源
1 ，在写一些自适应页面时候，比如一个页面 一套代码， 兼容 小到 iphone5 大到 5k 8k 的超大屏，，直接写在 src 或者直接用<svg></svg>，可以很轻松的做到自适应调整图片的大小或者一些奇奇怪怪的动画
2 ，src 或者<svg> 直接写 后期好维护，直接替换就行了，，不至于还要改 css 文件
3 ，只有涉及到雪碧图之类的 用 background 方式 比较方便，一次加载，节省资源
thinkershare 2 小时 10 分钟前
HTTP2 后面应该就不需要考虑这些破事了, 反正链接可以多路复用, 现在为了加速加载实际, 会使用一些类似 css sprite 这样的技巧, 尽量在一个 HTTP 请求里面加载好资源, 可以节省服务器资源
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK