Best Practise for storing svg icons?

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 de开发者_JS百科pending 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

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.

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:

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

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.