Внедрение SVG в HTML. Стилизация SVG с помощью CSS. Возможности и ограничения. Правда или любим всех

SVG — это новый стандарт для векторных изображений в браузере. Векторные редакторы, такие как Adobe Illustrator, позволяют напрямую сохранить файл в данном формате, а у современных браузеров нет никаких проблем с правильным отображением SVG. Так как SVG графика состоит из разметки, она может быть создана и модифицирована в вашем любимом текстовом редакторе, который вы используете для HTML. Даже есть возможность стилизовать SVG с помощью CSS, но здесь есть несколько тонкостей.

Разделительная линия между HTML и CSS - довольно прямая. HTML отвечает за содержании и структуру, а CSS заботится о внешности проектов. В SVG эта линия размыта. Это главная причина, почему текст и формы в SVG, как правило, контролируется с помощью атрибутов элементов а не CSS:

В этом примере мы нарисовали прямоугольник, который закрашен с помощью fill. Цвет и прочность внешней рамки прямоугольника определяется атрибутами stroke и stroke-width.. Но, прямоугольник можно стилизовать точно также используя CSS:

Однако это не срабатывает для всех атрибутов. Вы не сможете определить позиции и значения для ширины и высоты данным образом. Мы просто будем придерживаться атрибутов y , width и height.

Так же, как и в HTML мы могли бы работать с классами и ID на любом элементе. Таким образом, мы бы задали внешний вид множеству элементов в SVG с помощью стилизованного класса.

.example { fill: red; stroke: green; stroke-width: 2; }

Использование псевдо-классов

Использование псевдо-классов таких как:hover - возможно в SVG , даже в сочетании с CSS3 свойством transition.

.example { fill: red; stroke: green; stroke-width: 2; transition: all 2s ease; } .beispiel:hover { fill: blue; }

Внедрив этот пример, hover элементы несущие example класс, приведет к изменению цвета с красного на синий. Чтобы это работало должным образом, убедитесь, что SVG не вставлен как Img. Лучше выберите Embed или Iframe:

Использование Img поможет отобразить SVG должным образом. Но, hover эффекты и transitions будут игнорироваться. Кроме transition мы могли бы использовать transform, тем самым позваляя элементам масштабироватьсь или поворачиваться.

.example:hover { fill: blue; transform: rotate(20deg); }

При использовании CSS3 не забудьте добавить vendor префиксы, для поддержания максимального количества современных браузеров. В то время как у Chrome и Firefox нет никаких проблем с безупречным рендерингом, Internet Explorer откажется показыивать ваши творения даже в самой последней версии, в то время как он вполне способен показывать эти свойства CSS3 при использовании в HTML.

Медиа запросы и SVG

Если вы хотите настроить ваш SVG так, чтобы он мог менять размеры, тогда просто используйте медиа запросы прямо в нем:

@media only screen and (max-width: 800px) { .example { display: none; } }

Этот пример гарантирует, что элементы класса example не будут показываться, как только видимая ширина падает ниже 800 пикселей. Знайте, что не ширина документа определяет это, но ширина элемента несущая ваш SVG.

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

Продолжение предыдущей статьи “Стилизация SVG с помощью CSS - Часть 1”, посвященной формату векторной графики SVG.

Стилизация с помощью CSS

Между языками HTML и CSS существует четкая и ясная взаимосвязь: язык HTML предназначен для структуризации контента на странице; задача языка CSS - внешнее оформление этого контента . Формат SVG размывает четкие границы этой взаимосвязи. Например, формат версии SVG1.1 не нуждается в CSS для стилизации отдельных элементов SVG-объектов - для этой цели имеются так называемые презентационные атрибуты .

Презентационные атрибуты являются сокращениями CSS-свойств для SVG-элементов. Можно думать об этих атрибутах, как о CSS-свойствах для SVG с особым синтаксисом. К этим свойствам применима каскадность стилей, но в этой статье мы поступим более кратким способом.

Показанный ниже пример является кодом, в котором используются презентационные атрибуты для стилизации границы

многоугольника в виде пятиконечной звезды:

В этом примере атрибуты

fill

, или , абсолютно не похожи на свои CSS-аналоги.

В формате SVG2 имеются несколько презентационных атрибутов , таких как

width

height

и некоторые другие, которые невозможно задать с помощью CSS в SVG1.1. Список новых SVG-атрибутов можно посмотреть по этой ссылке - SVG2 спецификация .

Другим способом стилизации SVG-элементов является использование для этой цели CSS-свойств. Точно также, как и в случае в HTML-элементами, CSS-свойства могут быть заданы с помощью inline-стиля:

Каскады стилей SVG

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

Презентационные атрибуты позиционируются как “авторские стилевые правила” и могут быть переопределены любыми другими определениями: внешними таблицами стилей, внутренними таблицами стилей или же inline-стилями.

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

Например, представленный ниже образец кода является кругом, написанным на SVG. Цвет заливки круга в виде атрибута

с помощью правила , , и . Замечания

Так как презентационные атрибуты имеют XML-синтаксис, то они чувствительны к регистру . Например, при задании цвета заливки SVG-элемента атрибут должен быть записан как

в ,

или внешние таблицы стилей.

На этом все.

Updated on March 26, 2015 gearmobile

Tutorial

Нам нужно:

Установить на сайте собственные иконки с помощью SVG.

Они должны управляться с помощью CSS (форма, размер, заливка, эффекты в том числе и их поведение).

Они должны иметь маленький вес и находиться в одном месте для экономии http запросов.

Работать во всех основных современных браузерах.

демо Зачем я это пишу? Несмотря на растущую популярность вектора в браузере, его возраст и поддержку браузерами , хороших решений использования, как кажется мне, очень мало. Позвольте объясниться. Конечно о SVG много писали и рассказывали . Даже о SVG и CSS вместе. Но когда я столкнулся с необходимостью сделать SVG иконки для сайта, не смог найти хороших гибких решений. SVG в браузере сейчас выглядит всеми забытым пожилым человеком, пора его причесать, встряхнуть от пыли и отправить в спорт зал. Надеюсь описанный в этой статье метод для кого нибудь будет полезным.

Сразу скажу да, я использовал иконочные шрифты, вот в чем здесь проблемы:
1. Такие иконки в браузере рендерятся как шрифт и в Windows, например, часто получаются мыльные края. Есть CSS свойства , которые должны решать эту проблему, но они работают только в WebKit и только под MAC - то есть бесполезны. Дизайнер ругался.
2. Только в 23 Chrome и только под Windows такой шрифт начал исчезать, а в некоторых случаях сильно «рвать» остальную верстку сайта. Я много раз пользовался такими шрифтами, но первый раз со своими собственными иконками. И первый раз такая проблема.
3. Невозможно добавлять внутреннюю тень. В проекте это было обязательно. Дизайнер ругался.
4. Вес такого шрифта. C SVG не сравнится.
5. Все-таки SVG имеет больше возможностей по сравнению со шрифтом.

Приступим или исходные данные. Исходные данные - чиcтый HTML документ с подключенным к нему main.css или то место, где мы будем писать стили наших иконок.
Так же добавим SVG документ в тег body. В нем, в разделе defs, мы будем декларировать формы наших иконок в виде clip-path и фильтры для них (внутренняя тень).
Как декларировать SVG лучше подсмотреть у вредного старичка , так как он самый превередливый.

Добавляем форму иконки Как получить SVG код, я думаю, писать не нужно? Достаточно просто открыть SVG файл в текстовом редакторе или воспользоваться любым векторным редактором, например Illustrator. Для наглядности здесь я показываю только SVG код из нашего HTML документа (помните, что он находится в теге body). Создаем тег clipPath и добавляем в него SVG форму иконки.

Мы создали путь для иконки в виде сердца. Прошу обратить внимание на аттрибут id="heart-path" у тега clipPath.
Через него мы будем ссылаться на форму нашей иконки.

