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

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

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

SVG CSS

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

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

<rect x="10" y="10" width="300" height="100" fill="red" stroke="green" stroke-width="2" />

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

<rect x="10" y="10" width="300" height="100" style="fill: red; stroke: green; stroke-width: 2" />

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

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

<style>
    .example {
        fill: red;
        stroke: green;
        stroke-width: 2;
    }
</style>

<rect x="10" y="10" width="300" height="100" class="example" />

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

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

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

<style>
    .example {
        fill: red;
        stroke: green;
        stroke-width: 2;
        transition: all 2s ease;
    }
    .example:hover {
        fill: blue;
    }
</style>

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

<embed src="example.svg" />

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

<style>
    .example:hover {
        fill: blue;
        transform: rotate(20deg);
    }
</style>

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

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

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

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

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

<embed src="example.svg" width="500" />

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

<style>
    @media only print {
        .example {
            fill: none;
        }
    }
</style>

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

Оригинал статьи на английском на сайте Noupe

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

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