Для чего применяются и на что влияют xmlns и xmlns:xlink в svg?
Если указать вместо xlink:href=»#rect только href=»#rect сообщения об ошибке парсера XML в этих браузерах не будет.
Почему так происходит? SVG2, в готовящемся к публикации стандарте W3C xlink:href объявлен не желательным, устаревшим ( depricate )
Но слишком долго внедряется этот стандарт и некоторые браузеры поторопились внедрить его в свои движки.
Но safari, например не принимает href , для него валидна только xlink:href запись svg версии 1.2
Что делать, чтобы ваш SVG код был рабочим во всех браузерах?
Пока браузерные войны не закончились, пока не внедрён стандарт SVG2 лучше указывать дополнительно и «ссылочное» пространства имен xmlns:xlink=»http://www.w3.org/1999/xlink» . Можно сохранить для себя шаблон шапки SVG файла и начинать с него создание нового SVG кода:
Для кроссбраузерного решения можно писать или старую форму записи xlink:href или комбинированный вариант:
Другое содержание в SVG
Помимо графических примитивов, таких как прямоугольники и круги, SVG предлагает набор элементов для встраивания других типов контента в изображения.
Встраивание растровых изображений
Так же, как элемент img в HTML SVG имеет элемент изображения, служащий той же цели. Вы можете использовать его для встраивания произвольных растровых (и векторных) изображений. Спецификация запрашивает приложения для поддержки файлов формата PNG, JPEG и SVG.
Встроенное изображение становится обычным элементом SVG. Это означает, что вы можете использовать клипы, маски, фильтры, вращения и все другие инструменты SVG для контента:
svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"> image x="90" y="-65" width="128" height="146" transform="rotate(45)" xlink:href="https://developer.mozilla.org/static/img/favicon144.png" /> svg>
Внедрение произвольного XML
Поскольку SVG является XML-приложением, вы можете, конечно, всегда вставлять произвольный XML в любом месте документа SVG. Но тогда у вас нет средств для определения того, как окружающий SVG должен реагировать на содержимое. Собственно, в соответствующем обозревателе он совсем не реагирует, данные просто будут опущены. Поэтому спецификация добавляет элемент в SVG. Его единственная цель — быть контейнером для другой разметки и носителем для атрибутов стиля SVG (наиболее заметны ширина и высота для определения пространства, которое будет занимать объект).
Элемент foreignObject — хороший способ вставки XHTML в SVG. Если у вас есть более длинные тексты, макет HTML более подходит и удобен, чем текстовый элемент SVG. Другим часто упоминаемым примером использования является вложение формул с MathML. Для научных приложений SVG это очень хороший способ вступить в оба мира.
Примечание: Имейте в виду, что контент в foreignObject должен поддерживаться обозревателем. Обычная программа для просмотра SVG вряд ли сможет отобразить HTML или MathML.
Поскольку foreignObject является элементом SVG, вы можете, как и в случае с изображением, использовать с ним любую добросовестность SVG, которая затем будет применяться к его контенту.
- « Предыдущая статья
- Следующая статья »
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 6 авг. 2023 г. by MDN contributors.
W3 org 2000 svg что это
Тег-обёртка для отображения векторной графики на странице.
Время чтения: 8 мин
Открыть/закрыть навигацию по статье
- Кратко
- Пример
- Как пишется
- Контейнер svg
- Обводка stroke
- Заливка fill
- background-image
- Вставка в HTML
- Учебные руководства
- Документация MDM Web Docs
- Алёна Батицкая советует
Контрибьюторы:
- Светлана Коробцева ,
- Сергей Большаков
Обновлено 8 сентября 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
SVG — векторный формат графики, доступный в вебе. Формат основан на технологии XML.
До появления SVG мы могли использовать только растровые изображения: форматы JPG, PNG. Но растровые изображения имеют ряд недостатков:
- Растровые изображения плохо поддаются масштабированию. Это стало особенно актуальным с появлением ретина экранов.
- Растровые изображения, как правило, весят существенно больше, чем их svg-собратья.
- Растровые изображения можно редактировать только при помощи графических редакторов, в то время как svg-изображения представляют собой читаемый код.
- Растровые изображения статичны. SVG внутри себя может содержать CSS-стили или JS-скрипты.
Пример
Скопировать ссылку «Пример» Скопировано
Для сравнения посмотрим на PNG и SVG версии одного и того же изображения:
Как вы видите, второй вариант выглядит великолепно в отличие от первого. Это нам на руку при работе с адаптивными сайтами и с сайтами, которые должны круто смотреться на экранах с повышенной плотностью пикселей (так называемые ретина-экраны).
Заглянем в исходный код svg-картинки:
xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 24 24"> d block-code__original-line"> 114.001.001A2 2 0 0117 12zm-8 0a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 0110 12zm-8 0a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 013 12z" />svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 24 24" > path d="M16 12a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 0117 12zm-8 0a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 0110 12zm-8 0a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 013 12z" /> svg>Не пугайтесь большому количеству странных цифр. Это описание координат каждой из точек изображения. Если вам нет необходимости редактировать SVG, то не обязательно понимать эти цифры.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Чаще всего svg-иконки или изображения вам будет предоставлять дизайнер или вы сможете найти их на различных стоках:
Вам редко придётся писать или менять файл с SVG руками, поэтому тут мы рассмотрим только те обязательные части, с которыми вы должны будете взаимодействовать при необходимости.
Контейнер svg
Скопировать ссылку «Контейнер svg» Скопировано
SVG не может быть записано без оборачивающего парного тега svg . Так браузер поймёт, что читать этот код нужно по особым правилам и отрисует картинку на странице.
Обводка stroke
Скопировать ссылку «Обводка stroke» Скопировано
Мы можем управлять толщиной и цветом линии, которая будет соединять все перечисленные точки svg-изображения. Причём можно задать один общий атрибут stroke для контейнера , а можно задавать его каждому отдельному вложенному элементу, сделав обводку разных частей картинки разного цвета.
Подробнее об атрибуте stroke
Заливка fill
Скопировать ссылку «Заливка fill» Скопировано
Мы можем задать заливку нарисованной фигуры или оставить её прозрачной, только с обводкой. Если решите залить фигуру, то для этого используйте атрибут fill .
Подробнее об атрибуте fill
Как подключать
Скопировать ссылку «Как подключать» Скопировано
Есть несколько способов подключения svg-изображения к веб-странице. Каждый из них имеет свои преимущества и недостатки.
Скопировать ссылку «img» Скопировано
Самый простой способ — использовать тег
и указать путь до svg-картинки в значении атрибута src .
img class="icon" src="img/svg/dots.svg" alt="dots icon">При таком способе мы можем легко управлять размерами картинки на странице. Но есть и минусы — не получится изменить цвет фона или заливки у самого SVG при помощи CSS.
background — image
Скопировать ссылку «background-image» Скопировано
Если svg-картинка не является контентной, то её без особого труда можно подключить в виде фона для элемента
Facebooka href="https://facebook.com" class="icon fb"> Facebook a>.icon display: block; width: 28px; height: 28px; background-repeat: no-repeat; background-position: center; background-size: contain;> .fb background-image: url(../img/svg/fb.svg);>.icon display: block; width: 28px; height: 28px; background-repeat: no-repeat; background-position: center; background-size: contain; > .fb background-image: url(../img/svg/fb.svg); >В этом случае мы также не имеем возможности управлять стилями SVG через CSS.
Вставка в HTML
Скопировать ссылку «Вставка в HTML» Скопировано
Код SVG можно вставить прямо в HTML-разметку станицы.
xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 24 24" > d block-code__original-line"> 114.001.001A2 2 0 0117 12zm-8 0a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 0110 12zm-8 0a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 013 12z" />div class="dots"> svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 24 24" class="dots-icon" > path d="M16 12a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 0117 12zm-8 0a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 0110 12zm-8 0a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 013 12z" /> svg> div>При таком способе подключения мы можем управлять стилями SVG через стили. Это даёт возможность даже анимировать векторное изображение! ��
.dots-icon animation: animation 3s infinite alternate;> @keyframes animation from fill: red; > to fill: green; >>.dots-icon animation: animation 3s infinite alternate; > @keyframes animation from fill: red; > to fill: green; > >Неприятная особенность: если одна и та же SVG-картинка используется в нескольких местах на сайте, и в какой-то момент вы захотите в ней что-то изменить, то нужно будет найти все вставки и вносить исправления в код. При вставке SVG при помощи
или background — image достаточно будет внести изменения в svg-файл и правки применяться ко всем картинкам.
Атрибуты
Скопировать ссылку «Атрибуты» Скопировано
- fill — отвечает за заливку фигуры. Может использоваться как для всего контейнера svg , так и для отдельных частей. Более подробно тут → fill.
- stroke — отвечает за обводку фигуры. Может использоваться как для всего контейнера svg , так и для отдельных частей. Более подробно тут → stroke.
- view Box — атрибут, отвечающий за размеры окна отображения. Значением будет 4 цифры: min — x , min — y , width и height . В примере выше у контейнера svg указано следующее view Box = «0 0 24 24» . Значит окно отображения будет начинаться в координатах 0 по оси x и 0 по оси y, а по ширине и высоте будет 24 пикселя. Может указываться как для отдельных элементов, так и для всего контейнера. При помощи этого атрибута можно кадрировать изображение, указывая нужные значения.
- width и height — атрибуты, указывающие размеры svg-элемента. Значением может быть число без указания единиц измерения, тогда браузер будет воспринимать его как пиксели: width = «100» height = «100» . Можно указать в процентах: width = «100 % » height = «100 % » . Могут указываться как оба сразу, так и по отдельности. Если планируете вставлять SVG в HTML кодом, то отдайте предпочтение атрибуту view Box вместо указания ширины и высоты. Тогда при изменении размеров через CSS картинка будет подстраиваться под размеры с сохранением пропорций.
- preserve Aspect Ratio — атрибут, значение которого указывает браузеру нужно ли сохранять пропорции при масштабировании изображения. Если значение отличается от none , то состоит из двух частей: первая отвечает за выравнивания, вторая отвечает за пропорции.
Значения для выравнивания:
- x Min Y Min , x Mid Y Mid , x Max Y Max — выравнивает изображение по левому верхнему углу, по центру по обеим осям или по правому нижнему углу.
Значения для обрезки:
- meet — картинка стремиться уместиться целиком с сохранением пропорций. Чем-то похоже на поведение background — size : contain для фона.
- slice — изображение пытается заполнить собой всё доступное пространство. Похоже на background — size : cover .
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Если захотите внести какие-то сложные правки в SVG, а дизайнера под рукой нет, то можно использовать SVG-Edit, SVG-Edit Online, inkscape или Adobe Illustrator.
�� Всегда перед использованием SVG в проекте прогоняйте его через оптимизатор SVGO. Он удалит всё ненужное, код станет приятнее и будет меньше весить.
�� С SVG можно взаимодействовать при помощи JavaScript ��
Документация и руководство по SVG
Скопировать ссылку «Документация и руководство по SVG» Скопировано
Учебные руководства
Скопировать ссылку «Учебные руководства» Скопировано
- Перевод руководства от MDM Web Docs — SVG — учебное руководство;
- Руководство от W3C с отличными иллюстрациями — An SVG Primer for Today’s Browsers..
Документация MDM Web Docs
Скопировать ссылку «Документация MDM Web Docs» Скопировано
- Справочник SVG элементов;
- Справочник SVG атрибутов;
- Общий список ссылок на ресурсы по SVG от MDM Web Docs SVG. Документация MDM Web Docs.
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
�� В русскоязычном вебе, пожалуй, нет никого, кто знал бы о формате SVG лучше, чем Йоксель. Очень советую заглянуть на её сайт и изучить подборку полезных ссылок, а также её материалы по этой теме.
Структура SVG-файла
SVG представляет собой обычный XML-файл, который можно просмотреть любым текстовым редактором. Если открыть любой такой файл, созданный в старой версии Adobe Illustrator, то можно увидеть следующее.
Здесь много лишнего кода, который добавил векторный редактор. Его можно безболезненно удалить.
Технически можно просто написать минимальный код для пустого места следующим образом.
Довольно бессмысленно. Давайте хотя бы добавим размеры.
Мы опять ничего не увидим на экране, но зато познакомились с атрибутами размера документа. Вместо px можно использовать другие единицы измерения или проценты.
Давайте хоть что-то нарисуем.
Мы увидим прямоугольник с окантовкой.
Прямоугольник нарисован при помощи rect, также заданы координаты левой верхней точки и размеры. Затем указан цвет для заполнения, цвет обводки и его толщина.
Когда мы используем SVG-разметку внутри HTML-документа, то можно опускать служебную информацию. Но если мы хотим сохранить код в отдельном SVG-файле, то желательно служебную информацию добавлять.
Минимальный код со служебной информацией может быть таким.
В первой строке размещается корневой элемент svg с указанием пространства имён. Далее внутри него идут различные теги. XML позволяет создавать любые теги, но «непонятные» будут игнорироваться. Содержимое файла должно находиться в Unicode-кодировке, но браузер знает об этом, поэтому эту информацию можно убрать из файла (см. первый пример).
Файл поддерживает комментарии, как и HTML-код. Вы также их можете удалять для уменьшения размера.
DOCTYPE также можно убрать по желанию. Мы так и сделали.
А вся важная информация находится в теге svg. У него есть атрибуты, а тег также может содержать дочерние элементы.
За свою историю SVG поменяла несколько версий, начиная с номера 1.0 в 1999 году, затем в 2001 появилась версия 1.1. Некоторые редакторы могут использовать другие версии, которые является частью версии 1.1. Лучше удалить эту информацию, чтобы браузер сам определял версию по умолчанию.
Атрибут id часто добавляется иллюстратором или другим редактором. Он может пригодится, если вы используете CSS и JavaScript. В других случаях можно удалить.
Атрибут enable-background служит для указания фона, но браузер не поддерживает его. Поэтому можно удалить.
Атрибуты width и height также можно удалить в большинстве случаев, но лучше оставлять, чтобы не получить сюрпризов. Объявлять их можно в любом порядке.
Атрибут xml:space=»preserve» не поддерживается браузерами. Значит и его удаляем.
Чтобы вручную не удалять кучу мусора из файла, воспользуйтесь готовым онлайн-инструментом SVGOMG — SVGO’s Missing GUI
Последние версии 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.
Некоторые редакторы создают свои собственные пространства имён, их можно удалять.
Может использоваться тег title для заголовка.
A cute cat В браузере заголовок выводится в виде всплывающей подсказки, если SVG используется как встроенный документ. Если вывести в браузере SVG как отдельный файл, то заголовок отображается на вкладке.
Заголовки можно указывать и внутри отдельных блоков (см. ниже). Они тоже будут выводиться в браузере в виде всплывающей подсказки.
В SVG можно указать собственные ссылки на различные части элемента для интерактивности.
Можно создать ссылку на другой фрагмент файла и использовать его в качестве идентификатора. Например, часто используется в теге use. В следующем примере значок, заданный в теге symbol используется далее в другом месте как отдельный элемент.
Векторные редакторы могут вставлять свои собственные пространства имён. Например, Inkscape вставляет следующее.
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" inkscape:version="0.91 r13725" sodipodi:docname="drawing.svg"Для использования на веб-странице эти записи можно удалить для уменьшения размера файла.
SVG можно связать с кодом CSS и JavaScript. В дальнейших примерах будут встречаться образцы такого сочетания.
Разрабатывается новая версия SVG 2, где произошли некоторые изменения. В частности можно использовать чистые ссылки HTML.
Но на данный момент браузеры не поддерживают новую версию, поэтому применять ещё рано.
Атрибуты width, height, preserveAspectRatio и viewBox определяют холст для создаваемой графики.
ViewBox
Следующий важный атрибут — это viewBox. Ему мы посвятим отдельную статью.
Тег
Элемент используется для логической группировки набора связанных графических элементов. Это можно сравнить с группировкой объектов в графических редакторах. Он объединяет в группу всё свое содержимое. Как правило, ему задается идентификатор, по которому будет производиться обращение в дальнейшем. Любые стили, применяемые к элементу , будут также применены ко всем его потомкам. Это позволяет задавать стили и преобразования, а также добавлять интерактивность и анимацию сразу целой группе объектов.
В качестве примера будем использовать нарисованную в SVG птичку. Она состоит из нескольких отдельных фигур, описываемых кругами и путями.
В примере помимо общей группы для всей птички (id=»bird») выделены также подгруппы, определяющие отдельно голову и тело (id=»body», ).
Если вы измените цвет заливки группы #body, изменится заливка всех элементов внутри группы. Это может быть очень удобно.
Группировка элементов может быть очень полезна не только для организации и структурирования документа. Особую пользу она может принести, если вы захотите добавить к SVG-графике интерактивности или задать какие-то преобразования. Сгруппировав элементы, можно перемещать их, масштабировать или поворачивать все вместе, сохраняя их положение друг относительно друга.
Так, в случае со сгруппированной птицей можно масштабировать её всего одной строкой CSS:
#bird
Группировка добавляет удобств при реализации интерактивности. Вы можете повесить события мыши на всю птицу целиком и заставить ее реагировать также целиком. Это куда удобнее, чем проделывать то же самое для каждого элемента в отдельности.
Кроме того, группировка уменьшает количество кода. Допустим мы нарисовали светофор с тремя одинаковыми кругами. Круги отличаются друг от друга только цветом заливки, а все остальные свойства идентичны. Если мы захотим поменять какое-то свойство, то придётся менять во всех кругах. Но можно вынести общие свойства в тег g и менять придётся только в одном месте, например, цвет и толщину обводки.
С помощью данный элемент можно скопировать:
В корневом SVG-элементе необходимо объявить пространство имен xlink, чтобы ссылка работала.
Новая копия унаследует все качества оригинала, по умолчанию она будет неотличима от настоящего элемента. Чтобы дубликат стал уникальным, в него необходимо внести изменения, но следует быть внимательным. Например, мы сделаем так.
Дубликат будет иметь красный цвет, а не синий, так как атрибут fill изначально задан в исходном элементе.
Но в копию вполне можно добавить новый атрибут, которого нет в оригинале:
Дубликат так и останется красного цвета, но у него появится зелёный контур.
Пример для птички. Например, если мы хотим добавить еще одну птичку, вместо копирования ее кода можно использовать тег :
Обратите внимание, что в атрибуте xlink:href вы можете ссылаться на любой SVG-элемент, даже находящийся во внешнем файле. Это очень удобно использовать для организации (например, можно иметь файл с повторно используемыми компонентами) или для кэширования часто используемых файлов.
Допустим, наша птичка была создана в отдельном файле animals.svg. В этом случае ссылаться на нее можно так:
Координаты, задаваемые элементу отсчитываются не от начала координат всего SVG-изображения. На самом деле это сокращенная форма записи атрибута transform. Следующие две строчки являются эквивалентными:
Проще говоря, координаты задаются относительно исходного элемента. Такое поведение не всегда оптимально и может быть недостатком.
Другим недостатком является то, что копии будут использовать те же стили, что и исходный элемент. При применении стилей или преобразований к группе #bird эти стили и преобразования будут распространяться на все ее копии.
Однако вы все-таки можете применить независимое преобразование к элементу . Например, следующая строка кода позволяет повторно использовать птичку, размеры которой будут составлять лишь половину от размеров исходной:
При этом принцип работы системы координат может показаться несколько неожиданным. Она также масштабируется. Если исходный элемент был спозиционирован в 100 пикселях от края изображения, то такая его копия будет расположена в 50 пикселях от края. На задаваемые x и y это тоже распространяется. Таким образом, слова о расположении копии относительно исходного элемента не совсем верны.
В отличие от преобразований, переопределить стили копии нельзя. Таким образом, если вы захотите создать армию птичек разного цвета, то использовать для этого не получится (если только исходный элемент не определен внутри без своих стилей, но об этом в следующем разделе).
Элемент позволяет повторно использовать элемент, который уже отображается на SVG-изображении. Если же вы хотите просто определить элемент, не отображая его, а затем отрисовать в нужном месте, когда это потребуется, на помощь придет элемент .
defs
Чтобы избежать проблемы со свойствами, которые мы хотим переопределить, используют тег . В таком случае все атрибуты оригинала не будут передаваться на его клон.
Храниться в может что угодно, начиная с группы элементов, вроде нашей птички, и заканчивая маской или градиентом. Это шаблон для дальнейшего использования. Сам по себе он никогда не отображается, только использующие его сущности.
Всё, что описано в теге defs, не будет отрисовано в SVG; заданные элементы будут показываться только через ссылки. Теперь добавим клону атрибуты, которых нет у оригинала:
Мы создали первый видимый круг. Радиус круга равен 20, что унаследовано от оригинала, но в то же время у него своя позиция и цвет. Можно создать еще один дубликат, просто скопировав тег use:
Имея набор иконок в SVG-файле, можно использовать их повторно через конструкцию:
где some_svg_element_id — id элемента внутри исходного SVG файла.
К отдельно взятому элементу можно применять SVG трансформации: