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

5566
Установка SGV иконки
Содержание:
  1. Установка SVG в качестве графического файла
  2. Установка SVG графики в HTML
  3. Установка SVG через CSS
  4. Установка SVG через JS

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

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

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

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

моя svg иконка

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

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


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

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



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

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


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


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


Помогла ли вам статья?
Да Нет
345 раз уже помогла
Комментарии: (0)

КАТЕГОРИИ