Содержание

Заливка и обводка — SVG

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

Раскраска (Painting)

Основная раскраска может быть сделана установкой двух свойств на ноде — fill и stroke. Fill — устанавливает цвет внутри объекта, а stroke задаёт цвет линии, которая рисуется вокруг объекта. Вы можете использовать CSS-наименования цветов, что и в HTML — названия цветов (например, red), rgb-значения, hex-значения, rgba-значения и т.д.

 <rect x="10" y="10" stroke="blue" fill="purple"
       fill-opacity="0.5" stroke-opacity="0.8"/>

Кроме того, вы можете задать прозрачность заливке и обводке по отдельности в SVG. Их прозрачность управляется атрибутами fill-opacity, stroke-opacity.

Замечание: в Firefox 3+ допустимы rgba-значения и это даёт такой же эффект прозрачности, но для совместимости с другими просмотрщиками часто лучше определить прозрачность обводки/заливки отдельно. Если вы укажете и rgba-значение и значение fill-opacity/stroke-opacity — будут применены оба.

Обводка (Stroke)

Кроме цветовых свойств обводки, есть несколько атрибутов, управляющих способом обводки.

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/>
  <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/>
  <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/>
</svg>

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

Второй атрибут, влияющий на обводку — свойство stroke-linecap. Демонстрируется выше. Свойство управляет отображением концов линий.

Есть три возможных значения для stroke-linecap:

  • butt обрывает линию под прямым углом к направлению обводки и делает это сразу по окончании линии.
  • square в основном действует также, но немного растягивает обводку по краям пути. Длина, на которую продлевается обводка — это половина заданного значения stroke-width.
  • round задаёт закруглённые углы по краям обводки. Радиус этих кривых также управляется параметром stroke-width.

Используйте stroke-linejoin, чтобы определить, как соединять обводку двух сегментов линии.

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20"
      stroke-linecap="butt" fill="none" stroke-linejoin="miter"/>

  <polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20"
      stroke-linecap="round" fill="none" stroke-linejoin="round"/>

  <polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20"
      stroke-linecap="square" fill="none" stroke-linejoin="bevel"/>
</svg>

Каждая из этих полилиний имеет два сегмента. Соединение, где они встречаются, управляется атрибутом stroke-linejoin. Есть три возможных значения для этого атрибута:

  • miter продолжает линию обводки дальше её обычной ширины, чтобы создать единственный квадратный угол.
  • round создаёт закруглённый сегмент линии
  • bevel создаёт новый угол для помощи в переходе между двумя сегментами

Наконец, вы можете использовать пунктирные линии в обводке, определив атрибут stroke-dasharray.

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black"
    stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/>
  <path d="M 10 75 L 190 75" stroke="red"
    stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/>
</svg>

В качестве аргумента атрибут stroke-dasharray принимает последовательность чисел, разделённых запятой.

Замечание: в отличие от путей, эти числа ДОЛЖНЫ быть разделены запятыми (пробелы игнорируются).

Первое число определяет длину штриха, второе — длину между штрихами. В примере выше, второй путь чередует заливку штрихом в 5 пикселей, затем 5 пустых пикселей перед следующим штрихом в 5 пикселей. Вы можете задать больше чисел, если хотите более сложную систему штрихов. В первом примере задано 3 числа и в этом случае рендер берёт эти числа дважды, чтобы создать чётный паттерн. Т.о. первый путь отображается 5 закрашенными, 10 пустыми, 5 закрашенными и затем ещё раз 5 пустыми, 10 закрашенными, 5 пустыми «пикселями». Затем паттерн повторяется.

Также есть дополнительные stroke и fill свойства: fill-rule, которое определяет как будут заливаться сложные фигуры, которые имеют пересечения внутри себя; stroke-miterlimit, which determines if a stroke should draw miters и stroke-dashoffset, который указывает где начинается dash-array в линии (позволяет задать смещение пунктирной обводки относительно первоначального положения)

В дополнение к установке атрибутов объектов, вы также можете использовать CSS для стилизации заливки и обводки. Не все атрибуты могут быть установлены через CSS. Но атрибуты взаимодействия с раскраской и заливкой обычно доступны, так что fill, stroke, stroke-dasharray и т.д. могут быть заданы этим способом, также как и градиенты, и паттерны, что показано ниже. Атрибуты вроде width, height или команд для путей SVG не могут быть установлены через CSS. Проще всего просто протестировать и узнать, что доступно, а что нет.

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

CSS может использоваться инлайн через атрибут style:

 <rect x="10" y="10"/>

или может быть помещён в специальную стилевую секцию, которую вы включите. Вместо отображения такой секции в разделе <head>, как это делается в HTML, она включается в зону <defs>, предназначенную для определений. Здесь можно создавать элементы, которые не появятся сами в SVG, но будут использованы другими элементами.

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <style type="text/css"><![CDATA[
       #MyRect {
         stroke: black;
         fill: red;
       }
    ]]></style>
  </defs>
  <rect x="10" y="10"/>
</svg>

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

 #MyRect:hover {
   stroke: black;
   fill: blue;
 }

Также можно определить отдельный файл стилей для ваших CSS-правил через обычный XML-stylesheet синтаксис:

<?xml version="1.0" standalone="no"?>
<?xml-stylesheet type="text/css" href="style.css"?>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect/>
</svg>

где style.css выглядит примерно так

#MyRect {
  fill: red;
  stroke: black;
}

заливка и обводка • Про CSS

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

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

В качестве заливки и обводки можно задавать none, цвета, ключевые слова (currentColor и transparent), а также градиенты и паттерны.

fill

Заливка элемента.

Возможные значения: none, ключевые слова, цвета, паттерны и градиенты.
Значение по умолчанию — black.

<svg>
  <defs>
    <symbol>
      <rect/>
    </symbol>
    <linearGradient
      x1="0%" y1="0%"
      x2="0%" y2="90%"
    >
      <stop offset="0%" stop-color="yellowgreen" />
      <stop offset="90%" stop-color="green" />
    </linearGradient>
  </defs>

  <use xlink:href="#s-rect"
    x="20" y="20"
    fill="hsla(348, 83%, 47%,.3)"/> 
  <use xlink:href="#s-rect"
    x="110" y="20"
    fill="rgb(255, 215, 0)"/> 
  <use xlink:href="#s-rect"
    x="20" y="110"
    fill="url(#g-green)"/> 
  <use xlink:href="#s-rect"
    x="110" y="110"
    fill="skyblue"/> 
</svg>

fill-rule

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

Возможные значения: nonzero, evenodd

fill-rule="nonzero" интересно ведет себя для фигур из двух путей. Например, если внешний круг нарисован по часовой стрелке, а внутренний в обратном направлении, центральный круг останется без заливки (слева). Если же оба круга нарисованы в одном направлении — фигура зальется полностью (справа):

fill-opacity

Управление прозрачностью заливки. Можно задавать значения от 0.0 до 1.0 или в процентах. Правда, Firefox не любит значения в процентах для градиентов (пруфлинк, смотреть в FF).


<use xlink:href="#s-rect"
  x="20" y="20"
  fill="url(#g-red)" fill-opacity=".5"/>
<use xlink:href="#s-rect"
  x="50" y="50"
  fill="hsl(50, 100%, 50%)" fill-opacity=".5"/>
<use xlink:href="#s-rect"
  x="80" y="80"
  fill="url(#g-green)" fill-opacity=".5"/>

stroke

Цвет обводки. Значения по умолчанию нет.

<svg>
  <rect x="20" y="20"
    fill="none"
    stroke="yellowgreen"/>
</svg>

stroke-width

Толщина обводки, можно задавать в единицах длины или в процентах.
Значение по умолчанию: 1.

<svg>
  <rect x="50" y="50"
    fill="none" stroke="gold"
    stroke-width="10"/>
  <rect x="20" y="20"
    fill="none" stroke="yellowgreen"
    stroke-width="10%"/>
</svg>

stroke-linecap

Свойство определяет как будут выглядеть концы линий.
Возможные значения: butt, round, square.
Значение по умолчанию: butt.


  <use xlink:href="#s-path" stroke="orangered" y="20"
    stroke-linecap="butt"/>

  <use xlink:href="#s-path" stroke="olivedrab" y="85"
    stroke-linecap="round"/>

  <use xlink:href="#s-path" stroke="steelblue" y="150"
    stroke-linecap="square"/>

stroke-linejoin

Определяет как будут выглядеть соединения линий на углах.
Возможные значения: miter, round, bevel.
Значение по умолчанию: miter.


  <use xlink:href="#s-corner" stroke="orangered" y="0"
    stroke-linejoin="miter"/>

  <use xlink:href="#s-corner" stroke="olivedrab" y="80"
    stroke-linejoin="round"/>

  <use xlink:href="#s-corner" stroke="steelblue" y="160"
    stroke-linejoin="bevel"/>

stroke-dasharray

Управляет видом пунктирной обводки. Можно задавать в единицах длины или в процентах.
Если задано одно значение, второе значение считается равным первому. Например, stroke-dasharray="1" нарисует линию из отрезков длиной одну единицу разделенных пробелами такой же ширины.

Примеры разных пунктирных линий:

<svg>
  <path d="M 20 20 h 260"
    stroke="purple" stroke-width="1"
    stroke-dasharray="1" />
  <path d="M 20 40 h 260"
    stroke="mediumspringgreen" stroke-width="15"
    stroke-dasharray="1 3" />
  <path d="M 20 60 h 260"
    stroke="orangered" stroke-width="1"
    stroke-dasharray="5%" />
  <path d="M 20 80 h 260"
    stroke="green" stroke-width="1"
    stroke-dasharray="1 5" />
  <path d="M 20 100 h 260"
    stroke="steelblue" stroke-width="1"
    stroke-dasharray="2 7 6" />
  <path d="M 20 120 h 260"
    stroke="orange" stroke-width="5"
    stroke-dasharray="5" />
  <path d="M 20 140 h 260"
    stroke="mediumseagreen" stroke-width="1"
    stroke-dasharray="12% 5%" />
</svg>

Используя обводку и простые фигуры можно получить удивительные вещи:

Также stroke-dasharray интересно сочетается с анимацией:

