10 Дек Отзывчивая SVG графика
Отзывчивая SVG графика — это не просто картинки, которые могут изменять свой размер на различных дисплеях. Формат SVG позволяет использовать также отдельные элементы и группы внутри одного изображения. К каждому пути (path) или группе (g) можно писать отдельные медиа-запросы, уменьшая или скрывая их на дисплеях смартфонов и планшетов. И даже наоборот — можно увеличивать их на больших экранах, ведь SVG — это полностью масштабируемая векторная графика.
Это тестовая статья. Пока что относительное позиционирование отдельных элементов и их групп в SVG корректно работает только в Chrome и Opera. В остальных браузерах готовьтесь к поехавшей верстке 🙁
В этой статье мы дадим несколько примеров создания отзывчивых изображений SVG.
Итак, у нас есть небольшая иконка с несколькими заливками: левое и правое крылья (path id=”left-wing”, path id=”right-wing”), круг (path class=”circle”), текст (text class=”text”) и нимб (path class=”halo”). Вся иконка имеет class=”logo”.
Допустим, мы хотим ее уменьшить на экранах с разрешением менее 480 px по ширине. Для этого достаточно написать медиа-запрос ко всему изображению:
@media only screen and (max-width: 480px){
.logo {
transform: scale(0.8);
}
}
В таком случае вся иконка при разрешении дисплея <=480 будет иметь такой вид:
Но ведь то же самое можно сделать и с растровым изображением. В чем же тогда преимущество SVG? Дело в том, что этот формат дает возможность работы с отдельными элементами внутри одного изображения.
Давайте уменьшим только крылья, а также повернем их на 30 градусов вверх.
@media only screen and (max-width: 480px){
#left-wing {
transform: scale(0.8) rotate(30deg);
}
#right-wing {
transform: scale(0.8) rotate(-30deg);
}
}
Важный момент!
Все элементы SVG изображения в качестве базовой точки трансформации имеют левый верхний угол. Поэтому необходимо переопределить эти свойства на CSS. В нашем случае левое крыло должно уменьшаться с привязкой к правому краю по оси X (100%) и середине по оси Y. Правое же крыло уменьшается с привязкой к левому краю (0% по оси X) и середине.
Данные свойства необходимо указывать вне медиа-запроса, то есть в основных стилях:
#left-wing {
transform-origin: 100% 50%;
}
#right-wing {
transform-origin: 0% 50%;
}
Теперь мы получим то же самое изображение, но уменьшены будут только крылья. И нам совершенно ничего не надо перерисовывать в графическом редакторе.
Исходник
Изображение при ширине дисплея <=480px
Обратите внимание, что не все браузеры поддерживают свойство transform. Для кросс-браузерной верстки придется дописывать префиксы -webkit-, -moz-, -o- и -ms-. То же самое со свойством transform-origin.
Но это совсем простой пример. А что если в SVG присутствует множество заливок, которые объединены в подгруппы и группы? Как сделать такое изображение отзывчивым?
Итак, у нас есть такая схема:
Она имеет ширину 640 px. Соответственно на дисплеях шириной ниже этого значения рисунок необходимо уменьшать. Но можно одновременно повернуть его, чтобы длинная сторона вставала вертикально. Пишем несложный медиа-запрос:
@media only screen and (max-width: 640px){
.plan {
transform: rotate(90deg) scale(0.8);
Можете сжать окно браузера и посмотреть результат.
Но обратите внимание: все иконки внутри рисунка также повернулись, но в обратном направлении, то есть сохранили свою ориентацию. Иконки в данном случае желательно объединить в группы с их фонами (кругами), чтобы вращение происходило вокруг центров групп — сами иконки таким образом не будут смещаться. Объединение объектов в группы в SVG выглядит так:
/*группа иконки спальни*/ <g id="bed-ico"> <path class="bed" d="/*координаты фона*/> <path class="bed" d="/*координаты иконки*/> </g>
Всем иконкам внутри изображения необходимо задать обратное вращение в медиа-запросе:
@media only screen and (max-width: 640px){
#bed-ico /*здесь же указываются все остальные id или классы групп через запятую*/{
transform: rotate(-90deg);
}
}
А также задаем центр вращения для всех иконок вне медиа-запроса:
#bed-ico /*здесь же указываются все остальные id или классы групп через запятую*/{
transform-origin: 50% 50%;
}
Безусловно, для максимально удобного отображения на всех устройствах медиа-запросов должно быть больше. На этой странице для нашего плана также настроены переходы на ширине 380 и 520 px. Но основные принципы мы изложили.
Таким образом у нас получается полностью отзывчивое SVG изображение. И, как видите, для этого можно использовать как отдельные элементы, так и их группы. Все вышеизложенное также присутствует в нашем видеоуроке:
Обратите внимание: параметры viewBox останутся прежними. Соответственно изображение уменьшится и повернется внутри вьюбокса, и между его границей и самим изображением появится промежуток.
Параметры viewBox нельзя изменить в CSS. Поэтому выбирайте:
Сложный путь: менять эти параметры в JS, прописывая медиа-запросы еще и там.
Простой путь: сдвинуть все изображение вместе с вьюбоксом на нужное количество пикселей влево.
Здесь мы выбрали простой способ, а вы можете попробовать что-то еще. Рисуйте, разрабатывайте и развлекайтесь.