存储 svg 图标的最佳实践?
我正在 HTML 5/CSS 3 中构建一个动态导航菜单,其中包含所有新的好东西。有些菜单节点会有 svg 图标,有些则没有。在某些视图中,菜单级别根据用户授权级别等以不同方式呈现。
所以我的问题是:存储这些图标的最佳方式是什么? 由于每个图标都连接到一个导航节点,因此将 SVG 图标的 xml 存储在数据库中是否合适?有人有什么好的建议吗?
我正在使用 .net MVC3 MSSQL ,但它可能与这个问题无关。
最好的问候
//K
I am building a dynamic navigation menu in HTML 5/CSS 3 with all the new good stuff. Some menu nodes will have an svg icon, some not. In some views the menu levels are rendered differently depending on the user authorization level and so on.
So my question is: What would be the best way to store these icons?
Since each icon i connected to a navigation node, would it be appropriate to store the xml for the SVG icon in the database? Does anyone have any good recommendations?
I'm working with .net MVC3 MSSQL , but it is probably not relevant for this question.
best regards
//K
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
您确实不需要将它们存储在数据库中。这些请求会稍微降低性能并在某些情况下阻止浏览器兑现。单独的文件可以更好地完成工作。
此外,您应该研究一些在一个文件中存储位图图标的做法。例如将所有 SVG 放入一个大文件中,并通过背景定位进行一些技巧,如本教程中的。我没有尝试使用 SVG,但通过一些更改(例如调整背景大小),此方法应该会为您带来不错的效果。继续尝试。
You really don't need to store them in database. These requests should lower the performance a bit and prevent browser cashing in some cases. Separate files do the job better.
Additionally, you should look into some practises of stroring bitmap icons in one file. Something like putting all the SVG's in one largee file and do tricks with background positioning like in this tutorial. I didn't try it with SVG, but with some changes like background sizing this method should do good job for you. Keep tring.
您可以将所有图标存储在一个文件中。该文件将包含所有 SVG 符号定义。然后,您可以在 HTML 中引用这些符号,如下所示:
您可以在此处了解有关此方法的更多信息:https://css-tricks.com/svg-sprites-use-better-icon-fonts/
使用此方法,您的 SVG 可以被缓存,并且只需要一个 HTTP 请求到 加载。
要使用此方法启动并运行,我推荐 IcoMoon 应用。它允许您导入和选择 SVG 图标并生成这些符号定义文件。
You could store all the icons in one file. This file would contain all SVG symbol definitions. Then, you could reference these symbols in your HTML like this:
You can learn more about this method here: https://css-tricks.com/svg-sprites-use-better-icon-fonts/
Using this method, your SVG can be cached, and it would only require one HTTP request to load.
To get up and running with this method, I recommend the IcoMoon app. It lets you import and select your SVG icons and generates those symbol definition files.
我会将它们存储为单独的文件。
它们将由客户端缓存,以便在需要更改时更轻松地更改文件。
I would store them as separate files.
They will be cached by the client and makes it easier to change the files if they need changing.