Добавляем иконки Вставляем в HTML документ нашу иконку. Она состоит из маленького SVG документа, внутрь которого вставлен квадрат:

Сразу видим небольшой недостаток подхода - иконка состоит из двух элементов. Проблема, на мой взгляд, терпимая так как структура у всех иконок абсолютно одинаковая. Если что, можно легко найти/заменить/убрать через поиск по всему проекту.

Обратите внимание на цифру 512. Это размер квадрата в который была вписанна иконка, когда рисовалась в редакторе. С Вашей иконкой может быть иначе. Класс heart-icon для задания формы иконки в CSS, класс icon - объединяющий класс для всех иконок (их же будет масса?).

Последний шаг. Добавляем CSS Давайте посмотрим что получилось. Если Вы все сделали правильно, то увидите черный квадрат 512 на 512 пикселя. Малевич уже одобряет. Но, боюсь, наш с вами манифест супрематизма никто уже не оценит. Продолжаем.

Все правильно, иконок нет? Приступаем к самому интересному - CSS.

В main.css который мы подключили к документу пишем стили для классов heart-icon и icon.

Icon{ width:32px; height:32px; cursor:pointer; fill: #ccc; } Наш черный квадрат становится серым и 32х32 пикселя. Свойство fill задает заливку нашей иконки.

Heart-icon rect{ clip-path:url("#heart-path"); } Наконец-то появляется форма иконки! clip-path именно то cвойcтво, которое заставляет браузер брать форму по #heart-path и применять ее к квадрату.

Добавим поведение для иконки. Это будут:hover, :active состояния и checked класс.

Heart-icon rect{ clip-path:url("#heart-path"); } .icon:hover{ fill: #999; } .icon:active, .icon.checked{ fill:red; }

Добавляем внутренюю тень Для этого мы будем использовать SVG filter.
Сразу предупреждаю. Для данного примера у меня возникали небольшие трудности с иконками при использовании фильтра поверх них. Часть из них иногда исчезала. Иногда. Может только у меня. Будьте на чеку. И еще одна проблема - чтобы фильтр накладывался красиво нужно добавить еще один элемент в иконку. Да, очень жаль. Теперь иконка с фильтром = 3 элемента. Так что если Вам нужно воплатить трендовый флет дизайн , смело .

Добавим элемент:
Тэг и есть тот самый элемент, который используется для фильтра.

Добавляем в раздел SVG документа фильтр:

Описывать как работает фильтр, я не стану. Вы запросто прочитаете это в интернете. Это ведь тема для отдельного поста. Просто покрою его комментариями.
Обратите внимание что у фильтра тоже есть id="inset-shadow"

Добавляем к иконкам тень
.icon g{ filter:url("#inset-shadow") }
Вот и все . Хочется мне написать. Но это было бы неправдой.

Правда или любим всех Дело в том, что если вы откроете пример в Opera, то увидите набор из 3 квадратов. Те иконки, что с тенью и вовсе исчезают и это проблема SVG фильтров. Если браузер не находит нужный фильтр, он рендерит иконку прозрачной, вместо того, чтобы просто его не применять.

Но почему же не находит?! Дело в том, что здесь сталкиваются 2 браузерных мира. Наш путь url("#heart-path") Opera воспринимает как путь относительный файла CSS или url("main.css#heart-path") вместо url("index.html#heart-path"), как делают это остальные. Если задать путь эксклюзивно как url("index.html#heart-path"), то браузеры не парсят SVG документ внутри index.html, так как считают его внешним источником. Такие же проблемы возникают и у Mozilla, как только Вы переносите main.css за пределы каталога с файлом index.html. IE же в этом вопросе солидарен с WebKit. А WebKit в свою очередь не очень дружит с внешними источниками. Им нужен внутренний.

Разводим миры по углам. В смысле, мирим. То есть, заставляем водить хоровод.
Да, речь пойдет о кроссбраузерности.

Итак нам нужно:

Два CSS файла с разными путями для двух разных миров.

Редактировать и поддерживать стили иконок в одном месте(файле).

Иметь один источник декларации форм иконок и фильтров - один SVG документ.

Не задумываться об этом в дальнейшем при разработке.

Приступим. В решении этих задач нам помогут препроцессоры. В качестве CSS препроцессора в данном примере я буду использовать Stylus , который незаслуженно обделен вниманием русскоязычного сообщества разработчиков, но максимально просто и наглядно проиллюстрирует данный пример.
В качестве HTML препроцессора я буду использовать PHP, самый массовый препроцессор и серверный язык одновременно. Любой разработчик, пользовавшийся когда-нибудь препроцессором запросто напишет этот пример для своего любимого инструмента. Главное принцип.

Давайте переименуем файл index.html в index.php. После этого создадим папку /css и разместим в ней файл icons.svg, куда перенесем наш большой SVG документ с декларациями форм иконок.

На месте большого SVG документа в index.php напишем PHP выражение

которое включает текст файла icons.svg на то место, где встречается само выражение.
Пункт 3 выполнен, можно вычеркивать.

Теперь пункт 1 и 2.

В каталоге /css создадим файл icons.styl. Это будет именно то одно место, где мы будем редактировать стили наших иконок. Переместим в него все содержимое файла main.css и оформим в виде миксина icons_mixin:
icons_mixin(path = "") .heart-icon rect{ clip-path:url(path + "#heart-path"); } .play-icon rect{ clip-path:url(path + "#play-path"); } .icon{ width:32px; height:32px; cursor:pointer; fill: #ccc; g{ filter:url(path + "#inset-shadow") } &:hover{ fill: #999; } &:active, &.checked{ fill:red; } }
Миксин принимает в качестве параметра путь к SVG формам. Его мы будем использовать при формировании путей для разных браузеров.
CSS стили иконок нисколько не изменились, я просто добавил нестинг для удобства и наглядности примера.

Теперь создадим еще 2 .styl файла. webkit_ie.styl и ff_op.styl.
Первый будем использовать на нашем вебсайте по умолчанию, второй только для Mozilla и Opera.

В файл webkit_ie.styl добавим:
@import "icons.styl" icons_mixin()
Импортируем файл с миксином иконок и выполняем его без параметров.
В файл ff_op.styl добавим:
@import "icons.styl" icons_mixin("icons.svg")
Импортируем файл с миксином иконок и передаем ему путь к icons.svg.

Пункт 1 и 2 выполнены. Вычеркиваем.

Если запутались, вот так выглядит проект:

В index.php поправим путь к стилям иконок, теперь это

И в самом конце, перед закрывающимся тегом добавим скрипт для условного добавления стилей иконок для браузеров с движком отличным от WebKit или Trident(IE):

var firefox = navigator.userAgent.indexOf("Firefox") != -1 ; var opera = navigator.userAgent.indexOf("Opera") != -1 ; if (firefox || opera) { document.write(""); }
Вот и все. исходники

Что же мы наделали!? Давайте оглянемся назад и посмотрим, что натворили. Несмотря на то, что с первого взгляда, система может показаться слишком комплексной, мне кажется, она получилась достаточно гибкая и простая (с моего второго взгляда) чтобы иметь право на жизнь.

Она полностью управляется с помощью CSS.
Она может работать в
- IE 9-10
- Mozilla 4+
- Opera 11.6+
- Safari 5.1+
- Chrome 14+ (я думаяю и 4+, но проверял только до этой версии)
Она достаточно легка по весу. (Вспомним иконку плей Вес ее составляет всего 85 байт)
Все иконки лежат в одном файле, так что мы не будем сервер доставать запросами.

Все задачи выполнены. Здесь с Вашего позволения я и остановлюсь. Всем большое спасибо за внимание и время, надеюсь, Вы провели его с пользой.

Теги: Добавить метки

Это сам Q & A из удобного кода, с которым я пришел.

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

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

Это вопрос:

17 ответов

Во-первых, используйте тег IMG в своем HTML, чтобы вставить SVG-графику. Я использовал Adobe Illustrator, чтобы сделать графику.

Это похоже на то, как вы вставляете обычный образ. Обратите внимание, что вам нужно установить IMG для класса svg. Класс "social-link" просто для примера. Идентификатор не требуется, но полезен.

Затем используйте этот код jQuery (в отдельном файле или встроенном в HEAD).

/* * Replace all SVG images with inline SVG */ jQuery("img.svg").each(function(){ var $img = jQuery(this); var imgID = $img.attr("id"); var imgClass = $img.attr("class"); var imgURL = $img.attr("src"); jQuery.get(imgURL, function(data) { // Get the SVG tag, ignore the rest var $svg = jQuery(data).find("svg"); // Add replaced image ID to the new SVG if(typeof imgID !== "undefined") { $svg = $svg.attr("id", imgID); } // Add replaced image classes to the new SVG if(typeof imgClass !== "undefined") { $svg = $svg.attr("class", imgClass+" replaced-svg"); } // Remove any invalid XML tags as per http://validator.w3.org $svg = $svg.removeAttr("xmlns:a"); // Replace image with new SVG $img.replaceWith($svg); }, "xml"); });

Что делает вышеприведенный код, это искать все IMG с классом "svg" и заменять его встроенным SVG из связанного файла. Массивным преимуществом является то, что он позволяет использовать CSS для изменения цвета SVG сейчас, например:

Svg:hover path { fill: red; }

Код jQuery я написал также порты по исходному идентификатору и классам изображений. Итак, этот CSS тоже работает:

#facebook-logo:hover path { fill: red; }

Social-link:hover path { fill: red; }

Svg path { fill: #000; }

$(document).ready(function() { $("img").each(function() { var $img = jQuery(this); var imgURL = $img.attr("src"); var attributes = $img.prop("attributes"); $.get(imgURL, function(data) { // Get the SVG tag, ignore the rest var $svg = jQuery(data).find("svg"); // Remove any invalid XML tags $svg = $svg.removeAttr("xmlns:a"); // Loop through IMG attributes and apply on SVG $.each(attributes, function() { $svg.attr(this.name, this.value); }); // Replace IMG with SVG $img.replaceWith($svg); }, "xml"); }); });

Если вы можете включить в свою версию файлы (включая PHP или включить через ваш CMS), вы можете добавить SVG-код и включить его на свою страницу. Это работает так же, как вставка источника SVG на страницу, но делает очистку страницы более чистым.

Преимущество состоит в том, что вы можете нацелить части своего SVG с помощью CSS для зависания - не требуется javascript.

Вам просто нужно использовать правило CSS следующим образом:

#pathidorclass:hover { fill: #303 !important; }

Обратите внимание, что бит!important необходим для переопределения цвета заливки.

Теперь вы можете использовать свойство filter CSS в большинстве современных браузеров (включая Edge, но не IE11). Он работает с изображениями SVG, а также с другими элементами. Вы можете использовать hue-rotate или invert для изменения цветов, хотя они не позволяют изменять разные цвета независимо друг от друга. Я использую следующий класс CSS, чтобы показать "отключенную" версию значка (где оригинал представляет собой изображение SVG с насыщенным цветом):

Disabled { opacity: 0.4; filter: grayscale(100%); -webkit-filter: grayscale(100%); }

Это делает его светло-серым в большинстве браузеров. В IE (и, возможно, Opera Mini, который я не тестировал), он заметно угасает с помощью свойства непрозрачности, которое по-прежнему выглядит довольно хорошо, хотя оно не серое.

Здесь приведен пример с четырьмя различными классами CSS для значка колокола Twemoji : оригинал (желтый), вышеперечисленный класс "отключен", hue-rotate (зеленый) и invert (синий).

Twa-bell { background-image: url("https://twemoji.maxcdn.com/svg/1f514.svg"); display: inline-block; background-repeat: no-repeat; background-position: center center; height: 3em; width: 3em; margin: 0 0.15em 0 0.3em; vertical-align: -0.3em; background-size: 3em 3em; } .grey-out { opacity: 0.4; filter: grayscale(100%); -webkit-filter: grayscale(100%); } .hue-rotate { filter: hue-rotate(90deg); -webkit-filter: hue-rotate(90deg); } .invert { filter: invert(100%); -webkit-filter: invert(100%); }

@Drew Baker дал отличное решение для решения проблемы. Код работает правильно. Тем не менее, те, кто использует AngularJs, могут найти большую зависимость от jQuery. Следовательно, я подумал, что неплохо вставить для пользователей AngularJS код, следующий за решением @Drew Baker.

Метод AngularJs одного и того же кода

1. Html: используйте тег ниже в файле html:

2. Директива: это будет директива о том, что вам нужно будет распознать тег:

"use strict"; angular.module("myApp") .directive("svgImage", ["$http", function($http) { return { restrict: "E", link: function(scope, element) { var imgURL = element.attr("src"); // if you want to use ng-include, then // instead of the above line write the bellow: // var imgURL = element.attr("ng-include"); var request = $http.get(imgURL, {"Content-Type": "application/xml"}); scope.manipulateImgNode = function(data, elem){ var $svg = angular.element(data); var imgClass = elem.attr("class"); if(typeof(imgClass) !== "undefined") { var classes = imgClass.split(" "); for(var i = 0; i < classes.length; ++i){ $svg.classList.add(classes[i]); } } $svg.removeAttribute("xmlns:a"); return $svg; }; request.success(function(data){ element.replaceWith(scope.manipulateImgNode(data, element)); }); } }; }]);

Any-class-you-wish{ border: 1px solid red; height: 300px; width: 120px }

4. Единичный тест с карма-жасмином:

"use strict"; describe("Directive: svgImage", function() { var $rootScope, $compile, element, scope, $httpBackend, apiUrl, data; beforeEach(function() { module("myApp"); inject(function($injector) { $rootScope = $injector.get("$rootScope"); $compile = $injector.get("$compile"); $httpBackend = $injector.get("$httpBackend"); apiUrl = $injector.get("apiUrl"); }); scope = $rootScope.$new(); element = angular.element(""); element = $compile(element)(scope); spyOn(scope, "manipulateImgNode").andCallThrough(); $httpBackend.whenGET(apiUrl + "me").respond(200, {}); data = "" + "" + "" + "" + "" + "" + "" + "" + "" + "" + ""; $httpBackend.expectGET("/icons/icon-man.svg").respond(200, data); }); afterEach(function() { $httpBackend.verifyNoOutstandingExpectation(); $httpBackend.verifyNoOutstandingRequest(); }); it("should call manipulateImgNode atleast once", function () { $httpBackend.flush(); expect(scope.manipulateImgNode.callCount).toBe(1); }); it("should return correct result", function () { $httpBackend.flush(); var result = scope.manipulateImgNode(data, element); expect(result).toBeDefined(); }); it("should define classes", function () { $httpBackend.flush(); var result = scope.manipulateImgNode(data, element); var classList = ["svg"]; expect(result.classList).toBe(classList); }); });

Я понимаю, что вы хотите выполнить это с помощью CSS, но просто напоминание на случай, если это маленький, простой образ - вы всегда можете открыть его в Notepad++ и изменить путь /whatelement fill:

Это могло бы сэкономить массу уродливого сценария. Извините, если это вне базы, но иногда простые решения можно упустить.

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

Я написал директиву для решения этой проблемы с помощью AngularJS. Доступно .

Он заменяет элемент SVG после его рендеринга и помещает его внутри элемента div , что делает его CSS легко изменчивым. Это помогает использовать один и тот же файл SVG в разных местах, используя разные размеры/цвета.

Использование прост:

После этого вы можете легко:

Svg-class svg { fill: red; // whichever color you want }

Здесь нет кода рамки, только чистый js:

Document.querySelectorAll("img.svg").forEach(function(element) { var imgID = element.getAttribute("id") var imgClass = element.getAttribute("class") var imgURL = element.getAttribute("src") xhr = new XMLHttpRequest() xhr.onreadystatechange = function() { if(xhr.readyState == 4 && xhr.status == 200) { var svg = xhr.responseXML.getElementsByTagName("svg"); if(imgID != null) { svg.setAttribute("id", imgID); } if(imgClass != null) { svg.setAttribute("class", imgClass + " replaced-svg"); } svg.removeAttribute("xmlns:a") if(!svg.hasAttribute("viewBox") && svg.hasAttribute("height") && svg.hasAttribute("width")) { svg.setAttribute("viewBox", "0 0 " + svg.getAttribute("height") + " " + svg.getAttribute("width")) } element.parentElement.replaceChild(svg, element) } } xhr.open("GET", imgURL, true) xhr.send(null) })

Здесь версия для knockout.js на основе принятого ответа:

Важно: Это действительно требует jQuery для замены, но я подумал, что это может быть полезно для некоторых.

Ko.bindingHandlers.svgConvert = { "init": function () { return { "controlsDescendantBindings": true }; }, "update": function (element, valueAccessor, allBindings, viewModel, bindingContext) { var $img = $(element); var imgID = $img.attr("id"); var imgClass = $img.attr("class"); var imgURL = $img.attr("src"); $.get(imgURL, function (data) { // Get the SVG tag, ignore the rest var $svg = $(data).find("svg"); // Add replaced image ID to the new SVG if (typeof imgID !== "undefined") { $svg = $svg.attr("id", imgID); } // Add replaced image classes to the new SVG if (typeof imgClass !== "undefined") { $svg = $svg.attr("class", imgClass + " replaced-svg"); } // Remove any invalid XML tags as per http://validator.w3.org $svg = $svg.removeAttr("xmlns:a"); // Replace image with new SVG $img.replaceWith($svg); }, "xml"); } };

Затем просто примените data-bind="svgConvert: true" к вашему тегу img.

Это решение полностью заменяет тег img SVG, и любые дополнительные привязки не будут соблюдаться.

Существует библиотека с открытым исходным кодом под названием SVGInject, которая использует атрибут onload для запуска инъекции. Проект GitHub можно найти на странице https://github.com/iconfu/svg-inject

Ниже приведен минимальный пример использования SVGInject:

После загрузки изображения onload="SVGInject(this) вызовет инъекцию, а элемент будет заменен содержимым SVG файла, указанного в атрибуте src .

Он решает несколько проблем с инъекцией SVG:

SVG можно скрыть до завершения инъекции. Это важно, если стиль уже применяется во время загрузки, что в противном случае могло бы привести к кратковременной "вспышке без использования содержимого".

Элементы автоматически внедряют их. Если вы добавляете SVG динамически, вам не придется беспокоиться о вызове функции впрыска снова.

Случайная строка добавляется к каждому идентификатору в SVG, чтобы избежать повторения одного и того же ID в документе, если SVG вводится несколько раз.

SVGInject - это простой Javascript и работает со всеми браузерами, поддерживающими SVG.

Если у нас есть большее количество таких svg-изображений, мы также можем воспользоваться файлами-шрифтами.
Такие сайты, как https://glyphter.com/ , могут получить файл шрифтов из наших svgs.

например.

@font-face { font-family: "iconFont"; src: url("iconFont.eot"); } #target{ color: white; font-size:96px; font-family:iconFont; }

Поскольку SVG - это в основном код, вам нужно просто содержимое. Я использовал PHP для получения контента, но вы можете использовать все, что захотите.

Затем я печатал содержимое "как есть" внутри контейнера div

Чтобы финализировать правило для контейнеров SVG childs на CSS

Fill-class > svg { fill: orange; }

Я получил эти результаты с помощью значка материала SVG:

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

/** * A jQuery plugin that loads an svg file and replaces the jQuery object with its contents. * * The path to the svg file is specified in the src attribute (which normally does not exist for an svg element). * * The width, height and class attributes in the loaded svg will be replaced by those that exist in the jQuery object"s * underlying html. Note: All other attributes in the original element are lost including the style attribute. Place * any styles in a style class instead. */ (function ($) { $.fn.svgLoader = function () { var src = $(this).attr("src"); var width = this.attr("width"); var height = this.attr("height"); var cls = this.attr("class"); var ctx = $(this); // Get the svg file and replace the element. $.ajax({ url: src, cache: false }).done(function (html) { let svg = $(html); svg.attr("width", width); svg.attr("height", height); svg.attr("class", cls); var newHtml = $("").append(svg.clone()).html(); ctx.replaceWith(newHtml); }); return this; }; }(jQuery));

В html укажите элемент svg следующим образом.

SVG - формат векторной графики. Буквально его название значит «масштабируемая векторная графика» (Scalable Vector Graphics). Попросту говоря, это то, с чем вы работаете в Adobe Illustrator. SVG можно легко использовать в вебе, но сперва нужно во многом разобраться.

Зачем вообще нужен SVG?

Небольшие размеры файлов, отличное сжатие;
Масштабирование до любого размера, без потери качества (разве что, при совсем маленьких размерах);
Хорошо выглядит на ретине;
Широкие возможности, которые предоставляют фильтры и интерактивность.

Создадим изображение SVG, с которым будем работать дальше

Создайте произвольный рисунок в Adobe Illustrator. Вот, например, птица киви на овале.

Обратите внимание, что изображение кадрируется чётко по краям изображения. Холст в SVG играет не меньшую роль, чем в PNG или JPG.

Adobe Illustrator умеет сохранять в SVG.

При сохранении появится ещё одно диалоговое окно с настройками. Честно говоря, я не очень в них разбираюсь. Существует целая инструкция по Профилям SVG . Меня вполне устраивает SVG 1.1.

Здесь стоит отметить, что у вас есть возможность нажать OK и сохранить файл или же нажать кнопку “SVG Code…”, которая откроет окно TextEdit (по крайней мере на Mac) с SVG-кодом.

Оба варианта могут пригодиться.

В Illustrator рабочая область была размером 612px ✕ 502px.

Именно такие размеры будут у изображения на странице, если их не указать специально. Его размеры можно изменить, задав атрибуты width или height для img , так же как для PNG или JPG. Вот пример :

Поддержка браузерами

Один из вариантов: проверка поддержки через Modernizr и замена src для изображения:

if (!Modernizr.svg) { $(".logo img" ).attr("src" , "images/logo.png" ); }

Дэвид Бушел (David Bushell) предложил очень простой альтернативный вариант , если вы не имеете ничего против JavaScript в разметке:

"this.onerror=null; this.src="image.png"" >

Для этого способа вставки SVG можно использовать следующие приемы деградации:

...

И снова используем Modernizr:

.logo-fallback { display : none; /* Убедитесь, что размер соответствует размеру SVG */ } .no-svg .logo-fallback { background-image : url (logo.png); } Добавляем SVG на страницу с помощью тега

Если по какой-либо причине вариант со вставкой SVG непосредственно в документ вам не нравится (он все же имеет парочку недостатков, например, кэширование практически невозможно), можно подключить SVG-файл используя и сохранить возможность управлять его частями посредством CSS.

Kiwi Logo

На тот случай, если это не поддерживается, реализуем деградацию, используя класс, который добавляет Modernizr:

.no-svg .logo { width : 200px ; height : 164px ; background-image : url (kiwi.png); }

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

/* специальные CSS-фишки для SVG */ ... Внешние файлы со стилями для SVG, вставленного с помощью

Есть способ добавить в SVG-файл внешний файл со стилями, если это необходимо работы для проекта, кэширования или еще чего-то. Я экспериментально выяснил, что он работает только для SVG-файлов, встроенных в документ с помощью тега . Вот что нужно добавить в SVG-файл перед открывающим тегом :

Если попробовать добавить этот код в HTML, вы получите ошибку, и браузер даже не подумает его подгружать. Если подключить SVG-файл, в котором предложенный код заменяет или background-image , система ругаться не будет, но и работать такой код не будет (SVG, однако, отобразится).