在网页中实现 svg 图标

Question

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

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

只是，问题是我需要改变那张图片的颜色，而且我需要确保它会被所有主流浏览器支持，IE 也是。

目前，我使用的标签

你会如何解决这种情况？

.svg 图标非常小而且简单，我也想过将它们转换为字体或图标，但不确定如何正确执行最佳工作流程。

另外，我正在考虑使用 .pngs，但是在更改颜色时存在问题，当然还有“可缩放性”，但如果我什么都找不到，我可能会以这个结束......

我个人喜欢使用字体（比如 font awesome 等等……），因为它们是可缩放的、可着色的……并且随处可见

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

感谢您的回答:)

Answer 1

在http://caniuse.com/查看浏览器对实现 SVG 的各种方法的支持

常见的工作流程：

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

Answer 2

所以我找到了解决办法

我已经从 .svg 生成了我自己的字体。作为图标，我们很小，我们可以像使用字体一样使用它们。 我用过

http://fontastic.me/

非常易于使用，只需上传您的 .svg，进行一些自定义，例如字体名称、映射并将它们添加到您的页面中。