Как изменить цвет изображения SVG с помощью CSS (замена изображения SVG jQuery)? Использование SVG.

Перед тем как начать разговор о SVG анимации, давайте разберемся, что такое SVG.
S calable V ector G raphics - масштабируемая разметка в екторной графики. Предназначена для описания двумерной векторной и смешанной векторно/растровой графики в формате XML. Позволяет задать любую фигуру компактной строкой, описывающей путь от начальной точки до конечной через любые промежуточные координаты.

Формат SVG имеет ряд достоинств:

SVG - векторный формат, а это позволяет масштабировать изображение без потери качества.

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

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

Совместимость с таблицами стилей (CSS), которые используются для описания внешнего вида страниц сайтов.

Анимация реализована в SVG с помощью языка SMIL. Элементами можно управлять при помощи JavaScript.

И несколько недостатков, куда же без них:

• Сложность использования в крупных картографических приложениях. Мелкие детали описывать слишком трудоёмко.

Чем больше в изображении мелких деталей, тем быстрее растёт размер SVG-данных.

Пример SVG кода:

Исполнение данного кода:

В даном изображении можно просто изменить параметры в коде. Для примера - картинка с изображением занимает 35.5 КБ, а код SVG - 426 байт.

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

Так зачем же разработчику использовать SMIL? Есть некоторые свойства SVG, которые невозможно изменить и анимировать при помощи CSS. Например, атрибут d=””, в котором находится набор данных, определяющих форму элемента. Недостающие возможности анимации на CSS можно восполнить с помощью JavaScript. Для этого есть ряд библиотек. Это будет целесообразно, если браузер (например Opera Mini) не поддерживает SMIL анимацию.

Целевой объект анимации задается с помощью xlink:href.

Если атрибут xlink:href не задан, то целевым элементом становится родительский элемент:

Атрибут attributeName используется для указания имени атрибута, который будет анимироваться. К примеру, если нужно анимировать положение центра фигуры на оси Y, нужно задать “сy” в качестве значения атрибута attributeName.

Вот код, который позволяет анимировать движение по оси Y синего круга из предыдущего примера:

В течение 5 секунд (dur="5s"), после клика на синий круг (begin="click"), он будет двигаться по оси Y, начиная с точки from="300" в точку to="100". После выполнения - анимация остановится в конечной точке (fill="freeze"). Чтобы задать бесконечное повторение анимации, достаточно добавить атрибут repeatCount="indefinite".

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

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

Подробная статья об оформлении содержимого в элементе SVG и преодолении связанных с этим проблем.

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

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

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

Краткий обзор структуры SVG, группирования и ссылок на элементы в SVG

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

4 основных группирующих и связывающих элемента SVG это , , and .

Элемент (сокращение от “group”) используется для логической группировки наборов связанных графических элементов. В терминах графических редакторов (типа Adobe Illustrator) элемент по функционалу похож на функцию “Сгруппировать объекты”. Вы также можете думать о группе как о слое в графическом редакторе.

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

Элемент используется для задания многих вещей, в основном это задание паттернов типа градиентов, которые затем можно использовать для заливки других элементов SVG. Его можно использовать для задания любых элементов, которые вы собираетесь использовать где-либо на холсте.

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

У элемента есть еще одно важное преимущество: он принимает атрибут viewBox , который позволяет масштабирование внутри любой области видимости.

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

Чтобы использовать элемент вам надо передать ссылку на этот элемент, идентификатор - это атрибут xlink:href и спозиционировать его, задав атрибуты x и y . Вы можете применить стили к элементу и они будут каскадироваться на содержимое этого элемента.

Но что является содержимым ? Куда он клонируется? И как каскад CSS работает с ним?

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

• Структурирование, группировка и ссылки в SVG - Элементы g, use, defs и symbol
• Разбираемся в системе координат SVG (Часть 1): Viewport, viewBox и PreserveAspectRatio

SVG и теневой DOM

Когда вы ссылаетесь на элемент с помощью , ваш код выглядит примерно так:

На экране отображается иконка, содержимое которой определено внутри , но на самом деле это содержимое элемента , которое является клоном .

Но элемент это всего лишь один самозакрывающийся элемент - в нем нет контента между открывающим и закрывающим тегами, так куда же клонируется содержимое ?

Ответ - в теневой DOM (почему-то он всегда у меня ассоциируется с Бэтменом, не знаю почему).

Что такое теневой DOM?

Теневой DOM идентичен обычному DOM, за исключением того, что вместо того, чтобы быть частью дерева основного документа, узлы теневого DOM относятся к фрагменту документа, который является параллельным основному, но недоступным для его скриптов и стилей. Это дает авторам возможность создавать модульные компоненты, инкапсулируя скрипты и стили. Если вы когда-либо использовали элемент video или диапазонный ввод в HTML5 и не поняли, откуда появлялись элементы управления видеоплеером или слайдер, то ответ тот же - теневой DOM.

В случае с элементом SVG , содержимое, на которое он ссылается, клонируется в фрагмент документа, “хостящийся” в . В данном случае это теневой хост.

Итак, содержимое (клон или копия элемента, на который он ссылается) присутствует внутри теневого фрагмента документа.

Другими словами, содержимое находится там, но оно невидимое. Такое же, как и содержимое обычного DOM, но не доступное высокоуровневым средствам, таким как селекторы CSS и JavaScript, скопированное в фрагмент документа, привязанный к .

Теперь, если вы дизайнер, вы можете подумать: “ОК, я понял, но есть ли способ проверить этот субдокумент и увидеть его содержимое”. Ответ - да, вы можете просматривать содержимое теневого DOM, используя инструменты разработки в Chrome (в Firefox на данный момент эта функция не доступна). Но для начала вам надо активировать инспектора теневого DOM во вкладке General на панели настроек. Это подробно описано .

После того, как вы активировали инспекцию теневого DOM в инструментах разработчика, вы можете видеть клонированные элементы на панели элементов, также как и элементы обычного DOM. На следующем изображении показан пример элемента , ссылающегося на содержимое элемента . Обратите внимание, что “#shadow-root” и его содержимое являются клоном содержимого .

