Как вставить SVG иконку на сайт
Существует несколько способов, как вставить SVG иконку. Я не буду перечислять здесь все рабочие варианты, дабы не перегружать вас избыточной информацией. А остановлюсь, на двух принципиальных методах – с интерактивностью (взаимодействие с пользователем) и без неё.
Без поддержки интерактивности
Если вы не планируете, вносить изменения в SVG файл или анимировать его, а просто используете, как законченное изображение, то вставляете, как картинку.
// через HTML файл
С поддержкой интерактивности
Для дальнейших манипуляций с SVG файлом – наилучший способ встраивания иконки – тег object. Внутри тега object, для старых браузеров, вставляем SVG иконку, картинкой. Дело в том, что старые браузеры, не видят формат SVG, так покажем им хоть что-то.
Плюсы SVG формата
- взаимодействует с пользователем
- адаптируется под разные разрешения экрана
- масштабируется без потери качества
- мало весит, значит, быстро загружается
Как правило, SVG формат, применяют для сохранения иконок. Откуда же они берутся? Есть несколько вариантов.
- создать в векторных программах
- скачать бесплатно или купить
Зайдем на сайт flaticon.com и скачаем иконку автомобиля. Скачанный SVG файл, состоит из инструкций по построению прямых и кривых линий, в виде текстовой информации.
Как вставить иконку в HTML
Создадим два блока, для управления позиционированием и размерами иконки, на странице. Внутри блока с классом icon, вставим, ссылку на SVG иконку, посредством тега object.
CSS код
Разместим в центре, родительский блок с классом box.
.box position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
>
Дочерний блок с классом icon, выравниваем по центру, относительно родителя.
Как сделать SVG адаптивным
В коде файла sedan-car-front.svg, жестко заданы размеры, которые не позволят масштабировать икону.
Заменим пиксели на проценты. width=»30%» height=»30%»
Вот и все. Теперь при изменении размера экрана, размеры иконки, так же меняются.
Как изменить цвет SVG
Для изменения цвета, вместо свойства color, используют – атрибут fill. Изменить цвет, можно прямо в коде SVG, добавив, следующий код, между тегами svg.
Машина стала красной.
Создано 02.08.2019 10:54:48
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.
Варианты установки SVG иконки
Есть несколько методов установки SVG иконки на страницу, и у каждого есть свои плюсы и минусы.
У нас есть SVG иконка happyface.svg, которую нужно добавить на страницу.
Установка графическим файлом
Тут все просто, иконка ставится как обычная картинка в нужное место:
Это очень простой и удобный способ, но у нас появляется дополнительный файл. А если таких картинок на странице много, то и определенные неудобства
Установка в HTML
Можно вставить SVG графику непосредственно в нужное место HTML кода:
Установка через CSS
Можно сделать SVG графику фоновым изображением нужного элемента. Для этого переводим SVG код в CSS формат конвертером:
Подробнее об этом конвертере на codepen.io
Размеры блока с бекграундом задаются через CSS, поэтому атрибуты width=’128′ и height=’128′ в SVG коде не нужны Получившийся результат вставляем в CSS нужного нам элемента, например:
background-image : url ( «data:image/svg+xml,%3Csvg role=’img’ xmlns=’http://www.w3.org/2000/svg’ viewBox=’0 0 24 24′ stroke=’%23337AB7′ stroke-width=’2′ stroke-linecap=’square’ stroke-linejoin=’miter’ fill=’none’ color=’%23337AB7’%3E %3Cpath d=’M7.3010863,14.0011479 C8.0734404,15.7578367 9.98813711,17 11.9995889,17 C14.0024928,17 15.913479,15.7546194 16.6925307,14.0055328’/%3E %3Cline stroke-linecap=’round’ x1=’9′ y1=’9′ x2=’9′ y2=’9’/%3E %3Cline stroke-linecap=’round’ x1=’15’ y1=’9′ x2=’15’ y2=’9’/%3E %3Ccircle cx=’12’ cy=’12’ r=’10’/%3E %3C/svg%3E» ) ;
height : 128px ;
width : 128px ;
И далее вставляем нужную нам иконку куда угодно и сколько угодно раз.
Установка через JS
Создаем переменную с кодом нашей иконки и используем его на нужном нам элементе
‘ ; // наша иконка
let svgimg = document . querySelectorAll ( «.happyface» ) ; // находим все элементы с классом happyface
for ( let i = 0 ; i < svgimg . length ; i ++ ) < // проходим циклом по всем элементам
svgimg [ i ] . innerHTML = icon ; // вставляем в них иконку
И далее, как в варианте с CSS, вставляем нужную нам иконку куда угодно и сколько угодно раз.
На jQuery код получается проще:
let icon = ‘. ‘ ; // наша иконка
$ ( «.happyface» ) . html ( icon ) ; // вставляем иконку в элемент с классом happyface
Нравится 25
В закладки
- Опубликовано: 10.09.2019 / Обновлено: 21.02.2020
- Рубрики: Весь сайт, Картинки и иконки
- Метки: SVG, Иконки
- 17404 просмотра
Смотрите также:
Новогоднее украшение для логотипа
Оформления логотипа сайта новогодним элементом на примере лого ВКонтакте
Полезные решения на CSS
Сборник из простых решений на CSS, которые пригодятся при оформлении сайта.
Отложенная загрузка Яндекс карты и виджета ВК
Отложенная загрузка скриптов на примере Яндекс Карты и виджета группы ВКонтакте
SVG иконки на сайте. Как правильно вставлять?
Вопрос по SVG иконкам, а именно: каким образом лучше всего вставлять иконки на страницу?
Я нашёл много способов на крупных сайтах. И все эти способы разные. Я не могу понять в чём преимущества одних перед другими.
Что я нашёл:
— Вставка svg кода в< span>, т.е. код картинки прямо в html документе.
— Вставка сразу в — Такая же вставка через тег . (но ведь специфика.
- Вопрос задан более трёх лет назад
- 989 просмотров
Комментировать
Решения вопроса 1
- Вставка через элемент img — если у вас изображение контентное (содержат важное для пользователя), например логотип.
- Вставка через в качестве background-image: url() — если у вас изображение декоративное (обычные иконки, как у ваших примерах) и никак не изменяется при взаимодействии с пользователем (об этом ниже). Например, для простых иконок к заголовкам разделов можно использовать псевдоэлементы ::after и ::before + background-image c урлом на свгшку. Не засоряет таким образом разметку.
- Вставка через элемент svg прямо в код — если у вас изображение декоративное и нужно будет при каких-то условиях, например, изменить заливку свгшки или цвет обводки с помощью CSS. Например, красная иконка в кнопке при наведении на кнопку становиться белой. Проблема в том, что, чтобы изменить ее цвет через CSS способом с псевдоэлементом мы можем только заменив на другую такую же картинку, но с белым цветом. А можно при наведении сделать так:
button:hover svg
И все — обратиться к этой иконке и залить ее белым цветом. Поэтому, чтобы управлять возможностями свгшек через стили эта SVG должна быть именно в разметке.
Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать
Ответы на вопрос 0
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- JavaScript
- +1 ещё
Как объеденить круговой слайдер(диапозон) с полем ввода и кнопками + и -?
- 1 подписчик
- 2 часа назад
- 21 просмотр
Практическое
руководство
Мы живём в век пикселей. Как дизайнеры и разработчики в вебе, пиксели могут быть нам как друзьями, так и врагами. Мы хотим, чтобы всё выглядело красиво и чётко для всех, кто пользуется нашими сайтами, и нам необходимо уменьшать размеры файлов для улучшения производительности. В общем-то, есть только один способ для иконок, логотипов и иллюстраций — это SVG . Масштабируемая векторная графика (Scalable Vector Graphics) позволяет изображению выглядеть чётко на мониторе с любым разрешением, при этом иметь очень маленький размер файла и легко поддаваться редактированию и изменениям.
Цель этого руководства — дать обзор практического применения SVG -изображений в вебе с некоторыми советами и хитростями, которые помогут получить максимальную отдачу от них.
SVG
Scalable Vector Graphics это разметка, основанная на XML , который содержит двумерные векторы. Векторами могут быть простые геометрические формы, сложные контуры, да и всё то же самое, что можно сделать в Иллюстраторе. Этот формат изображений имеет намного больше общего с веб-страницей, чем тот же JPEG . SVG намного мощнее — им легко можно управлять при помощи кода (в текстовом редакторе или с помощью CSS / JS ).
- не зависит от разрешения
- поддерживается во всех современных браузерах
- актуален в будущем ( W3C стандарт)
- легко создавать и редактировать
- изменяется с помощью CSS & JS
- поддаётся сжатию
Подготовка и оптимизация
Подготовка SVG для использования в вебе это очень простой процесс, не сложнее экспорта JPEG или PNG . Используйте любой привычный для вас графический редактор (Illustrator, Sketch, Inkscape [бесплатен], и тому подобное [или даже Photoshop, если вы используете слои с формами]) с тем размером изображения, который вы планируете использовать. Обычно я работаю в Иллюстраторе, поэтому я объясню некоторые способы подготовки файлов в этой программе, но вообще они применимы и для любой другой программы. Вам, возможно, стоит перевести текст в кривые, поскольку шрифт, скорее всего, будет неправильно отображаться, если, конечно, вы не планируете стилизовать их с помощью веб-шрифта, используемого на странице (что возможно!). Не стоит также превращать все объекты в единые формы, особенно если у вас есть обводка, которой необходимо будет управлять на странице, тем более преобразование объектов зачастую не уменьшает размер файла. Любые имена, присвоенные группам или слоям, будут добавлены к SVG как ID элемента. Это довольно удобно для стилизации, но немного увеличит общий размер файла.
Перед тем как сделать экспорт, необходимо проверить, все ли изображения находятся в целочисленной пиксельной сетке (то есть, например не 23.3px × 86.8px ). В противном случае скорее всего изображению не будет хватать чёткости и часть изображения обрежется. В Иллюстраторе это можно сделать следующим образом: Object > Artboards > Fit to Artwork Bounds . Затем жмём save as и выбираем SVG , и оставляем настройки по умолчанию. Здесь можно сделать небольшую оптимизацию, но на самом деле не стоит, так как далее мы будем применять разные улучшающие приёмы, поэтому сейчас мы не будем тратить впустую время на эти настройки.
Приёмы для уменьшения размеров файла.
(Смотрите ресурсы по оптимизации)
Существует множество статей по оптимизации SVG , предлагающих кладезь знаний в этой теме, но я хочу поделиться парой приёмов, которые считаю наиболее эффективными и полезными. Они не требуют много усилий и могут легко вписаться в рабочий процесс.
Чтобы добиться наименьшего размера SVG , логично будет удалить из него всё лишнее. Наиболее известная и полезная программа (по крайней мере я так думаю) для обработки SVG это SVGO. Она удаляет весь не нужный код. Но! Будьте внимательны используя эту программу, если планируете управлять SVG при помощи CSS / JS , так как она может слишком сильно почистить код, что затруднит дальнейшие изменения. Удобство SVGO ещё и в том, что её можно включить в процесс автоматической сборки проекта, но можно также использовать GUI если хочется.
Разбираясь подробнее с правильным удалением всего ненужного, мы можем сделать ещё кое-что в графическом редакторе. Сперва нужно убедиться, что используется настолько мало контуров/форм, насколько это возможно, так же как и точек на этих контурах. Можно объединять и упрощать всё, что поддаётся упрощению, и удалить все ненужные точки. В Иллюстраторе есть плагин VectorScribe с инструментом Smart Remove Brush Tool , который поможет удалить точки и при этом оставить общую форму той же.
Smart Remove Brush Tool удалил точки
Дальше будем увеличивать изображение. В Иллюстраторе удобно включить просмотр с пиксельной сеткой View > Pixel Preview и проверить, как располагаются контуры. Чтобы разместить контуры по сетке, потребуется немного времени, но эти усилия окупятся и позволят добиться более чёткого рендеринга (лучше обратить на это внимание заранее).
Точки вне сетки
Выравнивание по сетке
Если есть два и более объекта для выравнивания, то стоит удалить все ненужные перекрытия. Иногда даже если контуры тщательно выровнены, может быть видна тонкая белая линия. Чтобы предотвратить такое, можно немного наложить объекты друг на друга в местах перекрытия. Важно: в SVG z-index имеет определённый порядок, который зависит от объекта, находящегося снизу, поэтому стоит поместить верхний объект в нижнюю часть файла в коде.
И, наконец, последнее, но немаловажное, то, о чём обычно забывают — это активировать gzip сжатие SVG на вашем сайте в .htaccess файле.
AddType image/svg+xml svg svgz AddOutputFilterByType DEFLATE "image/svg+xml" \ "text/css" \ "text/html" \ "text/javascript" . etc В качестве примера того, насколько эффективна эта техника, я воспользуюсь оригинальным логотипом Breaking Borders и оптимизирую его таким образом: увеличиваю размер до того, каким он должен быть; приведу в порядок контуры; удалю максимально возможное количество точек; передвину точки на целочисленные пиксели; сдвину все области перекрытий и отправлю это всё в SVGO .
Оригинал: 1,413b
После оптимизации: 409b
В итоге размер файла стал меньше на ~71% (и на ~83% при сжатии)
Дополнение: Rob Sterlini заметил, поскольку «b» повторяется, можно использовать элемент , для повторения, что ещё больше уменьшит размер файла — и был абсолютно прав.
После оптимизации с использованием : 311b
Размер файла стал меньше на ~78%
Если применить эту технику ко всем файлам SVG , это значительно улучшит ваш сайт.
Варианты использования (реализации)
Когда приходит время использовать SVG в вебе, появляется много различных способов, как это сделать. Некоторые из них имеют определённые преимущества в зависимости от того, чего вы хотите добиться, а некоторых стоит и вовсе избегать. Если требуется только базовая настройка, а разрешение и размер файла должны быть небольшими, то можно прописать SVG в img или как background-image в CSS , так же как любой другой формат файла.
Img
Здесь всё делается так же, как с любым изображением в этом формате. Можно даже использовать SVG как элемент . Но помните, что возможности преобразований в этом формате ограничены.
Background-image
Не стоит сохранять этот формат в base64 , это приведёт к блокировке загрузки стилей. Помните, что возможности манипуляций в этом формате ограничены.
.logo
Iframe
Вы можете загрузить SVG как . Это позволит сделать многое, но я не уверен, что это лучший вариант использования, чтобы продвинуться вперёд ¯\_(ツ)_/¯.
Embed
применяется «во внешних приложениях» или «в интерактивном контенте». Вы можете использовать это для SVG , но лучше не стоит.
Object
возможно лучший вариант, если вам нужно изменять SVG , не встраивая его в HTML .
Inline
Встраивание SVG в код не повлияет на HTTP -запрос, но изображение не будет кешироваться в браузере. Это самый простой способ управления, однако поддержка встроенного SVG кода может стать настоящим мучением.
Заключение
Если хочется выжать максимум из SVG , используйте . В качестве альтернативы подходит встроенный SVG, который не повлияет на HTTP -запрос, но не будет кешироваться. Если SVG выступает в роли обычного изображения, то подойдёт или background-image . Можно использовать и , но я не думаю, что это лучшие варианты, и поэтому не буду больше заострять на них внимание.
| Object | Inline | Img | Background-image | |
|---|---|---|---|---|
| CSS -манипуляции | Да | Да | Частично | Частично |
| JS -манипуляции | Да | Да | Нет | Нет |
| SVG -анимация | Да | Да | Да | Да |
| Интерактивная SVG -анимация | Да | Да | Нет | Нет |
Важно: «Частично» означает, что частично работает, но при условии, что в CSS встроены в код SVG . Больше информации об этом в следующей части.
CSS -манипуляции
То, что действительно выгодно отличает SVG , это возможность изменять стили его элементов, используя старый добрый CSS . Скажем, у нас есть оранжевая иконка, и мы хотим, чтобы на некоторых страницах она была синей, и это можно сделать без создания новой синей иконки. Идеально.
Есть два способа изменить стили — во встроенном SVG и через внешнее подключение (например, в списке стилей). Чтобы встроить стили, оберните их в тег и также внутри <![CDATA[ . ]]> . Лучше делать именно так, потому что иногда XML анализаторы могут конфликтовать с определённым символами (например > ). Даже если у вас нет шибко модных символов сейчас, лучше всё равно использовать CDATA , вдруг позже они появятся и всё сломают.
В основном встроенные стили будут работать со всеми реализациями и background-image не поддерживают CSS3 -анимацию, даже если они встроены (подробнее в разделе об анимации). background-image не поддерживает встроенные медиазапросы (подробнее в разделе о медиазапросах).
Встроенные стили
Если хочется использовать внешние стили, с которыми в целом проще работать и поддерживать, то нельзя использовать или background-image . Если вы используете , то стоит добавить сноски к списку стилей, внутри SVG -файла (код прилагаю). Помните: если вы всё это сделаете, SVG не будет знать, к какому родительскому классу он относится (речь об ), поэтому не стоит применять этот способ для стилизации. Встроенные SVG не нуждаются в подобных дополнениях, следовательно и работать с таким методом в этом смысле немного проще.
Внешние стили
// Add to very start of SVG file before // In style.css .firstb < fill: yellow; >.secondb