stroke-dashoffset

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

В этом примере оранжевые и желтые линии смещены относительно красной с помощью разных значений stroke-dashoffset:

<svg>
  <g fill="none"
    stroke-width="15"
    stroke-dasharray="25% 110%"
    transform="rotate(72 135 135)">
    <circle r="115" cx="135" cy="135"
      stroke="crimson"/> 
    <circle r="115" cx="135" cy="135"
      stroke="orangered"
      stroke-dashoffset="25%"/> 
    <circle r="115" cx="135" cy="135"
      stroke="gold"
      stroke-dashoffset="50%"/> 
  </g>
</svg>

Сочетая stroke-dashoffset и stroke-dasharray можно получить интересные эффекты.

Для полноценного просмотра воспользуйтесь браузерами на Webkit. Ссылка на полную версию.

Для перезапуска нажмите Rerun.

Несколько вдохновляющих ссылок про анимацию на stroke-dashoffset:

stroke-opacity

Прозрачность обводки. Задаются значения от 0.0 до 1.0.

<svg>
  <g fill="none"
    stroke-width="15">
    <circle r="40" cx="60" cy="60"
      stroke="crimson"
      stroke-opacity=".7"/>
    <circle r="55" cx="100" cy="100"
      stroke="orangered"
      stroke-opacity=".5" />
    <circle r="40" cx="140" cy="140"
      stroke="gold"
      stroke-opacity=".25"/>
  </g>
</svg>

Анимация обводки позволяет получить совершенно удивительные вещи. Правда, я в своих примерах использовала CSS (и это демо не играет в Firefox) и SVG-анимацию, которая работает таки везде, но задается странно, длинно и неудобно. Думаю, что оптимальнее всего для анимации SVG использовать JavaScript-библиотеки.

Нативный способ покрасить SVG-иконки / Блог компании TINKOFF / Хабр

Когда вам нужна возможность менять цвет иконок через CSS, что вы делаете? Вариантов не так много.

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

Чтобы защититься от вредоносного кода SVG нужно «почистить». Встроенный в Angular санитайзер, к примеру, не работает с SVG и превращает их в пустую строку. Можно воспользоваться проверенным инструментом DOMPurify и подключить его с помощью нашей библиотеки ng-dompurify, о чем я подробно рассказывал.

Давайте посмотрим на еще один способ, доступный в современных браузерах, — тэг USE.

Чем нам полезен USE?

Этот тэг задуман для переиспользования символов и целых SVG-блоков на странице. Но в современных браузерах (прости, IE) он может даже доставать внешние ресурсы!

Внешние SVG должны быть на том же домене, так что CDN не подойдет. Пока.

Это позволяет нативным образом вставить SVG в Shadow DOM, почти как тэг IMG с атрибутом src, только с возможностью использовать CSS. И оно даже само работает с кэшем! Но нужно слегка подготовить иконки. Вот что надо сделать:

Сначала в каждой иконке нужно сделать символ с уникальным id и переместить viewBox в него.

Затем надо назначить fill (или stroke) на currentColor, чтобы потом использовать CSS-правило color для задания цвета. Можно также задать эти атрибуты в inherit на других элементах, что позволит сделать двухцветные иконки (подробнее — в примере ниже).

Когда наши иконки подготовлены, остается только скинуть их в папку assets и использовать:

Компонент именованных иконок для Angular

Писать путь и обращаться к символу каждый раз утомительно. Давайте сделаем Angular-компонент, который будет находить иконки по имени. С помощью Dependency Injection это сделать очень просто.

Нам понадобится токен для предоставления пути до всех наших иконок и простой компонент. Он будет формировать href исходя из имени и заданного пути. Мы даже можем повесить его на нативный SVG с помощью селектора: так мы вынесем наружу заботу о размере.

Надо иметь в виду, что Safari до 12.1 поддерживает только устаревший синтаксис xlink:href. Так что лучше использовать оба варианта.

Сделаем stroke и fill прозрачными для использования нескольких цветов в CSS:

Живой пример: stackblitz.com/edit/angular-colored-svg

Заключение

У этого подхода есть ограничения — отсутствие поддержки IE и кросс-доменности. Однако, если они для вас не критичны, данное решение может стать хорошей альтернативой другим способам.

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

Практическое руководство о SVG в вебе

Подготовка SVG для использования в вебе это очень простой процесс, не сложнее экспорта JPEG или PNG. Используйте любой привычный для вас графический редактор (Illustrator, Sketch, Inkscape [бесплатен], и тому подобное [или даже Photoshop, если вы используете слои с формами]) с тем размером изображения, который вы планируете использовать. Обычно я работаю в Иллюстраторе, поэтому я объясню некоторые способы подготовки файлов в этой программе, но вообще они применимы и для любой другой программы. Вам, возможно, стоит перевести текст в кривые, поскольку шрифт, скорее всего, будет неправильно отображаться, если, конечно, вы не планируете стилизовать их с помощью веб-шрифта, используемого на странице (что возможно!). Не стоит также превращать все объекты в единые формы, особенно если у вас есть обводка, которой необходимо будет управлять на странице, тем более преобразование объектов зачастую не уменьшает размер файла. Любые имена, присвоенные группам или слоям, будут добавлены к SVG как ID элемента. Это довольно удобно для стилизации, но немного увеличит общий размер файла.

