Как поменять цвет svg картинки через css
Перейти к содержимому

Как поменять цвет svg картинки через css

  • автор:

Изменение цвета svg css. Стилизация SVG с помощью CSS: возможности и ограничения

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

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

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

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

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

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

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

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

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

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

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

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

AddType image/svg+xml svg svgz AddOutputFilterByType DEFLATE «image/svg+xml» \ «text/css» \ «text/html» \ «text/javascript» . etc

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

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

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

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

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

SVG атрибуты и CSS свойства

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

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

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

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

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

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

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

Реализовав этот пример, мы увидим, что при наведении курсора на элемент, с заданным для него классом example, цвет заливки изменится с красного на синий. Чтобы все это работало как следует, не вставляйте SVG с помощью тега img . Лучше используйте embed или iframe:

При использовании тега img сам SVG отобразится корректно. Но hover -эффект и переходы будут проигнорированы. Помимо свойства transition мы также можем использовать transform . В этом случае элементы будут масштабироваться или вращаться.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

svg > . svg > div class =»fallback» > div >

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

Добавляем SVG на страницу с помощью тега

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

object type =»image/svg+xml» data =»kiwi.svg» class =»logo» > Kiwi Logo object >

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

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

svg . > style > /* специальные CSS-фишки для SVG */ style > . svg >

Внешние файлы со стилями для SVG, вставленного с помощью

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

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

На этой странице показано, как использовать CSS со специальным языком для создания графики: SVG .

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

Общая информация: SVG

SVG (Scalable Vector Graphics) является подмножеством языка XML и предназначен для создания графики.

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

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

Кроме того, таблицы стилей, которые вы используете в других языках разметки документов, могут содержать ссылку на SVG графику, в тех местах, где необходимо изображение. Например, в таблице стилей, для вашего HTML документа, можно указать ссылку (URL) на SVG графику в свойстве background.

На момент написания статьи (середина 2011года), большинство современных браузеров имеет базовую поддержку SVG, в том числе Internet Explorer 9 и выше. Некоторые дополнительные возможности SVG не поддерживаются, либо поддерживаются лишь частично, в определенных браузерах. Для более подробной информации о текущей поддержке SVG, см. SVG tables on caniuse.com , либо в таблицах совместимости SVG element reference , для информации о поддержке отдельных элементов.

В остальные версии можно добавть поддержку SVG, установив дополнительный плагин, например, предоставленный компанией Adobe .

Более подробная информация о SVG в Mozilla, представлена на станице SVG в этой wiki.

За дело: Демонстрация SVG

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

SVG demonstration Mozilla CSS Getting Started — SVG demonstration

Move your mouse pointer over the flower.

Создайте новый файл CSS, style8.css . копируйте и вставьте содержимое блока ниже, убедитесь, что пролистали его полностью, чтобы скопировать все:

Откройте документ в вашем браузере с поддержкой SVG. Переместите указатель мыши на изображение.

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

Что дальше?

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

Категории

  • Интернет
  • Windows 10
  • Мультимедиа
  • Утилиты
  • Сеть и интернет
  • Системные программы
  • Настройка программ
  • Проблемы с ОС

Изменении цвета svg img , без js

Внутрь картинки вставленной через залезть нельзя никак.

13 апр 2017 в 16:19

Посмотрите второй ответ, — покраска CSS фильтрами. Хоть они и уступают по функиональности svg фильтрам, но их вполне можно успешно применять.

5 июн 2019 в 8:12

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

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

Но есть возможность изменить цвет фигур svg с помощью фильтров CSS или SVG.

Цвет SVG фильтра можно установить любой.

.container < width:100%; height:100%; background:#d3d3d3; overflow:hidden; >.container:hover < background: black; >img < filter: url(#filter_B); >img:hover 
 

2. Покрасить иконки в разные цвета при наведении, используя фильтр feColorMatrix

.R1:hover < filter:url(#RedFilter); >.G1:hover < filter:url(#GreenFilter); >.B1:hover

3. Покрасить иконки в разные цвета при наведении, используя комбинацию фильтров feComposite , feBlend

.icon < width:25vw; filter:url(#solid); >.icon:hover 
 

Как с помощью css изменить цвет svg картинки, если она вставлена тегом img?

допустим в html код в ставленна svg картинка:

Можно изменить её заливку (параметр fill) используя только css? Или без js тут никак не обойтись?

Знаю, что можно поменять заливку, если в html сразу вставлять код svg (path). Но уж очень не хочется этого делать(

  • Вопрос задан более трёх лет назад
  • 12365 просмотров

Комментировать
Решения вопроса 0
Ответы на вопрос 2

webinar

Учим yii: https://youtu.be/-WRMlGHLgRg

Svg как картинка в img — не управляется через css. Или код или как объект.
https://habrahabr.ru/post/99248/

Ответ написан более трёх лет назад
Нравится 1 4 комментария
smithana @smithana Автор вопроса

Спасибо, про вставку через объекты я не знал.
Но гугл опять молчит на вопрос, можно ли достучаться до цвета через объект средствами css.
Поможет только js?

webinar

smithana: На самом деле самый правильный способ вставлять svg, как svg . Не вижу поводов так не делать.

smithana @smithana Автор вопроса

но в этот тег svg файл не вставить, а вставлять код файла — сильно разбухнет код страницы.
Если бы был 1-2 path, я бы даже не спорил об этом)

webinar

smithana: разбухнет код страницы — и что? Зато на 1 запрос к серверу меньше. Если вопрос эстетики, вставляйте через include

Как изменить цвет SVG в CSS

Как изменить цвет SVG в CSS

SVG (Scalable Vector Graphics) является форматом векторной графики, который широко используется веб-разработчиками для создания интерактивных и масштабируемых изображений. Одним из основных преимуществ SVG является возможность легкого изменения цвета элементов веб-страницы, используя CSS. В этой статье мы рассмотрим, как изменить цвет SVG-изображений при помощи CSS.

1. Вставка SVG-изображения

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

В приведенном выше примере мы используем атрибут src , чтобы указать путь к нашему SVG-изображению. Убедитесь, что путь указан правильно, и что изображение доступно по этому пути.

2. Использование классов CSS

Чтобы изменить цвет SVG, мы можем использовать классы CSS. Создадим новый класс и применим его к SVG-изображению. Давайте посмотрим на пример:

.colored-svg

В этом примере мы создали класс .colored-svg и применили его к нашему SVG-изображению. С помощью свойства fill мы установили цвет заливки элементов SVG на красный.

3. Использование идентификаторов CSS

Кроме классов CSS, мы также можем использовать идентификаторы для изменения цвета SVG. Идентификаторы позволяют нам более точно выбирать элементы для изменения цвета. Рассмотрим пример:

#main-svg path

В этом примере мы использовали идентификатор #main-svg , чтобы выбрать конкретный элемент SVG для изменения его цвета. С помощью селектора path мы указали, что мы хотим изменить цвет заливки всех элементов path внутри SVG.

4. Использование псевдоэлементов CSS

CSS также предоставляет нам возможность изменять цвет SVG с помощью псевдоэлементов. Псевдоэлементы позволяют нам добавлять стили к определенным частям элемента. Рассмотрим пример:

.colored-svg::before

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

Заключение

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *