Meilleure pratique pour le stockage des icônes svg?

Question

Je suis en train de créer un menu de navigation dynamique en HTML 5/CSS 3 avec toutes les bonnes nouvelles choses. Certains nœuds de menu auront une icône svg, d'autres non. Dans certaines vues, les niveaux de menu sont rendus différemment en fonction du niveau d'autorisation de l'utilisateur, etc. Donc, ma question est la suivante: Quelle serait la meilleure façon de stocker ces icônes? Étant donné que chaque icône est connectée à un nœud de navigation, est-il approprié de stocker le fichier XML pour l'icône SVG dans la base de données? Est-ce que quelqu'un a de bonnes recommandations?

Je travaille avec .net MVC3 MSSQL, mais ce n'est probablement pas pertinent pour cette question.

meilleures salutations

// K

Answer 1

Vous n'avez vraiment pas besoin de les stocker dans la base de données. Ces demandes devraient réduire un peu les performances et empêcher l'encombrement du navigateur dans certains cas. Les fichiers séparés font le travail mieux.

De plus, vous devriez vous pencher sur certaines pratiques de stroring des icônes bitmap dans un fichier. Quelque chose comme mettre tous les SVG dans un grand fichier et faire des trucs avec le positionnement de fond comme in this tutorial. Je ne l'ai pas essayé avec SVG, mais avec quelques changements comme le dimensionnement de fond cette méthode devrait faire du bon travail pour vous. Gardez tring.

Answer 2

Je les stocker sous forme de fichiers séparés.

Ils seront mis en cache par le client et facilitent la modification des fichiers s'ils doivent être modifiés.

Answer 3

Vous pouvez stocker toutes les icônes dans un seul fichier. Ce fichier contiendrait toutes les définitions de symboles SVG. Ensuite, vous pouvez faire référence à ces symboles dans votre code HTML comme ceci:

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

Vous pouvez en savoir plus sur cette méthode ici: https://css-tricks.com/svg-sprites-use-better-icon-fonts/

En utilisant cette méthode, votre SVG peut être mis en cache, et il aurait besoin d'un seul Demande HTTP à charger.

Pour démarrer et exécuter avec cette méthode, je recommande le IcoMoon app. Il vous permet d'importer et de sélectionner vos icônes SVG et de générer ces fichiers de définition de symbole.