Перед тем как сделать экспорт, необходимо проверить, все ли изображения находятся в целочисленной пиксельной сетке (то есть, например не 23.3px × 86.8px). В противном случае скорее всего изображению не будет хватать чёткости и часть изображения обрежется. В Иллюстраторе это можно сделать следующим образом: Object > Artboards > Fit to Artwork Bounds. Затем жмём save as и выбираем SVG, и оставляем настройки по умолчанию. Здесь можно сделать небольшую оптимизацию, но на самом деле не стоит, так как далее мы будем применять разные улучшающие приёмы, поэтому сейчас мы не будем тратить впустую время на эти настройки.

Приёмы для уменьшения размеров файла.

(Смотрите ресурсы по оптимизации)

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

Чтобы добиться наименьшего размера SVG, логично будет удалить из него всё лишнее. Наиболее известная и полезная программа (по крайней мере я так думаю) для обработки SVG это SVGO. Она удаляет весь не нужный код. Но! Будьте внимательны используя эту программу, если планируете управлять SVG при помощи CSS / JS, так как она может слишком сильно почистить код, что затруднит дальнейшие изменения. Удобство SVGO ещё и в том, что её можно включить в процесс автоматической сборки проекта, но можно также использовать GUI если хочется.

Разбираясь подробнее с правильным удалением всего ненужного, мы можем сделать ещё кое-что в графическом редакторе. Сперва нужно убедиться, что используется настолько мало контуров/форм, насколько это возможно, так же как и точек на этих контурах. Можно объединять и упрощать всё, что поддаётся упрощению, и удалить все ненужные точки. В Иллюстраторе есть плагин VectorScribe с инструментом Smart Remove Brush Tool, который поможет удалить точки и при этом оставить общую форму той же.

Предварительная оптимизация

Smart Remove Brush Tool удалил точки

Дальше будем увеличивать изображение. В Иллюстраторе удобно включить просмотр с пиксельной сеткой View > Pixel Preview и проверить, как располагаются контуры. Чтобы разместить контуры по сетке, потребуется немного времени, но эти усилия окупятся и позволят добиться более чёткого рендеринга (лучше обратить на это внимание заранее).

Точки вне сетки

Выравнивание по сетке

Если есть два и более объекта для выравнивания, то стоит удалить все ненужные перекрытия. Иногда даже если контуры тщательно выровнены, может быть видна тонкая белая линия. Чтобы предотвратить такое, можно немного наложить объекты друг на друга в местах перекрытия. Важно: в SVG z-index имеет определённый порядок, который зависит от объекта, находящегося снизу, поэтому стоит поместить верхний объект в нижнюю часть файла в коде.

И, наконец, последнее, но немаловажное, то, о чём обычно забывают — это активировать gzip сжатие SVG на вашем сайте в .htaccess файле.

AddType image/svg+xml svg svgz
<IfModule mod_deflate.c>
  <IfModule mod_filter.c>
      AddOutputFilterByType DEFLATE "image/svg+xml" \
                                    "text/css" \
                                    "text/html" \
                                    "text/javascript"
                                    ... etc
  </IfModule>
</IfModule>

В качестве примера того, насколько эффективна эта техника, я воспользуюсь оригинальным логотипом Breaking Borders и оптимизирую его таким образом: увеличиваю размер до того, каким он должен быть; приведу в порядок контуры; удалю максимально возможное количество точек; передвину точки на целочисленные пиксели; сдвину все области перекрытий и отправлю это всё в SVGO.

Оригинал: 1,413b
После оптимизации: 409b

В итоге размер файла стал меньше на ~71% (и на ~83% при сжатии)

Дополнение: Rob Sterlini заметил, поскольку «b» повторяется, можно использовать элемент <use>, для повторения, что ещё больше уменьшит размер файла — и был абсолютно прав.

После оптимизации с использованием <use>: 311b

Размер файла стал меньше на ~78%

Если применить эту технику ко всем файлам SVG, это значительно улучшит ваш сайт.

css — простой способ изменить цвет для изображения SVG?

Вы можете сделать это легко, добавив встроенный SVG, просто откройте SVG в редакторе кода / текста и скопируйте и вставьте код в файл редактора кода. Затем вы можете использовать fill: color; для адресации цвета в SVG.

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

Использование ширины : 100%; Высота и : авто; позволит SVG заполнить контейнер, в котором он находится.

Пример ниже.

  .animal-svg {
  ширина: 192 пикс;
}

.animal-svg svg {
  маржа: 0;
  ширина: 100%;
  высота: авто;
  заливка: красный;
}  
  

Если вы действительно не хотите использовать встроенный SVG, вы можете использовать этот ответ из другого вопроса: Как изменить цвет изображения SVG с помощью CSS (замена изображения SVG jQuery)?

ИЗМЕНИТЬ
См. Пример ниже, встроенный стиль (как в вашем комментарии) отменяется CSS (.животное-svg svg .st0 ).

  .animal-svg {
  ширина: 192 пикс;
}

