gpt4 book ai didi

html - 将 svg 图标实现到 web 中

转载 作者:行者123 更新时间:2023-11-28 17:25:40 24 4
gpt4 key购买 nike

我正在寻找如何将 .svg 图标实现到网络中的最佳解决方案。

基本上,我只需要实现几个图标,即我的 .psd 中的图标,所以我可以选择任何格式,但最好有矢量,所以我选择了 .svg。

只是,问题是我需要更改该图片的颜色,而且我需要确保所有主要浏览器(包括 IE)都支持它。

目前,我使用的标签 效果很好,但我不确定浏览器是否支持,而且我不能简单地更改颜色。

你会如何解决这种情况?

.svg 图标非常小和简单,我也想过将它们转换成字体或图标,但不确定如何正确地进行最佳工作流程。

此外,我正在考虑使用 .png,但在更改颜色方面存在问题,当然还有“可扩展性”问题,但如果我找不到任何东西,我可能会以这种方式结束......

我个人喜欢使用字体(比如 font awesome 等等......),因为它们可以缩放,可以着色......并且可以随处显示

是否可以将这些图标从 .psd 转换并添加到接近字体的格式?

感谢您的回答:)

最佳答案

http://caniuse.com/ 检查浏览器对实现 SVG 的各种方式的支持。

常见的工作流程:

  • 使用 Gulp
  • 自动将 .svg 文件处理成可在 CSS 中使用的图标字体
  • 使用服务器中间件自动将 .SVG 内容作为数据 URI 插入到 HTML 中
  • 将所有 SVG 图标内嵌到页面中并作为 SVG 符号引用
  • 将所有图标作为单独的符号插入到一个 SVG 文档中,并使用 svg 'use' 单独引用 - https://css-tricks.com/svg-use-with-external-reference-take-2/

关于html - 将 svg 图标实现到 web 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40241696/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com