Установка SGV иконки

В современной разработке веб сайтов не обойтись без установки масштабируемой векторной графики - SVG (Scalable Vector Graphics), и для этого есть несколько способов установки SVG иконки со своими плюсами и минусами.

Для примера возьмем SVG иконку myicon.svg, которую будем добавлять на нашу страницу.

Установка SVG в качестве графического файла

Тут все просто, иконка ставится как обычная картинка в тег img с путем на svg файл, обязательно нужно указать параметры ширины и высоты:

Установка SVG графики в HTML

Вставляем SVG код непосредственно в нужное место HTML, недостаток в том что если картинок много, у нас получится избыточность одинакового кода:

Установка SVG через CSS

Делаем SVG графику фоновым изображением для указанного элемента. Для этого переводим SVG код в CSS формат конвертером:

Установка SVG через JS

Создаем JavaScript переменную со значением кодом иконки, а далее используем ее в нужном элементе:

Далее повторяем выше указанный вариант с CSS, вставляя нужную иконку куда угодно.

Можно JS код сделать на jQuery: