SVG — это новый стандарт для векторных изображений в браузере. Векторные редакторы, такие как Adobe Illustrator, позволяют напрямую сохранить файл в данном формате, а у современных браузеров нет никаких проблем с правильным отображением SVG. Так как SVG графика состоит из разметки, она может быть создана и модифицирована в вашем любимом текстовом редакторе, который вы используете для HTML. Даже есть возможность стилизовать SVG с помощью CSS, но здесь есть несколько тонкостей.
Разделительная линия между HTML и CSS – довольно прямая. HTML отвечает за содержании и структуру, а CSS заботится о внешности проектов. В SVG эта линия размыта. Это главная причина, почему текст и формы в SVG, как правило, контролируется с помощью атрибутов элементов а не CSS:
<rect x="10" y="10" width="300" height="100" fill="red" stroke="green" stroke-width="2" />
В этом примере мы нарисовали прямоугольник, который закрашен с помощью fill<code>. Цвет и прочность внешней рамки прямоугольника определяется атрибутами <code>stroke и stroke-width.. Но, прямоугольник можно стилизовать точно также используя CSS:
<rect x="10" y="10" width="300" height="100" style="fill: red; stroke: green; stroke-width: 2" />
Однако это не срабатывает для всех атрибутов. Вы не сможете определить позиции и значения для ширины и высоты данным образом. Мы просто будем придерживаться атрибутов y , width и height.
Так же, как и в HTML мы могли бы работать с классами и ID на любом элементе. Таким образом, мы бы задали внешний вид множеству элементов в SVG с помощью стилизованного класса.
<style>
.example {
fill: red;
stroke: green;
stroke-width: 2;
}
</style>
<rect x="10" y="10" width="300" height="100" class="example" />Использование псевдо-классов
Использование псевдо-классов таких как :hover – возможно в SVG , даже в сочетании с CSS3 свойством transition.
<style>
.example {
fill: red;
stroke: green;
stroke-width: 2;
transition: all 2s ease;
}
.beispiel:hover {
fill: blue;
}
</style>Внедрив этот пример, hover элементы несущие example класс, приведет к изменению цвета с красного на синий. Чтобы это работало должным образом, убедитесь, что SVG не вставлен как Img. Лучше выберите Embed или Iframe:
<embed src="example.svg" />
Использование Img поможет отобразить SVG должным образом. Но, hover эффекты и transitions будут игнорироваться. Кроме transition мы могли бы использовать transform, тем самым позваляя элементам масштабироватьсь или поворачиваться.
<style>
.example:hover {
fill: blue;
transform: rotate(20deg);
}
</style>При использовании CSS3 не забудьте добавить vendor префиксы, для поддержания максимального количества современных браузеров. В то время как у 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>В этом примере, мы упускаем показ цвета заливки (fill) при печати.
Высоких конверсий!
Автор статьи: Denis Potschien
