Question

我正在使用所有新的好东西在HTML 5 / CSS 3中构建动态导航菜单。一些菜单节点将有一个svg图标，有些则没有。在某些视图中，菜单级别的呈现方式会有所不同，具体取决于用户授权级别等。

所以我的问题是：存储这些图标的最佳方法是什么？由于我连接到导航节点的每个图标，是否适合在数据库中存储SVG图标的xml？有没有人有任何好的建议？

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

最好的问候

//ķ

Answer 1

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

此外，您应该研究在一个文件中编写位图图标的一些做法。类似于将所有SVG放在一个大文件中，并使用像in this tutorial这样的背景定位做技巧。我没有尝试使用SVG，但是通过一些更改，例如背景大小调整，这种方法应该可以为你做好。保持紧张。

Answer 2

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

它们将由客户端缓存，如果需要更改，可以更轻松地更改文件。

Answer 3

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

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

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

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