.animal-svg svg {
  маржа: 0;
  ширина: 100%;
  высота: авто;
  заливка: красный;
}

.animal-svg svg .st0 {
  заливка: красный;
}  
  
<svg>
  <g fill="none"
    stroke-width="15"
    stroke-dasharray="25% 110%"
    transform="rotate(72 135 135)">
    <circle r="115" cx="135" cy="135"
      stroke="crimson"/> 
    <circle r="115" cx="135" cy="135"
      stroke="orangered"
      stroke-dashoffset="25%"/> 
    <circle r="115" cx="135" cy="135"
      stroke="gold"
      stroke-dashoffset="50%"/> 
  </g>
</svg>
<путь d = "M450 85.7c-17,7 7,6-35,4 12,4-53,1 14,3 20-12 33,5-28,9 40,5-50,8 -18,3 10,8-37,8 18,3-58,5 22,3 -18,3-19,4-40,7-29,1-67,4-29,1 -25,5 0-47,2 9-65,2 27 - 18 18-27 39,7-27 65,2 0 6,9 0,8 13,9 2,3 21,1 -37,7-1,9-73-11,4-106,1-28,4 C82,5 110,2 54,4 87,5 31,4 59,1c-8,4 14,3-12,6 29,8-12,6 46,5 0 15,8 3,7 30,5 11,1 44 7,4 13,5 17,4 24,5 30 32,8 -14,8-0,6-28,7-4,5-41,7-11,7v1.1c0 22,3 7 41,8 21 58,7 14 16,8 31,6 27,5 53 31,8 -8 2,1-16,1 3,1-24,3 3,1 -5,3 0-11,1-0,5-17,4 -1,4 5,9 18,5 16,8 33,6 32,5 45,5 15,8 11,9 33.7 18 53,7 18,4 -33,5 26,3-71,7 39,4-114,5 39,4 -8,2 0-15,6-0,4-22,3-1,1 42,8 27,6 90 41,4 141,6 41,4 32,7 0 63,5-5,2 92,2-15,6 28,7-10,4 53,3-24,3 73,7-41,7 20,4-17,4 37,9-37,4 52,7-60,1 14,8-22,7 25,7-46,3 33-70,9 7,2-24,7 10,8-49,3 10,8-74,1 0-5,3-0,1-9,3-0,3-12C421,8 120,2 437,2 104,3 450 85,7z "/>

Изменить цвет встроенного SVG с помощью CSS

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

Значки шрифтов, такие как Font Awesome, великолепны, и они предоставляют огромное количество готовых к использованию и масштабируемых форм, которые можно легко использовать на веб-странице, однако наличие такого количества фигур имеет обратную сторону по размеру и, следовательно, к скорости сайта. Хотя существуют такие инструменты, как приложение icomoon, которые могут создавать настраиваемый набор из этих значков шрифтов, я решил пойти со встроенным SVG-подходом, так как считаю его более гибким в долгосрочной перспективе.

Создание SVG из значков шрифтов

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

Встроенный SVG цвет

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

 svg {
  заполнить: # 27ae60;
} 

Вы можете найти полную демонстрацию в следующем коде. Иконки SVG, которые я использовал здесь, созданы из иконок Font Awesome.

Просмотрите фигуры Pen SVG с заливкой с помощью CSS, автор — Канишк Кунал на CodePen.0

Если вы используете программу чтения RSS-каналов или по какой-либо причине вставка, указанная выше, не отображается, посетите страницу Pen live на CodePen

.

Inline SVG и иконочные шрифты

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

Встроенный SVG и иконочные шрифты

Почему и как я отказался от шрифтов со значками в пользу встроенного SVG

Цвет для значков и элементов SVG с currentColor

Создание многоразовых значков SVG и согласованной цветовой темы для компонентов при сохранении коротких таблиц стилей теперь возможно с currentColor — переменной CSS Module 3. Но что такое currentColor ? И как добиться согласованности цвета и создать с его помощью многоразовые значки SVG?

Давайте узнаем.


Что такое

currentColor ?

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

Короче говоря, значение currentColor = значение свойства closet color .

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

Например, чтобы присвоить currentColor значение blue :

 
h2 {
 currentColor: синий;
}


h2 {
 цвет синий;
}
  

Мы можем сопоставить значение currentColor любому свойству, которое может получать цвет. Давайте посмотрим на следующий пример:

  

Тень моего блока должна быть синей

Предположим, у нас уже есть цвет из h2 установлен на синий .Мы можем назначить значение цвета границы на currentColor , как показано ниже:

  .blue-border {
 граница: сплошная 1px currentColor;
}
  

Когда мы добавляем blue-border к h2 element

  

Моя граница должна быть синей

Результат будет:

Граница теперь того же цвета, что и текст. Просто как тот.

Следующий вопрос — что, если мы не зададим цвет текста для h2 , как currentColor подберет правильный цвет?

Наследование цвета с ключевым словом

currentColor

Как и другие переменные CSS, он следует правилу каскадирования, что означает, что если в наборе правил CSS элемента не существует свойства color , он унаследует свойство color от ближайшего предка компонента.Если в каком-либо предке нет color , currentColor автоматически получит резервное значение, определенное браузером, которое, скорее всего, является черным.

