Viewbox html что это
Размеры в 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 рекомендую демо Сары Суайдан, а также её статьи:
Как понять атрибут Viewbox в SVG
Руководство по веб-дизайну с использованием SVG Viewbox (HTML)
Окно просмотра – это атрибут, обычно используемый при создании форм SVG. Если вы рассматриваете документ как холст, поле просмотра является частью холста, который вы хотите, чтобы зритель увидел. Даже если страница может охватывать весь экран компьютера, эта цифра может существовать только в трети целого.
Viewbox позволяет вам сказать парсеру увеличить эту третью. Это устраняет лишние пробелы. Воспринимайте viewbox как виртуальный подход к кадрированию изображения. Без этого ваш график будет отображать треть его фактического размера.
Значения Viewbox
Чтобы обрезать изображение, вы должны создать точки на картинке, чтобы сделать разрезы. То же самое верно при использовании атрибута поля просмотра. Настройки значения для viewbox включают в себя:
– начальная координата x
– начальная координата y
– ширина окна просмотра
– высота окна просмотра
Синтаксис для значений окна просмотра:
viewBox = “0 0 200 150”
Не путайте ширину и высоту окна просмотра с шириной и высотой, которые вы установили для документа SVG. Когда вы создаете файл SVG, одним из первых значений, которые вы устанавливаете, является ширина и высота документа. Документ представляет собой холст. Окно просмотра может охватывать весь холст или только его часть.
Это окно просмотра охватывает всю страницу.
Это окно просмотра охватывает половину страницы, начиная с правого верхнего угла.
Ваша фигура также имеет назначения высоты и ширины.
Это документ размером 800 x 400 пикселей с окном просмотра, которое начинается в верхнем правом углу и расширяет половину страницы. Форма представляет собой прямоугольник, который начинается в верхнем правом углу поля просмотра и перемещается на 100 пикселей влево и на 50 пикселей вниз.
Зачем устанавливать Viewbox?
SVG делает гораздо больше, чем просто рисует фигуру. SVG можно использовать в веб-дизайне. Он может создать одну фигуру поверх другой для эффекта тени. Он может трансформировать фигуру так, что она наклоняется в одном направлении. Для расширенных фильтров вам необходимо понять и использовать атрибут viewbox.
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 представляет собой обычный 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
Маски, градиенты, фильтры, анимация, вертикальный и горизонтальный parallax
Трансформация изображений SVG при изменении параметров Viewbox
Введение
Изменение параметров viewBox – атрибута элемента SVG позволяет масштабировать, фрагментировать, перемещать исходное изображение вдоль осей координат. Но довольно часто возникают вопросы: “Почему, изменив параметры viewBox, я получаю совсем не то, что ожидал увидеть?”. Вместо увеличения картинки в 2 раза, она совсем пропадает с дисплея или сдвигается не в ту сторону и т.д. Чтобы разобраться в причинах этих “аномалий” рассмотрим подробно процессы взаимодействия областей просмотра элемента SVG и его параметра viewBox.
2. SVG viewport
В фрагменте кода (см. Лист.1) третья строка определяет прямоугольную область просмотра – SVG viewport и систему координат viewport coordinate system с началом координат (0,0) в левом верхнем углу, положительным направлением оси абцисс “X” – вправо и положительным направлением оси ординат “Y” – вниз. В нашем примере ширина прямоугольной области просмотра – width=”400px” и высота – height=”400px”. По умолчанию ед. измерения в пикселях и поэтому “px” можно не указывать. Также могут применяться и другие единицы измерения, например дюймы: (см. Лист.2)
3. SVG viewBox
4. Процесс взаимодействия viewport и viewBox
Холст SVG документа имеет бесконечные размеры.
Viewport и viewBox – это две прямоугольные области просмотра, которые ограничены конечными значениями высоты и ширины, указанными в параметрах viewport и viewBox. При изменении параметров viewport и viewBox появляется возможность отобразить без искажений или трансформировать любой конкретный фрагмент холста SVG.
Далее в тексте и на рисунках для обозначения ширины и высоты приняты следующие сокращения:
Рассмотрим пример, когда параметры этих областей просмотра совпадают. Всё, что находится вне области, ограниченной осями “ SVG width ” и “ SVG height ” не отображается.
Например: большая часть прямоугольника “5” красного цвета см. Лист.4 и Рис.1
Лист.4
не попадает в область просмотра, так как он имеет начало координат по оси Х=390px, ширина его 100px, поэтому от прямоугольника остается в видимой области по ширине только: 400px-390px= 10px. Остальные 90px вне области видимости.
Вторая область – viewBox служит для трансформации векторной графики полученной от SVG viewport – первой области просмотра.
В процессе согласования – “by a negotiation process” сравниваются параметры двух областей просмотра: SVG viewport и viewBox. Если они полностью совпадают, как в нашем примере, то графика от viewBox без изменений передается обратно в первую область просмотра viewport см. Рис.1
Прерывистый голубой контур и квадратики показывают границы и область просмотра SVG viewport.
4а. Смещение начала координат viewBox по одной оси
Изменяя параметры viewBox: min-x, min-y, можно сместить начало пользовательских координат относительно начала координат SVG viewport.
viewBox=”70px, 0, 400px, 400px” см. Рис.2
На Рис.2 начало пользовательских координат сдвигается вправо на 70px, тем самым сдвигая вправо по оси абцисс всю прямоугольную область просмотра viewBox (400 x 400px). При этом происходит захват изображения фрагмента документа SVG, который находится под viewBox, а далее область просмотра viewBox, с захваченным фрагментом, обратно совмещается с неподвижной областью просмотра viewport с началом координат (0,0) в левом верхнем углу. Координаты фигур пересчитываются с учетом последнего сдвига на 70px влево. Формально получается, что в неподвижной области просмотра viewport, при применении viewBox, фрагмент документа SVG сдвинулся влево.
Поэтому в нашем примере на ширине 70px появляется, скрытая ранее, большая часть красного прямоугльника – 5, а зелёный и жёлтый круг обрезаются слева по ширине на 70px. см. Рис.3
Посмотреть, как это происходит можно на демо.
View demo
4б. Смещение начала координат viewBox по двум осям
Теперь переместим начало координат по двум осям сразу в точку (70,70):
viewBox=”70px, 70px, 400px, 400px”. Для наглядности добавим внизу еще один красный прямоугольник – (6). см.Рис.4
После переноса начала координат в область видимости viewBox попадает прямоугольный (400×400)px фрагмент SVG документа с отсчетом ширины и высоты от начала координат (70,70). Происходит захват изображения. Далее начало координат viewBox (70,70) совмещается с началом координат viewport (0,0). Координаты фигур пересчитываются.
Поэтому становятся полностью видны красные прямоугольники 5 и 6. Всё, что не попадает в эту область, отсекается. Например, часть площадей цветных окружностей 1,2 и 4.
Другими словами, перемещая начало координат viewBox вправо и вниз на 70px, в итоге получаем перемещение фрагмента документа SVG в области просмотра viewport влево и вверх.
View demo
5. Изменение масштаба с помощью viewBox
За масштаб фрагмента документа SVG отвечает пропорциональное соотношение ширин и высот соответственно двух областей просмотра: viewport и viewBox. Если соотношение сторон равны 1, то конечное изображение будет передано в масштабе 1:1, то есть без трансформации.
Если соотношение сторон будет отличаться от единицы, то масштаб будет меняться в сторону увеличения или уменьшения.