Используя инструменты разработчика Chrome, вы можете инспектировать содержимое элемента use внутри теневого DOM (“#shadow-root”, строка выделена серым цветом). На этом скриншоте инспектируется логотип Codrops из примера, который мы будем рассматривать в следующем разделе.

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

• Теневой DOM 101 (перевод на Frontender.info)
• Введение в теневой DOM (Видео)

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

Как было сказано, содержимое теневого DOM недоступно для CSS в отличие от обычного DOM. Так как нам стилизовать его? Мы не можем использовать путь к потомкам типа такого:

Use path#line { stroke: #009966; }

Потому как у нас нет доступа к теневому DOM с помощью обычных CSS селекторов.

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

На самом деле, презентационные атрибуты рассматриваются как низкоуровневые “авторские таблицы стилей” и они переписываются остальными стилевыми декларациями: внешними, внутренними и инлайновыми стилями. Их единственная сила это приоритет перед унаследованными стилями. И все.

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

Мы знаем, что мы не можем задать стили внутри , используя CSS селекторы.

Но мы также знаем, что как и в случае с элементом , стили примененные к будут унаследованы всеми его потомками (которые находятся в теневом DOM).

Итак, сначала попытаемся изменить цвет заливки (fill) элемента внутри , применив селектор к самому элементу с расчетом, что каскад и наследование сделают свое дело.

Однако, это вызывает пару вопросов:

Цвет заливки будет унаследован всеми потомками элемента , даже теми, к которым вы не хотите применять стили (но если внутри у вас всего один элемент, то этой проблемы не будет).

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

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

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

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

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

Итак, у нас есть эти атрибуты, но при этом мы хотим оформить различные экземпляры иконок по разному.

Это делается за счет вынуждения презентационных атрибутов к унаследованию стилей, заданных или нахождения способа обойти переопределения этих значений. Чтобы сделать это, нам придется использовать всю мощь каскадирования CSS.

Давайте начнем с простых примеров и постепенно перейдем к сложным.

Переписывание значений презентационных атрибутов с помощью CSS

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

Это просто благодаря ключевому слову CSS inherits . Взгляните на следующий пример - иконка мороженого, нарисованная одним контуром, цвет которого мы хотим изменять в разных экземплярах. Иконка создана Эрин Агноли из Noun Project .

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

Мы выводим множественные экземпляры иконки с помощью .

Ширину и высоту иконок мы задаем с помощью CSS. Я использую те же размеры, что и у viewBox , но они не должны быть идентичными. Однако, чтобы избежать избытка пустого пространства внутри SVG, убедитесь, что вы сохраняете соотношение между сторонами.

Icon { width: 100px; height: 125px; }

С этим кодом мы получили следующий результат:

Заметьте, что благодаря добавленным черным рамкам вокруг наших SVG вы видите границы каждого из них, в том числе и первого, в котором содержимое не рендерится. Запомните: SVG-документ, в котором вы определили symbol будет выводится на страницу, но без содержимого . Чтобы предотвратить это, используйте свойство display: none на первом SVG. Если вы не спрячете SVG с определениями иконок, он будет выводится на экран даже если вы не зададите для него размеры - он займет дефолтные 300 на 150 пикселей (это значение по умолчанию для незамещаемых элементов в CSS) и вы получите ненужный вам пустой блок на экране.

Теперь попробуем изменить цвет заливки для каждого экземпляра иконки:

Use.ic-1 { fill: skyblue; } use.ic-2 { fill: #FDC646; }

Цвет заливки иконок по-прежнему не меняется, так как унаследованный цвет переписывается атрибутом fill="#000" в элементе path . Чтобы это не произошло, нам надо вынудить path унаследовать цвет:

Svg path { fill: inherit; }

Вуаля! Цвета, заданные элементам теперь применяются к path каждого из них. Проверьте демо и поэкспериментируйте со значениями, создавая экземпляры и задавая им разные цвета:

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

Оформление содержимого с помощью свойства CSS all

Некоторое время назад, при работе над иконкой, активируемой с помощью , мне надо было, чтобы один из элементов внутри него унаследовал все стили , такие как fill , stroke , stroke-width , opacity и даже transform . Таким образом, мне надо было контролировать все эти атрибуты через CSS, сохраняя при этом в разметке все презентационные атрибуты в качестве запасного варианта.

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

Path#myPath { fill: inherit; stroke: inherit; stroke-width: inherit; transform: inherit; /* ... */ }

Рассмотрев этот сниппет, вы заметите паттерн, а, значит, имело бы смысл объединить все указанные свойства в одно и задать ему значение inherit .

К счастью, нам поможет свойство CSS all . В моем справочнике по CSS упоминается использование свойства all для оформления SVG, но стоит освежить наши знания.

Используя свойство all мы можем сделать так:

Path#myPath { all: inherit; }

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

Заметьте, что это относится только к атрибутам, которые можно устанавливать с помощью CSS, а не к атрибутам, задаваемым только в SVG. Если атрибут может быть задан с помощью CSS - он унаследует стили, иначе нет.

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

Использование переменной CSS currentColor для оформления содержимого

Использование переменной CSS currentColor в сочетании с техникой, описанной выше, позволяет определить два цвета для элемента, а не один. Год назад Фабрис Вайнберг написал об этом .

Идея состоит в том, чтобы одновременно применять к свойства fill и color , а затем каскадировать эти свойства к содержимому , используя возможности переменной currentColor . Посмотрим на пример кода, чтобы понять, как это работает.

Предположим, мы хотим оформить это минималистичное лого Codrops, используя 2 цвета - один для передней капли, а второй для задней.

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

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

Поэтому вместо определения цвета заливки и каскадирования его обычным способом, мы будем использовать переменную currentColor , чтобы меньшая капля на переднем плане была другого цвета и это значение мы зададим с помощью свойства color .

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

Затем нам надо удалить презентационный атрибут fill из второй капли и позволить ей унаследовать цвет заливки (fill) от элемента с помощью inherit .

Если бы мы использовали ключевое слово inherit , чтобы вынудить презентационные атрибуты унаследовать значения от , обе части унаследовали бы одинаковое значение, а currentColor не имела бы никакого эффекта. Поэтому в этой технике нам надо удалить тот атрибут, который мы хотим задать через CSS, а оставить только тот, в котором мы будем использовать currentColor .

Теперь, используя свойства fill и color в мы добавим стили к капле из логотипа:

Codrops-1 { fill: #4BC0A5; color: #A4DFD1; } .codrops-2 { fill: #0099CC; color: #7FCBE5; } .codrops-3 { fill: #5F5EC0; color: #AEAFDD; }

Каждый элемент получает собственное значение fill и color . В каждом из них цвет fill каскадируется и заполняет первый контур, не имеющий атрибута fill , а цвет свойства color используется для задания атрибута fill во втором контуре.

Так что произошло следующее: значение текущего цвета просочилось в стили содержимого элемента за счет использования переменной currentColor . Изящно, не правда, ли?

Вот демо с использованным кодом:

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

Ключевое слово currentColor это единственная доступная переменная CSS на данный момент. Однако, если бы у нас было бы больше переменных, могли бы мы их использовать для заполнения еще большего количества значений в содержимом ? Да, могли бы. Амелия Беллами-Ройдс год назад представила концепцию этого в своем блоге на Codepen . Посмотрим, как это работает.

Будущее: оформление содержимого c помощью переменных CSS

Код робота содержит все составляющие его цвета:

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

С добавленными переменными код будет следующим:

Так как инлайновые теги style переписывают презентационные атрибуты, браузеры с поддержкой CSS-переменных будут использовать эти переменные для задания цвета заливки (fill). А браузеры, не поддерживающие их, будут использовать атрибут fill .

Затем нам надо задать значения для переменных в CSS. Но сначала инстанцируем изображение с помощью :

После этого зададим значения переменных для use , чтобы они могли каскадироваться к его содержимому. Выбранные вами цвета создадут цветовую схему рисунка. Так как в нашем роботе используется три основных цвета, мы назовем их primary , secondary и tertiary .

#robot-1 { --primary-color: #0099CC; --secondary-color: #FFDF34; --tertiary-color: #333; }

Вы по-прежнему можете использовать свойства fill и color вместе с этими переменными, но вы можете вполне обойтись и без этого. Итак, с цветами заданными в наших переменных, робот выглядит так:

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

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

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

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

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

Итак, теперь код нашего робота выглядит так:

И это все. Если у какой-либо переменной не будет задано значение, у браузера всегда будет в запасе цвет, заданный в качестве запасного варианта. Замечательно.

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

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

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

Подводя итоги

Это была большая статья.

Используя возможности каскада CSS, оформление содержимого , хранимого в теневом DOM, становится менее сложным. А с переменными CSS (currentColor или с пользовательскими свойствами) мы можем проникнуть в теневой DOM и кастомизировать нашу графику, как хотим, создавая при этом запасной вариант на случай проблем.

Лично мне очень симпатично сочетание переменных CSS и SVG. Мне нравятся их совместный функционал, особенно в части создания механизма запасного варианта.

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

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

Это сам 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 с помощью CSS - Часть 1”, посвященной формату векторной графики SVG.

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

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

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

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

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

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

1

fill

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

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

1

x

,

1

y

,

1

width

,

1

height

,

1

cx

,

1

cy

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

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

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

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

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

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

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

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

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

в ,

1

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

На этом все.

Updated on March 26, 2015 gearmobile

SVG представляет собой формат изображения для векторной графики. В буквальном смысле это ни что иное, как масштабируемая векторная графика. То есть это как раз то, с чем вы работаете в Adobe Illustrator. Использовать SVG при web-разработке довольно легко, но есть особенности, которые стоит рассмотреть.

Для чего используют SVG

• Маленький размер файла, который хорошо сжимается
• Масштабирование до любого размера без потери качества
• Отлично смотрится на дисплеях retina
• Полный контроль дизайна при интерактивности и в фильтрах

Нарисуем что-нибудь для предстоящей работы в Adobe Illustrator. Возьмём птичку Kiwi:

​

Обратите внимание, что холст обрезается ровно по краю картинки. Холст в SVG абсолютно идентично строится, как PNG или JPG. Вы можете сохранить файл непосредственно из Adobe Illustrator как SVG файл.

​

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

​

Самое интересное здесь то, что вы можете либо нажать ОК и сохранить файл, или нажать кнопку “SVG Code…” и откроется текстовый редактор с кодом SVG.

​

Оба способа могут оказаться полезными.

Используем SVG в виде тега img

В Illustrator наш холст получился 612px ✕ 502px.

Насколько большим изображение будет на страницу решать вам. Вы можете изменить размер изображения путем определения свойств width и height, то есть абсолютно так же, как и с PNG или JPG. Вот пример:

Check out this Pen!

Как сделать кроссбраузерный SVG

Используя SVG таким образом, нужно иметь ввиду о разной поддержки браузерами. По сути, SVG работает везде кроме IE8 и нижу, а также Android 2.3 и ниже.

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

Одним из способов, чтобы проверить поддержку SVG является Modernizr, с помощью которого меняется путь src:

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

David Bushell придумал очень легкий альтернативный способ, но он содержит javascript в разметке:

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

Использование SVG в качестве фона background-image

По аналогии с тегом img, SVG можно использовать в качестве фонового изображения:

Kiwi Corp .logo { display: block; text-indent: -9999px; width: 100px; height: 82px; background: url(kiwi.svg); background-size: 100px 82px; }

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

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

Modernizr может помочь нам здесь еще более эффективным способом, чем в случае с img. Дело в том, если заменить фоновое изображение с поддерживаемым форматом, то будет выполнен лишь один HTTP запрос вместо двух, как в случае с img. Modernizr добавляет имя класса “no-svg” к тегу HTML, если браузер не имеет поддержки SVG:

Main-header { background: url(logo.svg) no-repeat top left; background-size: contain; } .no-svg .main-header { background-image: url(logo.png); }

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

Использование “inline” SVG

Выше упоминалось, что при сохранении картинки в формате SVG, с помощью редактора Illustrator можно получить правильный SVG код (также можно отрыть файл с помощью текстового редактора и скопировать этот код). Вы можете скопировать этот код в ваш HTML и SVG будет отображаться абсолютно также, как при использовании img.

Это может быть полезным, так как образ изображения приходит вместе с кодом в документ и при этом не осуществляется HTTP запрос. Другими словами, преимущества такие же, как при использовании данных Data URI. Однако, недостатки тоже есть. Из-за вставки вставки прямого кода SVG, документ начинает быть похож на большой раздутый кусок дерьма.

Также есть вариант для вставки SVG на стороне сервера:

Оптимизация SVG

Adobe Illustrator не производит по умолчанию действия по оптимизации получаемого SVG изображения. Он предоставляет DOCTYPE и заметки, и всё это по большому счёту мусор. SVG по умолчанию имеет довольно небольшой вес, но почему бы не сделать его ещё меньше? Peter Collingridge предоставил онлайн инструмент для оптимизации SVG Optimiser. С помощью этого сервиса вы можете закачать старый файл и получить оптимизированный новый.

Если хотите больше хардкора – без проблем, вот инструмент для оптимизации SVG с помощью серверного javascript Node JS tool https://github.com/svg/svgo

Стилевое оформление SVG

Видите, как SVG похож на HTML? Это потому что они оба являются данными XML. В нашем дизайне есть два элемента, которые составляют основу, это ellipse и path. Мы можем без проблем указать им классы через HTML код.

Сейчас мы можем контролировать эти элементы с помощью специального SVG CSS. Этот CSS не должен напрямую встраиваться в SVG, он может быть расположен абсолютно в любом месте. Обратите внимание, что SVG элементы имеют специальный набор стилей, которые созданы специально для работы с векторной графикой. Например, используется не обычный background-color, а fill. Хотя некоторые обычные стили также работают, например:hover.

Kiwi { fill: #94d31b; } .kiwi:hover { fill: #ace63c; }

В SVG имеются забавные фильтры. Например размытие:

...

Затем вы можете при необходимости применить это в css:

Ground:hover { filter: url(#pictureFilter); }

Вот, что получилось:

Check out this Pen!

Поддержка “inline” SVG браузерами

Список браузеров, поддерживающих данный режим отображения SVG можно посмотреть здесь http://caniuse.com/#feat=svg-html5. Опять же, поддержки нет в IE8 и Android 2.3.

Один из вариантов фолбэка для такого типа SVG:

...

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

Logo-fallback { display: none; /* Make sure it"s the same size as the SVG takes up */ } .no-svg .logo-fallback { background-image: url(logo.png); }

Использование SVG в качестве объекта object

Если использование “inline” SVG вам не по душе (помните, что у этого варианта есть недостатки, например отсутствие кеширования), вы можете связать SVG с объектом object и потом менять его с помощью css:

Для кроссбраузерной поддержки используем Modernizr:

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

Этот вариант отлично работает с кешированием и имеет самую большую поддержку браузерами, чем все вышеперечисленные. Но, чтобы подействовать с помощью CSS на такой объект, придётся прописывать стили непосредственно в SVG файл.

...

Использование Data URI вялется способом уменьшения веса SVG. Mobilefish.com предоствляет онлайн инструмент оптимизации для этой цели. Достаточно вставить содержимое вашего SVG файла и заполнить форму, далее результат будет отображён в текстовом поле, который можно скопировать. Выглядит это так:

​

Вы можете использовать этот код где угодно! Нпример:

Logo { background: url(data:image/svg+xml;base64,); }

И кстати, если у вас есть встроенные style в SVG, который находится до base64, он будет работать, если вы используете его, как object!