Возьмем следующую древовидную структуру DOM, например:

  
     
    
    

, в котором элемент div # section имеет фиолетовый цвет с классом purple , элемент div # box-wrapper имеет класс green , а наш целевой элемент div # box-1 имеет синий класс по цвету.Для экспериментов мы добавляем следующее к любому элементу с классом box (включая наш целевой элемент)

  фон: currentColor;
  

Ниже описывается, как наследование цвета работает для currentColor для элемента div # box-1 и div # box-2 в соответствии со структурой выше

Более подробная схема объяснения приведена ниже:

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

Итак, какое свойство не требует помощи currentColor , а какое -?

Наследование цвета в CSS

Многие свойства CSS имеют по умолчанию наследование цвета, в том числе:

  • цвет рамки
  • граница
  • контур и цвет контура для текстового элемента
  • цвет
  • тень коробки

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

Возьмем, например, следующее:

  
  • Элемент списка 1
  • Элемент списка 2
  • Элемент списка 3

При изменении цвета родительского блока div , цвет всех связанных свойств и текстовых элементов также изменяется.

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

Давайте посмотрим на эти варианты использования, не так ли?

Создайте компонент многоразового значка с SVG и

currentColor

Использование SVG для значков является рекомендуемой практикой по многим веским причинам. И есть много подходов к созданию многоразового компонента значка SVG. Простой метод — создать SVG-спрайт с , используя и символов элементов.

Создание спрайтов SVG с использованием

Самый простой — создать контейнер для значков, используя в качестве спрайта элемент .Мы оборачиваем каждый значок и повторно используем его с , используя . — это вложенный элемент SVG, который позволяет нам определять значок, не отображая его на экране. Только когда есть ссылка на этот значок с использованием элемента . Рассмотрим, например, следующий контейнер спрайтов значков SVG:

  <тело>
    
        
        
    

  

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

  <кнопка>
  
     
  
    Люби меня!

  

И немного CSS, чтобы выровнять содержимое кнопки.

  .favorite-btn {
  дисплей: гибкий;
  align-items: center;
}
  

Вот и все. Кнопка будет иметь вид:

Что, если мы хотим, чтобы эта кнопка отображала белый текст на фиолетовом фоне?

Добавление цвета

Для фона и цвета текста кнопки мы можем добавить стили CSS к кнопке в соответствии с ее классом favourite-btn , как показано ниже:

  .favorite-btn {
    
  фон: # 3d1472;
  цвет белый;
}
  

Кнопка выглядит так:

Цвет значка, к сожалению, не синхронизируется с текстом кнопки.Чтобы изменить его цвет, мы можем использовать свойство fill с правильным значением:

  .favorite-btn svg {
  заливка: белый;
}
  

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

Если мы хотим изменить цвет текста кнопки на серый при наведении курсора и соответственно сопоставить цвет значка, нам нужно будет добавить два дополнительных набора правил в файл CSS:

  .favorite-btn: hover {
  цвет: серый; // цвет текста кнопки
}

.избранное-btn: hover svg {
    заливка: серый; // цвет иконки
}
  

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

Есть ли лучшее решение? Используйте currentColor 😉

Просто установите значение от fill до currentColor для любого элемента svg :

  svg {
    fill: currentColor;
}
  

Нам больше не нужен стиль CSS для селектора favourite-btn svg .Итак, наш код CSS теперь будет:

  .favorite-btn {
  фон: # 3d1472;
  цвет белый;
}

.favorite-btn: hover {
    цвет: серый;
}

svg {
  fill: currentColor
}
  

И цвет нашего значка автоматически будет соответствовать цвету текста кнопки. Кроме того, изменение цвета текста кнопки потребует изменения только стиля CSS контейнера кнопки. Меньше кода, более короткий файл CSS и меньше ошибок 🐛.

Легко, правда? Не стесняйтесь опробовать демонстрацию кода здесь

Как насчет следующего варианта использования — темы с currentColor ?

Theming с

currentColor и пользовательскими переменными CSS

Ранее я показал и написал сообщение о том, как динамически настраивать тему темного / светлого режима с помощью пользовательских переменных CSS.Какие еще преимущества currentColor может добавить к тематике?

Предположим, у нас есть ползунок для диапазона ввода:

И мы хотим добиться единообразия внешнего вида темного / светлого режима в соответствии со следующими темами:

С помощью пользовательских переменных CSS мы можем определить основной цвет для приложения, как показано ниже

 : root {
    --page-bg-dark-mode: # 808080;
    --page-color-dark-mode: # 69bac9;
  --page-color-light-mode: # 0b4491;
}

.dark-mode {
  фон: var (- page-bg-dark-mode);
  цвет: var (- цвет страницы темный режим);
}

.light-mode {
  цвет: var (- цвет-свет-режим страницы);
}
  

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

  .input-range {
  
  цвет фона: currentColor;
  цвет: наследовать;
}
  

И тада 🎉, получаем компонент, реагирующий на смену темы

Отлично.Здесь вы можете поэкспериментировать с полным кодом и легко добавить дополнительные компоненты, такие как слайдер, флажок и т. Д., Чтобы создать свою собственную систему дизайна. В конце концов, а почему бы и нет?


