Как в svg поменять цвет. Внешние файлы со стилями для SVG, вставленного с помощью
CSS с каждый днем становится все мощнее, появляется множество новых особенностей, с помощью которых создавать пользовательские интерфейсы намного легче. И это замечательно!
Одной из таких фичей в CSS являются фильтры. Давайте попробуем с помощью фильтров поработать с SVG изображениями.
CSS filters
Для начала давайте взглянем на фильтры. Они включают в себя следующие функции:
- blur()
- brightness()
- contrast()
- drop-shadow()
- grayscale()
- hue-rotate()
- invert()
- opacity()
- saturate()
- sepia()
CSS-фильтры — это самый простой способ реализовать основные преобразования наиболее эффективным для браузера образом.
Если вы хотите посмотреть, как работает каждый фильтр, то рекомендуем посетить сайт: cssfilters.co .
Редактирование SVG backgrounds
Я люблю использовать SVG (scalable vector graphics) формат в web. SVG — отличный формат изображения для web. Когда вы добавляете SVG на страницу, то вы имеете доступ к каждому его элементу и свойству. Это позволяет добавлять анимацию, менять цвета, динамически добавлять информацию. SVG так же отлично подходит для иконок.
Часто SVG используется в качестве background изображений. В данном случае у вас пропадает контроль над элементами изображения. Вы теперь не можете изменять цвета, свойства, так как SVG становится обычной картинкой. Но с помощью CSS фильтров вы можете решить эту проблему.
Регулировка яркости
Первое, с чем я столкнулся при работе с иконками — это необходимость затемнения белой иконки на светлом фоне. Чтобы не создавать новую темную иконку, я воспользовался filter: brightness() .
Значение brightness больше 1 делаем элемент ярче, меньше 1 делает элемент темнее.
Иконки с цветом #000 или rbg(0, 0, 0) не будут осветлены. Они должны иметь любой другой цвет.
Регулировка цвета
Мы посмотрели, как изменить яркость иконки. Но что, если мы хотим изменить цвет иконки? В данном случае нам поможет фильтр sepia , hue-rotate , brightness и saturation , чтобы создать любой цвет, который мы хотим.
Из белого вы можете создать, например, синий, голубой и розовый цвет.
Colorize-pink { filter: brightness(0.5) sepia(1) hue-rotate(-70deg) saturate(5); } .colorize-navy { filter: brightness(0.2) sepia(1) hue-rotate(180deg) saturate(5); } .colorize-blue { filter: brightness(0.5) sepia(1) hue-rotate(140deg) saturate(6); }
Совместимость
На момент написания статьи фильтры поддерживаются следующими браузерами:
Вместо заключения
Никогда не забывайте о своих пользователях. Пока что фильтры работают не везде. Поэтому не используйте белые иконки с фильтрами на белом фоне, так как некоторые пользователи просто ничего не увидят. Так же не забывайте про альтернативный текст у изображений.
Оригинал статьи: ссылка Автор статьи: Alex. Категория:
Дата публикации: 01.04.2018
SVG - формат векторной графики. Буквально его название значит «масштабируемая векторная графика» (Scalable Vector Graphics). Попросту говоря, это то, с чем вы работаете в Adobe Illustrator. SVG можно легко использовать в вебе, но сперва нужно во многом разобраться.
Зачем вообще нужен SVG?
- Небольшие размеры файлов, отличное сжатие;
- Масштабирование до любого размера, без потери качества (разве что, при совсем маленьких размерах);
- Хорошо выглядит на ретине;
- Широкие возможности, которые предоставляют фильтры и интерактивность.
Создадим изображение SVG, с которым будем работать дальше
Создайте произвольный рисунок в Adobe Illustrator. Вот, например, птица киви на овале.
Обратите внимание, что изображение кадрируется чётко по краям изображения. Холст в SVG играет не меньшую роль, чем в PNG или JPG.
Adobe Illustrator умеет сохранять в SVG.
При сохранении появится ещё одно диалоговое окно с настройками. Честно говоря, я не очень в них разбираюсь. Существует целая инструкция по Профилям SVG . Меня вполне устраивает SVG 1.1.
Здесь стоит отметить, что у вас есть возможность нажать OK и сохранить файл или же нажать кнопку “SVG Code…”, которая откроет окно TextEdit (по крайней мере на Mac) с SVG-кодом.
Оба варианта могут пригодиться.
В Illustrator рабочая область была размером 612px ✕ 502px.
Именно такие размеры будут у изображения на странице, если их не указать специально. Его размеры можно изменить, задав атрибуты width или height для img , так же как для PNG или JPG. Вот пример :
Поддержка браузерами
Один из вариантов: проверка поддержки через Modernizr и замена src для изображения:
if (!Modernizr.svg) { $(".logo img" ).attr("src" , "images/logo.png" ); }Дэвид Бушел (David Bushell) предложил очень простой альтернативный вариант , если вы не имеете ничего против JavaScript в разметке:
"this.onerror=null; this.src="image.png""
>
Для этого способа вставки SVG можно использовать следующие приемы деградации:
<svg > ... svg > <div class ="fallback" > div >И снова используем Modernizr:
.logo-fallback { display : none; /* Убедитесь, что размер соответствует размеру SVG */ } .no-svg .logo-fallback { background-image : url (logo.png); }Добавляем SVG на страницу с помощью тега
Если по какой-либо причине вариант со вставкой SVG непосредственно в документ вам не нравится (он все же имеет парочку недостатков, например, кэширование практически невозможно), можно подключить SVG-файл используя
<object type ="image/svg+xml" data ="kiwi.svg" class ="logo" > Kiwi Logo object >На тот случай, если это не поддерживается, реализуем деградацию, используя класс, который добавляет Modernizr:
.no-svg .logo { width : 200px ; height : 164px ; background-image : url (kiwi.png); }При таком подходе не возникают проблемы с кэшированием, и он
поддерживается браузерами лучше
, чем другие. Но если использовать внешний файл
со стилями или
Использование псевдо-классов
Использование псевдо-классов таких как:hover - возможно в SVG , даже в сочетании с CSS3 свойством transition.
Внедрив этот пример, hover элементы несущие example класс, приведет к изменению цвета с красного на синий. Чтобы это работало должным образом, убедитесь, что SVG не вставлен как Img. Лучше выберите Embed или Iframe:
Использование Img поможет отобразить SVG должным образом. Но, hover эффекты и transitions будут игнорироваться. Кроме transition мы могли бы использовать transform, тем самым позваляя элементам масштабироватьсь или поворачиваться.
При использовании CSS3 не забудьте добавить vendor префиксы, для поддержания максимального количества современных браузеров. В то время как у Chrome и Firefox нет никаких проблем с безупречным рендерингом, Internet Explorer откажется показыивать ваши творения даже в самой последней версии, в то время как он вполне способен показывать эти свойства CSS3 при использовании в HTML.
Медиа запросы и SVG
Если вы хотите настроить ваш SVG так, чтобы он мог менять размеры, тогда просто используйте медиа запросы прямо в нем:
Этот пример гарантирует, что элементы класса example не будут показываться, как только видимая ширина падает ниже 800 пикселей. Знайте, что не ширина документа определяет это, но ширина элемента несущая ваш SVG.
В этом примере, элементы класса example не будет показаны, так как заданная ширина всего лишь 500 пикселей. Медиа запросы в 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 это 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
В качестве примера того, насколько эффективна эта техника, я воспользуюсь оригинальным логотипом 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.