Варианты установки SVG иконки

Есть несколько методов установки SVG иконки на страницу, и у каждого есть свои плюсы и минусы.

У нас есть SVG иконка happyface.svg, которую нужно добавить на страницу.

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

Тут все просто, иконка ставится как обычная картинка в нужное место:

Это очень простой и удобный способ, но у нас появляется дополнительный файл. А если таких картинок на странице много, то и определенные неудобства

Установка в HTML

Можно вставить SVG графику непосредственно в нужное место HTML кода:

Вариант хороший, но только для одной картинки. Если картинок много, у нас получится масса одинакового кода.

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

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

Подробнее об этом конвертере на codepen.io

Размеры блока с бекграундом задаются через CSS, поэтому атрибуты width='128' и height='128' в SVG коде не нужны

Получившийся результат вставляем в CSS нужного нам элемента, например:

И далее вставляем нужную нам иконку куда угодно и сколько угодно раз.

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

Создаем переменную с кодом нашей иконки и используем его на нужном нам элементе

И далее, как в варианте с CSS, вставляем нужную нам иконку куда угодно и сколько угодно раз.

На jQuery код получается проще:

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Джесси:

    ОГРОМНОЕ СПАСИБО!

    Ответить