Как импортировать svg в html

Как подключить svg спрайт в файл в html и css

Как правило решение проблем с отображением иконок из спрайта можно разделить на три части:

1. Код иконок и спрайта, — так как вы их не включили в вопрос, трудно сказать что-то определенное. Надеюсь вы добавите коды хотя-бы одной иконки и части спрайта.
2. Подключение файла спрайта.
3. Подключение внешней таблицы стилей и стилизация самих иконок.

Подключение файла спрайта

При подключении файла спрайта через тег и background-image внешняя таблица стилей не будет работать, поэтому лучше подключать через тег

Сам файл спрайта необходимо разместить в одной папке с Index file особенно браузер Chrome чувствителен к этому. При вызове отдельной иконки из файла спрайта добавьте еще namespace SVG и внутреннюю таблицу стилей svg

Может это излишне для некоторых браузеров, но вы же наверное хотите кроссбраузерное решение.

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

Подключение внешней таблицы стилей

В шапке файла спрайта необходимо добавить путь до внешней таблицы стилей

Можно сделать специально для svg внешний файл стилей Svgstyle.css и разместить его в той же папке, что и index файл и затем подключить его к главной таблице стилей.

UPD 19.05.2017

Подключение с помощью background-image

.wrapperSvgImage < background-image: url(http://s.cdpn.io/3/kiwi.svg); width: 100px; height: 82px; background-size: cover; border: 1px solid green; >

Используем SVG на сайте

Оставим за скобками вопрос о целесообразности использования SVG на сайте. Каждый сам для себя должен определить полезность этой технологии. Тем более что эта тема поднималась уже неоднократно.

Сейчас мы рассмотрим методы встраивания SVG, их плюсы и минусы, а так же возможности манипулирования элементами SVG.

Статья рассчитана в первую очередь на тех, кто до сих пор не использует векторную графику на своих сайтах, но очень хочет быть одной ногой в будущем настоящем.
Для любопытных сразу приведу сводную таблицу:

Иконочный шрифт	IMG, background-image	Object	Inline
CSS Манипуляции	Частично 1	Нет	Частично 2	Да
JS манипуляции	Частично 1	Нет	Да	Да
SVG анимации	Нет	Да	Да	Да
Интерактивные SVG анимации	Нет	Нет	Да	Да

1 Можно менять цвет, размер, выравнивание и прочее стили обычного текста
2 Стили должны быть прописаны или в самом SVG файле, или подключены внешним стилем в SVG в начале файла:

По правде говоря стили прописанные внутри SVG так же будут работать и при использовании тега IMG или background-image, но в этом нет никакого смысла.

Иконочный шрифт

Пример на codepen.io

• http://fontello.com
• https://icomoon.io/app

Плюсы и минусы такого подхода:
+ иконка ведет себя как символ шрифта, и все параметры настраиваются так же через CSS (размер, цвет, выравнивание и прочее);
+ единственный способ работающий в IE 8 без дополнительных манипуляций;
– все элементы SVG файла объединяются в один символ, поэтому управлять им при помощи CSS или JS можно только как единым целым;
– поддерживаются только одноцветные иконки;
– при сбое загрузки шрифта у пользователя либо не отобразятся иконки совсем, либо, при совпадении кодов иконок с символами юникода, отобразятся соответстующие символы.

SVG как OBJECT

К сожалению (или к счастью) codepen и jsfiddle блокируют загрузку внешних object в целях безопасности.
Встраивание выглядит следующим образом:

 Объект встраивает элмемент атрибута data наподобие iframe, добавляя внутрь себя разметку подключаемого файла, поэтому к элементам можно обращаться при помощи JS, но не совсем обычным образом:

var object = document.getElementById("’object’"); //получаем элмент object var svgDocument = object.contentDocument; //получаем svg элемент внутри object var svgElement = svgDocument.getElementById("some_id_in_svg"); //получаем любой элемент внутри svg svgElement.setAttribute("fill", "black"); //меняем атрибуты выбранного элемента 

Стоит отметить что в CSS стили для SVG элементов отличаются от стандартных, полный список стилей поддерживаемых SVG можно посмотреть тут.
SVG ведет себя не как обычное изображение, его нельзя непропорционально трансформировать, задавая ширину и высоту. Объект внутри будет занимать максимальную площадь и центрироваться в контейнере:

Но объект можно трансформировать используя CSS например так:

transform: scale(2, 1); 

IE 8 и ниже не поддерживают SVG от слова «совсем» поэтому, если среди пользователей вашего сайта есть эта специфичная аудитория стоит озаботиться проверкой и заменой svg на растровое изображение. Сделать это можно множеством способов, например используя Modernizr добавлять .no-svg класс для body:

if (!Modernizr.svg)

.no-svg .icon

Плюсы и минусы такого подхода:
+ можно использовать внешний CSS файл для управления стилями;
+ поддерживаются SVG анимации и фильтры;
+ поддерживаются интерактивные анимации;
– для IE 8 и ниже необходима замена на растровое изображение.

SVG в IMG или background-image

Пример на codepen.io

Оба способа встраивания чем-то похожи на встраивание при помощи тэга object, например нельзя менять пропорции изменением ширины и высоты контейнера, но имеют больше ограничений.
Подключаемые в SVG внешние стили не будут работать, обратиться к элементам через JS так же не получится. Интерактивные анимации в SVG тоже не сработают. А проблемы с IE 8 и ниже так же остаются.
Но SVG анимации будут работать, в обоих случаях.
В случае с IMG втраивание выглядит как обычная картинка:

В случае с background-image как обычный блок:

.icon

Так же при помощи background-image можно использовать спрайты, как с png изображениями, а менять размер можно при помощи background-size:

background-size: 90px 150px; 

Учитывая что процент людей c экранами device-pixel-ratio которых выше 1 и их устройства не поддерживают svg стремится к нулю(если такие вообще есть), то можно использовать медиа выражения для подключения svg, только для них, а для остальных использовать png версию:

.icon < background-image: url("icon.png"); >@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) < .icon < background-image: url("icon.svg"); >> 

Плюсы и минусы этих подходов:
+ поддерживаются SVG анимации и фильтры;
+ в случае с background-image можно использовать SVG спрайты;
– нельзя менять свойства элементов SVG через CSS или JS;
– не поддерживаются интерактивные анимации;
– для IE 8 и ниже необходима замена на растровое изображение.

Inline SVG

Пример на codepen.io

В этом варианте SVG код, получить который можно открыв любой SVG файл текстовым документом, встраивается непосредственно в код страницы.
Несомненно такая конструкция ухудшает читаемость кода, и увеличивает его объем, но открываются новые возможности.

Например имея набор иконок в SVG файле, можно использовать их повторно простой конструкцией вида:

где some_svg_element_id id элемента внутри исходного SVG файла.

К отдельно взятому элементу можно, например, применять SVG трансформации:

Но если внутри исходного SVG к элементу была применена интерактивная анимация, например по клику, как в демо выше, то при дублировании объекта анимация будет срабатывать на всех элементах одновременно.
SVG анимации и фильтры это тема для отдельной статьи, поэтому ограничусь лишь примером SVG фильтра (подробнее о SVG фильтрах), и примером SVG анимации (подробнее о SVG анимациях).
С обесепечением работоспособности для IE 8 и ниже все несколько сложнее, чем в других вариантах. Необходимо добавить дополнительную разметку:

if (!Modernizr.svg)

.no-svg .my-svg-alternate

Плюсы и минусы этого подхода:
+ никакой подгрузки внешних файлов;
+ доступны манипуляции с элементами SVG через CSS и JS;
+ поддерживаются SVG анимации и фильтры;
+ поддерживаются интерактивные анимации;
+ возможность повторного использования элементов;
– загрязняется код страницы;
– для IE 8 и ниже необходима дополнительная разметка, и замена на растровое изображение.

Заключение

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

Еще один способ использовать SVG в React. На этот раз удобный

SVG -изображения можно вставлять непосредственно в html код, можно использовать символьные спрайты, теги , и даже . Можно подключать SVG через data-url , css-backgrounds , css-filters и еще множеством способов. Но чтобы полноценно использовать всю суперсилу SVG , необходимо вставлять SVG -изображения непосредственно в html -разметку. Хотя на самом деле есть еще один способ. И он удобный.

Суперсила SVG

Одна из самых сильных сторон технологии SVG — возможность манипулировать стилями изображений через css . Это особенно важно для иконок, которые обязательно захочется подсветить на hover без использования дополнительных изображений.

Чтобы иметь возможность перекрашивать SVG через css , необходимо либо вставить SVG непосредственно в html , то есть «заинлайнить» их, либо использовать отдельный файл, символьный спрайт. Спрайт также должен быть вставлен в DOM. Ни одна другая техника не позволяет получить доступ к SVG из css . Рассмотрим эти техники подробнее.

Инлайнинг

Вставка SVG непосредственно в html это одновременно и самая простая и самая мощная с точки зрения кастомизации и манипуляции изображением техника.

Такое изображение можно стилизовать через css, менять практически любое свойство и атрибут, даже анимировать его отдельные части. Но здесь есть ряд существенных ограничений:

