viewbox svg что это
ViewBox
При рисовании фигуры мы не ограничены пространством. Считайте, что у нас есть бесконечный холст и мы можем нарисовать круг в любом месте. Но наш монитор имеет ограниченный размер, поэтому фигура должна «попасть» в видимый прямоугольник. Считайте viewBox (регистр важен) таким ограничивающим прямоугольником. Например, зададим ограничивающую область 200 на 100 единиц с началом координат (0, 0), которая находится в верхней левой точке. Единицы измерения и начало координат являются условными понятиями, чтобы было от чего отталкиваться.
Для демонстрации примера нарисуем круг в некоторой позиции. Для удобства изменим фон области.
Для экономии места в примере не используются пространства имён, браузер Chrome справляется с этим.
Мы задали фигуру Круг с радиусом 50 единиц, но не указали координаты. В результате центр круга разместился в точке (0, 0), а мы увидели только часть круга в области viewBox, хотя где-то в памяти компьютера был нарисован честный круг.
Если мы уменьшим размер viewBox в два раза с 200х100 на 100х50, то увидим, что круг увелится.
Общий размер контейнера останется прежним, так как мы задали размеры в процентах у CSS. Тут главное понять, что viewBox работает в своём измерении. Не изменяя размеры круга, мы увидели, что круг увеличился. По сути, viewBox работает как масштабирование объекта.
Части фигуры, которые выходят за пределы viewBox, обрезаются и мы их не видим.
Впрочем мы может задать координаты кругу. Попробуем.
Если приглядеться, то в правом нижнем углу можно увидеть фрагмент красного круга. Очевидно, что мы не слишком удачно выбрали координаты. Исправимся. Заодно увеличим масштаб.
Уже лучше. Похоже на восход или закат солнца.
Напомню ещё раз, что в действительно круг рисуется полностью и вы можете использовать его в анимациях, чтобы увидеть его полный размер. Более того, можно показать и этот круг видимым, через CSS, используя overflow:visible.
Также можно использовать отрицательные значения. Допустим, есть такой вариант со стандартной точкой отсчёта (0, 0).
Не будем менять координаты круга, а изменим координаты у viewBox.
При этом нужно помнить, что сама точка отсчёта у SVG не меняется и круг без указания координат будет рисоваться в точке (0, 0).
Размеры в SVG
Управление размерами — тема важная, и чтобы максимально использовать возможности SVG, нужно хорошо понимать как всё работает.
Вьюпорт
Содержимое SVG-элемента отрисовывается на бесконечном холсте и может быть сколь угодно большого размера, но видимая часть холста соответствует размерам SVG-элемента. Эта область отрисовки называется viewport (вьюпорт).
SVG позволяет управлять как размерами вьюпорта, так и поведением содержимого относительно него: оно может обрезаться или показываться полностью, может растягиваться с потерей пропорций или стараться уместиться целиком, даже если при этом появляются пустые поля. Этим поведением можно управлять с помощью атрибутов.
Если просто вставить SVG на страницу и не задавать ему никакие размеры, он отобразится размером 300px на 150px, что не поместилось — обрежется:
Ширина и высота
Шириной и высотой элемента можно управлять стандартными свойствами width и height :
Их можно задавать как атрибутами, так и в CSS:
Для размеров в пикселях, задаваемых в атрибутах, единицы измерения можно не указывать.
Потаскайте ползунки, и вы увидите, что изменение ширины и высоты влияет только на вьюпорт и не влияет на содержимое, потому что оно отрисовывается на бесконечном холсте, и неизвестно область какого размера нужно ресайзить.
viewBox
Первые два значения — координаты X и Y верхнего левого угла отображаемой области, последние два — ширина и высота. viewBox задаётся только атрибутом.
Попробуйте теперь изменить размеры, и вы увидите, что содержимое отресайзится, чтобы поместиться целиком.
viewBox можно использовать, например, для кадрирования изображения, чтобы показывать не всю картинку, а только какую-то её часть:
Это поведение может стать проблемой: если размеры у иконок задаются в стилях, а они не загрузились — страница может превратиться в парад гигантских SVG-иконок. Чтобы этого не произошло, всегда явно задавайте в атрибутах SVG ширину и высоту, их потом легко переопределить в CSS.
preserveAspectRatio
Например, с помощью значения none можно указать, что сохранять пропорции не нужно:
SVG с viewBox и preserveAspectRatio=’none’ ведёт себя очень похоже на img : при изменении размеров содержимое масштабируется под размеры вьюпорта не сохраняя пропорции.
none будет полезно для резиновых фонов:
Остальные значения preserveAspectRatio состоят из двух частей: первая задаёт выравнивание, вторая — поведение элемента относительно вьюпорта.
Эти значения можно комбинировать в любых сочетаниях, но порядок должен сохраняться: первым всегда идет значение для X, вторым для Y. Значение для Y всегда пишется с большой буквы.
meet — содержимое стремится уместиться целиком (как фон с background-size: contain ) slice — содержимое заполняет собой всю область видимости (как background-size: cover : что не поместилось, обрежется)
Также нужно понимать, что preserveAspectRatio срабатывает, если вьюпорт и вьюбокс имеют разные соотношения сторон. Если соотношения сторон совпадают, и содержимое умещается без полей, preserveAspectRatio работать не будет (в этом случае в нём просто нет необходимости).
Для использования SVG в качестве иконок достаточно viewBox и размеров, но если предполагается делать что-то более сложное, имеет смысл разобраться с единицами измерения и системой координат.
Единицы измерения
Системы координат
В SVG-документе есть две системы координат:
Отсчет системы координат вьюпорта начинается от левого верхнего угла вьюпорта, системы координат содержимого — от левого верхнего края вьюбокса.
По умолчанию система координат содержимого соответствует системе координат вьюпорта, а единицы измерения содержимого — единицам измерения вьюпорта, но при использовании трансформаций или viewBox масштабируется вся система координат с единицами измерения, то есть пиксели из user space больше не равны пикселям из viewport space.
Поизменяйте размеры элемента и посмотрите что происходит с системой координат содержимого (она показана бирюзовым):
Система координат содержимого начинается из точки 0,0, и если вьюпорт и вьюбокс не совпадают, точка отсчета, как и вся система координат содержимого, будет ездить и масштабироватся вместе с вьюбоксом.
Масштабирование единиц измерения хорошо видно на примере обводки: изначально её толщина равна единице, но при изменении размеров видимая толщина обводки будет изменяться вместе с фигурой:
vector-effect можно задавать как атрибутом, так и в CSS.
Также новая система координат создается при добавлении трансформаций:
Внутри трансформируемого элемента будет своя своя система координат, отличная от систем координат вьюпорта и вьюбокса.
Тема может выглядеть сложной, но на самом деле, достаточно немного поиграться с кодом, и всё станет понятно. Для лучшего понимания систем координат, размеров и трансформаций в SVG рекомендую демо Сары Суайдан, а также её статьи:
Как взаимодействуют между собой viewport и viewBox
Этот вопрос вызван следующей важной темой, затронутой в хорошем вопросе почти полгода назад. Рисует ли браузер то, что находится за областью видимости SVG холста?
Интересен сам процесс выборки с помощью viewBox фрагмента полотна SVG, последующего преобразования фрагмента и рендеринг его на дисплее пользователя. Ниже поясняющий рисунок.
viewBox можно разместить в любом месте SVG полотна. Его положение зависит от первых двух атрибутов: min-x, min-y.
На следующем этапе система координат viewBox совмещается с началом системы координат viewport. И фрагмент захваченного viewBox ом изображения передается обратно во viewport. Идет процесс согласования и тут возможны варианты:
Масштабирование зависит от соотношения стророн viewport a и viewBox а
Допустим окно viewBox в два раза меньше viewport. Поэтому при обратном совмещении viewBox с viewport один пиксель из viewBox растягивается до 2-х пикселей viewport.
При viewport / viewBox 0, то изображение сдвигается влево.
Если увеличиваем viewBox, то изображение уменьшается.
На основе этого приходят мысли, что можно реализовать горизонтальный и вертикальный параллакс, не используя CSS, JavaScript. Для этого надо просто перемещать viewBox вдоль полотна SVG, как показано на рисунке ниже. Нажмите кнопку Start.
Практический пример взаимодействия viewport и viewBox в переведенной статье с enSO на нашем сайте.
Структура SVG-файла
SVG представляет собой обычный XML-файл, который можно просмотреть любым текстовым редактором. Если открыть любой такой файл, созданный в старой версии Adobe Illustrator, то можно увидеть следующее.
Здесь много лишнего кода, который добавил векторный редактор. Его можно безболезненно удалить.
Минимальный код может быть таким.
В первой строке размещается корневой элемент svg с указанием пространство имён. Далее внутри него идут различные теги. XML позволяет создавать любые теги, но «непонятные» будут игнорироваться. Содержимое файла должно находиться в Unicode-кодировке, но браузер знает об этом, поэтому эту информацию можно убрать из файла (см. первый пример).
Файл поддерживает комментарии, как и HTML-код. Вы также их можете удалять для уменьшения размера.
DOCTYPE также можно убрать по желанию. Мы так и сделали.
А вся важная информация находится в теге svg. У него есть атрибуты, а тег также может содержать дочерние элементы.
За свою историю SVG поменяла несколько версий, начиная с номера 1.0 в 1999 году, затем в 2001 появилась версия 1.1. Некоторые редакторы могут использовать другие версии, которые является частью версии 1.1. Лучше удалить эту информацию, чтобы браузер сам определял версию по умолчанию.
Атрибут id добавлен иллюстратором. Он может пригодится, если вы используете CSS и JavaScript. В других случаях можно удалить.
Атрибуты x и y также нам не понадобятся. Удаляем.
Атрибут enable-background служит для указания фона, но браузер не поддерживает его. Поэтому можно удалить.
Атрибуты width и height также можно удалить в большинстве случаев.
Атрибут xml:space=»preserve» не поддерживается браузерами. Значит и его удаляем.
Последние версии Illustrator и Sketch создают достаточно чистый SVG. У Inkscape при сохранении также есть опция Plain SVG в выпадающем списке поддерживаемых форматов.
Поговорим о других важных атрибутах.
Выше уже упоминалось о пространстве имён, которое указывается в атрибуте xmlns. Данный атрибут позволяет избежать конфликта с языком разметки HTML или другими XML-документами. В частности, SVG может использовать собственные теги title, который используется в HTML только один раз в области head. Адрес http://www.w3.org/2000/svg, указанный в пространстве имён является идентификатором для браузера, в реальности такого адреса нет.
Также указывается ещё одно пространство имён xmlns:xlink=»http://www.w3.org/1999/xlink» для избежания конфликта с ссылками HTML href.
В SVG можно указать собственные ссылки на различные части элемента для интерактивности.
Можно создать ссылку на другой фрагмент файла и использовать его в качестве идентификатора. Например, часто используется в теге use. В следующем примере значок, заданный в теге symbol используется далее в другом месте как отдельный элемент.
Векторные редакторы могут вставлять свои собственные пространства имён. Например, Inkscape вставляет следующее.
Для использования на веб-странице эти записи можно удалить для уменьшения размера файла.
SVG можно связать с кодом CSS и JavaScript. В дальнейших примерах будут встречаться образцы такого сочетания.
Разрабатывается новая версия SVG 2, где произошли некоторые изменения. В частности можно использовать чистые ссылки HTML.
Но на данный момент браузеры не поддерживают новую версию, поэтому применять ещё рано.
Атрибуты width, height, preserveAspectRatio и viewBox определяют холст для создаваемой графики.
ViewBox
В качестве примера будем использовать нарисованную в SVG птичку. Она состоит из нескольких отдельных фигур, описываемых кругами и путями.
В примере помимо общей группы для всей птички (id=»bird») выделены также подгруппы, определяющие отдельно голову и тело (id=»body», ).
Если вы измените цвет заливки группы #body, изменится заливка всех элементов внутри группы. Это может быть очень удобно.
Группировка элементов может быть очень полезна не только для организации и структурирования документа. Особую пользу она может принести, если вы захотите добавить к SVG-графике интерактивности или задать какие-то преобразования. Сгруппировав элементы, можно перемещать их, масштабировать или поворачивать все вместе, сохраняя их положение друг относительно друга.
Так, в случае со сгруппированной птицей можно масштабировать её всего одной строкой CSS:
Теги и
– инструмент клонирования SVG элементов. С его помощью можно дублировать существующие и заданные элементы. Также данный инструмент предоставляет возможность изменять созданные копии.
Элемент принимает в качестве атрибутов координаты x и y, высоту (height), ширину (width) и ссылку на исходный элемент (xlink:href). В качестве ссылки выступает идентификатор объекта.
Допустим, у нас есть SVG-элемент с заданным идентификатором.
С помощью данный элемент можно скопировать:
В корневом SVG-элементе необходимо объявить пространство имен xlink, чтобы ссылка работала.
Новая копия унаследует все качества оригинала, по умолчанию она будет неотличима от настоящего элемента. Чтобы дубликат стал уникальным, в него необходимо внести изменения, но следует быть внимательным. Например, мы сделаем так.
Дубликат будет иметь красный цвет, а не синий, так как атрибут fill изначально задан в исходном элементе.
Но в копию вполне можно добавить новый атрибут, которого нет в оригинале:
Дубликат так и останется красного цвета, но у него появится зелёный контур.
Пример для птички. Например, если мы хотим добавить еще одну птичку, вместо копирования ее кода можно использовать тег :
Обратите внимание, что в атрибуте xlink:href вы можете ссылаться на любой SVG-элемент, даже находящийся во внешнем файле. Это очень удобно использовать для организации (например, можно иметь файл с повторно используемыми компонентами) или для кэширования часто используемых файлов.
Допустим, наша птичка была создана в отдельном файле animals.svg. В этом случае ссылаться на нее можно так:
Координаты, задаваемые элементу отсчитываются не от начала координат всего SVG-изображения. На самом деле это сокращенная форма записи атрибута transform. Следующие две строчки являются эквивалентными:
Проще говоря, координаты задаются относительно исходного элемента. Такое поведение не всегда оптимально и может быть недостатком.
Другим недостатком является то, что копии будут использовать те же стили, что и исходный элемент. При применении стилей или преобразований к группе #bird эти стили и преобразования будут распространяться на все ее копии.
При этом принцип работы системы координат может показаться несколько неожиданным. Она также масштабируется. Если исходный элемент был спозиционирован в 100 пикселях от края изображения, то такая его копия будет расположена в 50 пикселях от края. На задаваемые x и y это тоже распространяется. Таким образом, слова о расположении копии относительно исходного элемента не совсем верны.
В отличие от преобразований, переопределить стили копии нельзя. Таким образом, если вы захотите создать армию птичек разного цвета, то использовать для этого не получится (если только исходный элемент не определен внутри без своих стилей, но об этом в следующем разделе).
Храниться в может что угодно, начиная с группы элементов, вроде нашей птички, и заканчивая маской или градиентом. Это шаблон для дальнейшего использования. Сам по себе он никогда не отображается, только использующие его сущности.
Всё, что описано в теге defs, не будет отрисовано в SVG; заданные элементы будут показываться только через ссылки. Теперь добавим клону атрибуты, которых нет у оригинала:
Мы создали первый видимый круг. Радиус круга равен 20, что унаследовано от оригинала, но в то же время у него своя позиция и цвет. Можно создать еще один дубликат, просто скопировав тег use:
Имея набор иконок в SVG-файле, можно использовать их повторно через конструкцию:
К отдельно взятому элементу можно применять SVG трансформации:
Карманное руководство по написанию SVG. Глава 3
Глава 3. Рабочая область
Пожалуй, самым важным аспектом SVG, после понимания его главной структуры и умения создавать основные фигуры, является получение представления об используемой рабочей области, или другими словами, системы координат, в которой будет отображаться графика.
У этой груши, к счастью, область просмотра и viewBox совпадают:
Вся груша видна в браузере и будет масштабироваться соответственно при изменении размеров области просмотра.
Область просмотра
Область просмотра является видимой частью SVG. Хотя SVG может быть какой угодно ширины или высоты, ограничение области просмотра будет означать, что в любой момент времени может быть видна только часть изображения.
Если эти значения не заданы, размеры рабочей области обычно будут определены по другим показателям в SVG, например, по ширине самого внешнего элемента SVG. Однако, без указания этих значений есть риск, что графический объект обрежется.
viewBox
Значения min определяют, в какой точке внутри изображения должен начинаться viewBox, в то время как width и height устанавливают размер блока.
preserveAspectRatio
Если пропорции ширины и высоты области просмотра и viewBox не совпадают, то артибут preserveAspectRatio указывает браузеру, как отображать рисунок.
У атрибута может быть одно из трех значений: meet (по умолчанию), slice, и none. В то время как meet гарантирует полную видимость графики (насколько это возможно), slice старается заполнить область просмотра с viewBox и затем обрезать все части изображения, которые не поместились в область просмотра после этого масштабирования. none не сохраняет пропорции и скорее всего исказит изображение.
Возможно самое незамысловатое значение здесь – это «none», которое показывает, что масштабирование не должно быть равномерным. Если мы увеличим пиксельные значения области просмотра на следующем изображении вишенок, то оно будет неравномерно растянуто и выглядеть искажённым.
preserveAspectRatio для изображения ниже установлен в xMinYMax meet и выравнивает нижний левый угол viewBox по нижнему левому углу области просмотра (которая теперь обведена). meet гарантирует, что изображение отмасштабируется таким образом, чтобы вместиться в область просмотра насколько это возможно.
Здесь те же самые вишенки, но meet изменён на slice :
Заметьте, что значения выравнивания не зависят друг от друга.
В примере выше значения preserveAspectRatio установлены в xMinYMid slice ; теперь вишенки выравнены по середине оси y области просмотра.
Преобразования системы координат
SVG включает дополнительные возможности изменения графики, такие как вращение, масштабирование, перемещение и наклон при помощи трансформации. SVG-автор может добавить трансформации к определённым элементом или к целой группе элементов.
При трансформации SVG важно учитывать то, что она влияет на вашу систему координат, т.е. на рабочую область. Это происходит потому, что трансформация создаёт новую действующую систему координат SVG-элемента, фактически копируя оригинал, а затем накладывая трансформацию на новую систему координат.
Следующая картинка показывает трансформацию системы координат, происходящую при наложении сдвига на (100,100) на группу с графикой:
Сама система координат переместилась, а изображение лайма и лимона сохранило своё исходное местоположение в системе. Новая действующая система координат начинается в точке (100,100) в исходной системе координат.
В случае вложенных трансформаций эффекты накапливаются, поэтому окончательная трансформация на дочернем элементе будет основываться на суммарном эффекте трансформаций его предков.
translate
Значение y является необязательным, и если оно опущено, то предполагается, что оно равно «0».
rotate
scale
Значение масштаба «.5» отобразит графику вполовину от ее исходного размера, тогда как значение «3» увеличит исходный размер втрое. Значение «4,2» отмасштабирует графику вчетверо по ширине и вдвое по высоте относительно исходных размеров.
P.S. Это тоже может быть интересно:
Если вам понравилась статья, поделитесь ей!