Сводка

Большие файлы CSS вызывают более длинный TTFB (время до первого байта) и первую отрисовку, что снижает общую производительность сайта. Кроме того, их труднее читать и поддерживать в долгосрочной перспективе. С currentColor мы наконец можем автоматизировать создание тем, сохраняя при этом короткий CSS, в сочетании с другими инструментами, такими как пользовательские переменные.Кроме того, мы наконец-то можем применить KISS к таблицам стилей CSS и сделать их СУХИМИ (не повторяйтесь), так чего же еще вы ждете?

Есть новые витрины с currentColor ? Ударь меня 🔥.

👉 Если вы хотите иногда встретиться со мной, подпишитесь на меня в Twitter | Facebook.

Понравился этот пост или нашел его полезным? Поделитесь им 👇🏼 😉

Научитесь стилизовать файлы SVG в WordPress: OrganicWeb

Я использую файлы SVG на своих веб-сайтах вместо файлов изображений везде, где могу.Мне нравится легкость изменения свойств SVG-изображения, таких как цвет. В частности, небольшой размер файла (по сравнению с изображением в формате PNG или JPEG) и возможность масштабирования при сохранении визуального качества являются для меня победителями.

WordPress по умолчанию не позволяет вставлять встроенный SVG в страницы или сообщения. Импорт в медиа-библиотеку также по умолчанию запрещен. Доступны плагины, которые в основном позволяют добавлять файлы SVG в медиатеку, а затем отображать файл SVG с помощью тега IMG.Проблема с этим методом заключается в том, что затем невозможно настроить свойства SVG с помощью CSS. Например, если вы хотите изменить цвет SVG, вставленного в WordPress с помощью тега IMG, тогда .class {fill: #ffffff; } и .class {color: #ffffff; } , ни какие-либо другие средства работать не будут.

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

Плагин для добавления и встраивания SVG в WordPress

SVG Support — это плагин, который решает за нас различные проблемы WordPress с SVG.Плагин делает следующее:

  1. Позволяет добавлять файлы SVG в медиатеку WordPress.
  2. Вставляет файлы SVG на страницы и сообщения внутри тега HTML IMG.
  3. При желании добавляет новый класс к вставленному тегу IMG
  4. Дополнительно встраивает изображение SVG.

Последние два пункта выше по умолчанию не включены при активации плагина. Для включения двух опций:

  1. Перейти на страницу настроек плагина.
  2. Нажмите «Да» рядом с Включить расширенный режим? вопрос.
  3. Сохраните изменение.
  4. Нажмите «Да» рядом с Автоматически вставлять класс? вопрос.
  5. Сохраните изменение.

Как стилизовать изображения SVG в WordPress

Теперь, когда SVG встроен в вашу страницу или сообщение, вы можете использовать CSS для стилизации «изображения». Плагин поддержки SVG по умолчанию добавляет класс style-svg к каждому встроенному SVG. Это означает, что, например, чтобы изменить цвет файла, вы добавите следующий CSS:

.style-svg {
    заполнить: #fff;
} 

Удачи. Теперь вы можете использовать CSS в WordPress для стилизации изображений SVG.

Нашли это полезным? Поделитесь, пожалуйста:

Связанные

Цвет изображения SVG с CSS

Привет,

Рад, что вам понравился мой плагин 🙂

Не могли бы вы дать ссылку на сайт?

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

Например:

.your-svg-class {fill: red; красный цвет; }

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

Надеюсь, это поможет. Дай мне знать, как дела.

PS. Я работаю над веб-сайтом, где есть несколько советов и руководств. ETA пока нет, но он находится в процессе разработки.

Привет,
Сайт по-прежнему локальный, но я использую плагин для вставки только иконок.
Я уже пытался сделать, как вы говорите, но не вышло.
Должен ли я сохранять файл svg определенным образом?

Спасибо

Привет,

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

Привет,
Я пробовал и пробовал еще раз.
Внутри WPbakery и внутри обычной статьи WP ничего не окрашено.
Прилагаю тестовый svg.
https://www.dropbox.com/s/ugo0u01k0jyw7e0/SVGtest.svg?dl=0

Спасибо

Вам нужно убедиться, что SVG отображается встроенным, иначе CSS не коснется элементов в нем. Вы можете проверить, отображается ли он как код SVG или как тег IMG с SVG в качестве src.

CSS для воздействия на 2 элемента в предоставленном SVG будет:

  circle # Ellipse_97 {
    заливка: зеленый;
}
path # Path_461 {
    заливка: синий;
}  

Вы можете изменить цвета по своему усмотрению.

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

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

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

Спасибо

Привет,

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

У меня тоже такая проблема. У меня активирован расширенный режим, svg отображается встроенным, но не может настроить таргетинг на внутренние элементы с помощью css.

  • Этот ответ был изменен 1 год, 4 месяца назад пользователем Grafiker29.

Привет @ grafiker29

Вам действительно стоит начать свой собственный поток, даже если он кажется похожим.

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

ЕСЛИ ваш SVG является встроенным, это конец строки для моего плагина, остальное полностью внешнее.