1. Если изображение большое, вся страница будет загружаться дольше
2. Использование этой техники в js-фреймворках, даже с такими крайне мощными инструментами, как SVGR, сильно увеличивает размер js-бандла.
3. Теряется контроль над загрузкой SVG , они перестают быть внешними изображениями. Вы не можете отдельно их хранить и кешировать, пренебречь их загрузкой на плохих соединениях и т.д.

Спрайт символов

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

А если вы, как и Microsoft, не поддерживаете IE11, спрайт символов можно загружать по HTTP.

К сожаление, использовать такой подход напрямую, то есть загрузить по HTTP содержимое отдельного SVG -изображения не получится, нужен именно спрайт. Вот так работать не будет:

К изображениям, подключенным через спрайт, можно получить доступ через css , правда, есть ограничения. Стилям не «пробиться» через shadow-boundary, границу, за которой начинается shadow-DOM и которая описывается тегом .

Хорошие новости в том, что каскад продолжает работать, можно менять атрибуты fill и использовать currentColor в любом свойстве. Для большинства кейсов с иконками этого более чем достаточно:

     .icon 

Спрайты удобны, но у них немало своих проблем, главная из которых — они плохо расширяемы. В конечном итоге спрайты разрастаются до огромных размеров и целиком подключаются на страницы ради использования одной-двух иконок.

Компромисс

Здесь не обойтись без компромисса. Нужно решение, которое загрузит на страницу только необходимые SVG -изображения, не будет рендерить их через javascript и позволит стилизовать их через css .

Таким решением может быть браузерный fetch ! Нам нужен инструмент, который

1. Загрузит SVG -изображения в браузере через fetch и закеширует их
2. Добавит их в символьный спрайт
3. Предоставит API для использования загруженных изображений в произвольном участке страницы через тег .

Первым о таком решении задумался Chris Coyier еще в 2015 году, но оно так и не было оформлено и ждало своего дня. Сегодня этот день настал.

Handy SVG

Реализация называется Handy SVG, исходники и документация доступны на github, пакет публикуется в npm . Вам достаточно установить его:

npm i handy-svg

И использовать в React :

import from 'handy-svg'; import iconSrc from './icon.svg'; export const Icon = () => ( className="icon" width="32" height="32" /> );

Или в любом другом проекте с ванильным javascript:

import from 'handy-svg/lib/injector'; const src = "https://cdn-server.net/icon.svg"; // Загружает изображения и добавляет их в спрайт injector.load(src); // Доступ к id изображения const Использование const svg = ``;

Никаких проблем со стилизацией не возникнет:

.icon

На страницу будут загружаться только необходимые изображения, вы сможете их закешировать, а в SPA-приложениях запросы конечно же не будут отправляться дважды. Ваш спрайт не будет разрастаться и вы вообще не будете задумываться о его существовании.

Конечно это решение имеет ряд ограничений. Например, почти невозможно избавиться от FONI (Flash of No Icons), состояния загрузки, при котором на странице отсутствуют иконки. Тем не менее, из всех возможных способов работы с SVG -изображениями в вебе, этот представляется наиболее удобным.

Пул-реквесты приветствуются и я буду рад любому фидбеку.

Множественный импорт SVG файлов

Вводная по задаче:
Есть около 100 SVG файлов. Требуется расположить в виде таблички эти SVG-изображения. При клике на карточку с изображением, нужно поменять цвет заливки этого SVG изображения. Список названий всех SVG-файлов подтягивается через get-запрос.

Основной вопрос: как сделать автоматический импорт большого количества SVG файлов с сохранением всего функционала работы с SVG-изображениеим.

У меня получилось сделать через тэг в формате

1 2 3 4 5

const list = arr.map(item => { return ( img src={`${item}.svg`}> ) })

Но такой формат не даёт возможность динамического изменения параметров SVG.

Всем заранее спасибо

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Graphviz — импорт графов в SVG
Использую Graphviz для Windows и все хорошо, но не могу получить png или svg файл. Как.

Импорт кривых SVG код (Видео)
Может кому пригодится. Как то я показывал как сделать креативные кнопки на свой вкус, и там у.

Импорт в FontLab svg -файла (можно ли и как?)
Скачал svg-файл с иконкой на сайте шрифтов. А в Fontlab’е есть у меня самопальный шрифт с.

QFileDialog множественный выбор файлов
Я хотел сделать множественный выбор файлов и загнать их пути в список. Но файловый диалог.

Импорт офисных файлов в таблицы Access через VBA (БД почтовых файлов)
помогите пожалуйста как работать с файлам в Access. основные поля и форму сделал, таблицу тоже.