Лучшая практика для хранения иконок SVG?

Question

Я создаю динамическое навигационное меню в HTML 5 / CSS 3 со всеми новыми полезными вещами.Некоторые узлы меню будут иметь значок SVG, некоторые нет.В некоторых представлениях уровни меню отображаются по-разному в зависимости от уровня авторизации пользователя и т. Д.

Итак, мой вопрос: как лучше всего хранить эти значки?Поскольку каждый значок я подключен к узлу навигации, было бы целесообразно сохранить XML-код для значка SVG в базе данных?У кого-нибудь есть хорошие рекомендации?

Я работаю с .net MVC3 MSSQL, но, вероятно, это не относится к этому вопросу.

наилучшими пожеланиями

// K

Answer 1

Вам действительно не нужно хранить их в базе данных. Эти запросы должны немного снизить производительность и в некоторых случаях предотвратить кеш браузера. Отдельные файлы делают работу лучше.

Кроме того, вы должны изучить некоторые способы хранения растровых значков в одном файле. Что-то вроде помещения всех SVG-файлов в один большой файл и выполнения трюков с позиционированием фона, например , в этом уроке . Я не пробовал это с SVG, но с некоторыми изменениями, такими как изменение размера фона, этот метод должен помочь вам. Продолжай тянуть.

Answer 2

Я бы сохранил их как отдельные файлы.

Они будут кэшироваться клиентом и упростят изменение файлов в случае необходимости их изменения.

Answer 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 .Он позволяет импортировать и выбирать значки SVG и генерирует эти файлы определения символов.