Обычно, если вы не можете что-то изменить с помощью CSS, вам нужно повысить конкретность.

Например, если это не работает:
.your-svg-class {fill: red; }
Казалось бы, есть CSS более высокого уровня, который уже сообщает ему, какой цвет должен быть … ИЛИ у вас уже есть цвета, установленные в вашем коде SVG.

Вам просто нужно уточнить, насколько это возможно. Наиболее крайняя версия этого будет:
html body .your-svg-class {fill: red;}

Это может даже не сработать, это должно соответствовать вашему точному коду. Но я надеюсь, что это поможет.

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

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

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

Обеспечение работы одноцветных значков SVG в темном режиме

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

Что такое темный режим?

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

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

Темный режим доступен в последних версиях macOS и Windows 10, но также в виде надстройки браузера (надстройка темного фона и светлого текста для Firefox, расширение темного ночного режима для Chrome). В этом посте я буду называть темные режимы одной вещью, которая обычно работает одинаково в разных реализациях.На самом деле, конечно, могут быть несоответствия. Их может быть сложно протестировать удаленно, поскольку платформы тестирования, такие как Browserstack, не поддерживают темные режимы по соображениям безопасности.

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

Встроенные SVG-файлы на помощь

Предположим, у нашего сайта светлый фон с черными значками.Один из способов добавить значок SVG — использовать тег , указывающий на SVG. Вот пример значка шеврона:

    

(примеры на CodePen)

В Windows High Contrast, Dark Background и Light Text и Dark Night Mode значок просто не отображался. Я считаю, что причина в том, что темные режимы обычно анализируют только таблицы стилей, они игнорируют содержимое разметки (включая файлы SVG).В этих случаях они не заменят черный на белый.

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

  
  
  

Для тех, кто плохо знаком с currentColor : он разрешает любой цвет CSS (установленный или унаследованный) элемента, в котором используется svg .Таким образом, если инструмент обновляет все цвета на странице, SVG также автоматически меняют цвет. Он также популярен, потому что отлично работает с такими состояниями, как наведение: для значков с текстом цвета значков будут меняться всякий раз, когда вы меняете цвет текста.

Объявление поддерживаемых цветовых схем

После того, как я разместил это, Амелия Беллами-Ройдс любезно указала мне на предложение об объявлении предпочтения цветовых схем. Предлагается использовать свойство, которое вы можете установить на корневом уровне ( supported-color-scheme: light || dark ) или как метатег, чтобы браузеры могли быть в курсе, прежде чем они начнут анализировать CSS.Это свойство в основном позволяет вам сообщить браузеру, что ваш CSS поддерживает темные режимы и не нарушит их. Safari имеет экспериментальную поддержку этого свойства в Technology Preview 71.

Свойство supported-color-scheme предназначено для использования вместе с медиа-запросом prefers-color-scheme .

Заключение

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

Обновление 25-12-2018: добавлен раздел об объявлении цветовых схем.

Спасибо Шиме Видас, Амелии Беллами-Ройдс и Тимоти Хэтчеру за их отзывы и предложения.

Использование CSS для анимации цвета элементов в изображении SVG

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

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

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

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

Ниже приведен пример с веб-сайта Shufflehub. При наведении курсора на значок категории цвет линии меняется с черного на бирюзовый.

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

Реализация изменения состояния значка

Использование встроенных SVG-файлов

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

Они очень похожи на обычный HTML:

  
    
    
  

Мы не хотим использовать тег изображения, а вместо этого использовать код SVG непосредственно в нашем HTML-документе. Это результат (попробуйте на jsFiddle):

Обновление стилей значков при наведении

По большей части мы можем стилизовать элементы SVG так же, как и обычные элементы HTML.

Этот код CSS добавляет стиль наведения. Мы идентифицируем имя тега элемента, а затем указываем, какие свойства мы хотим обновить (заливка и обводка соответственно).

  svg: hover polygon {
    заливка: зеленый;
}
svg: hover circle {
    инсульт: салатовый;
}  

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

Если вы хотите изменить стиль только части SVG, вы можете сделать это, добавив классы к элементам SVG и выделив их в селекторе CSS.

Анимация перехода цвета

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

  svg * {
    переход: все 0,5 с;
}  

Приведенный выше код действует как уловка: каждый элемент внутри svg будет анимирован, а все свойства CSS будут обновляться постепенно. На практике это означает, что нам не нужно указывать тип компонента SVG (полойгон, круг,…) во встроенном SVG или соответствующие свойства (обводка и заливка).

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

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

Все современные браузеры поддерживают как встроенные SVG-файлы, так и переходы. Однако IE8 не поддерживает SVG, а IE9 не отображает переходные состояния.

Использование Grunt для объединения значков SVG и их сохранения в виде файла Javascript

Поскольку на веб-сайте Shufflehub используется множество значков категорий, мы не загружаем их по отдельности, а помещаем их в объект Javascript во время нашего процесса сборки Grunt (который также сжимает значки).

Мы используем Grunt ngTemplates как для наших HTML-шаблонов, так и для файлов SVG. Затем веб-сайт загружает значки в тот же файл Javascript, что и шаблоны HTML и обычный код Javascript.