存储 svg 图标的最佳实践？

Posted 2023-03-06

【中文标题】存储 svg 图标的最佳实践？

【英文标题】：Best Practise for storing svg icons?

【发布时间】：2011-10-17 06:09:49

【问题描述】：

我正在使用 html 5/CSS 3 构建一个动态导航菜单，其中包含所有新的好东西。有些菜单节点会有一个 svg 图标，有些则没有。在某些视图中，菜单级别的呈现方式会根据用户授权级别等而有所不同。

所以我的问题是：存储这些图标的最佳方式是什么？ 由于我连接到导航节点的每个图标，将 SVG 图标的 xml 存储在数据库中是否合适？大家有什么好的推荐吗？

我正在使用 .net MVC3 MSSQL ，但它可能与这个问题无关。

最好的问候

//K

【参考方案1】：

我会将它们存储为单独的文件。

它们将被客户端缓存，以便在需要更改时更轻松地更改文件。

【参考方案2】：

您真的不需要将它们存储在数据库中。在某些情况下，这些请求应该会降低性能并防止浏览器兑现。单独的文件可以更好地完成这项工作。

此外，您应该研究在一个文件中存储位图图标的一些做法。就像将所有 SVG 放在一个大文件中并使用 in this tutorial 之类的背景定位技巧。我没有用 SVG 尝试过，但是通过一些改变，比如背景大小，这个方法应该对你有好处。继续努力。

【参考方案3】：

您可以将所有图标存储在一个文件中。该文件将包含所有 SVG 符号定义。然后，您可以像这样在 HTML 中引用这些符号：

<svg class="icon-home">
  <use xlink:href="symbol-defs.svg#icon-home"></use>
</svg>

您可以在此处了解有关此方法的更多信息：https://css-tricks.com/svg-sprites-use-better-icon-fonts/

使用此方法，您的 SVG 可以被缓存，并且只需要一个 HTTP 请求即可加载。

要使用此方法启动并运行，我推荐IcoMoon app。它允许您导入和选择 SVG 图标并生成这些符号定义文件。