Масштабируемая векторная графика - Scalable Vector Graphics

"SVG" перенаправляется сюда. Чтобы узнать о других значениях, см. SVG (значения) .
Для получения справки об изображениях SVG в Википедии см. Википедия: справка по SVG .

Масштабируемая векторная графика
SVG Logo.svg
Тип интернет-СМИ image/svg+xml
Единый идентификатор типа (UTI) public.svg-image
Разработано W3C
Первый выпуск 4 сентября 2001 г. (20 лет назад) (2001-09-04)
Последний релиз
1.1 (Второе издание)
(16 августа 2011 г . ; 10 лет назад ) (2011-08-16)
Тип формата Векторная графика
Расширен с XML
Стандарт W3C SVG
Открытый формат ? да
Веб-сайт www .w3 .org / Графика / SVG /

Масштабируемая векторная графика ( SVG ) - это формат векторных изображений на основе ( XML ) для двумерной графики с поддержкой интерактивности и анимации. Спецификация SVG - это открытый стандарт, разработанный консорциумом World Wide Web (W3C) с 1999 года.

Изображения SVG и их поведение определяются в текстовых файлах XML. Это означает, что их можно искать , индексировать , создавать сценарии и сжимать , а также можно масштабировать по размеру без потери качества. Как файлы XML, изображения SVG можно создавать и редактировать с помощью любого текстового редактора , а также с помощью программного обеспечения для рисования . Наиболее часто используемые веб-браузеры отображают файлы SVG .

Обзор

Это изображение иллюстрирует разницу между растровыми и векторными изображениями. Растровое изображение состоит из фиксированного набора пикселей, а векторное изображение состоит из фиксированного набора фигур. На рисунке масштабирование растрового изображения показывает пиксели, а масштабирование векторного изображения сохраняет формы.

SVG находится в разработке в рамках Консорциума World Wide Web (W3C) с 1999 г. после того, как в 1998 г. консорциуму было представлено шесть конкурирующих предложений по языкам векторной графики. Первая рабочая группа по SVG решила не разрабатывать какие-либо коммерческие предложения, а создать новый язык разметки, основанный на них, но не основанный ни на одном из них.

SVG допускает три типа графических объектов: векторные графические фигуры, такие как контуры и контуры, состоящие из прямых линий и кривых, растровые изображения и текст. Графические объекты могут быть сгруппированы, стилизованы, преобразованы и объединены в ранее визуализированные объекты. Набор функций включает вложенные преобразования , контуры обрезки , альфа-маски , эффекты фильтров и объекты шаблонов. Рисунки SVG могут быть интерактивными и включать анимацию , определенную в элементах SVG XML или с помощью сценариев, которые обращаются к объектной модели документа SVG (DOM). SVG использует CSS для стилизации и JavaScript для написания скриптов. Текст, включая интернационализацию и локализацию , отображаемый в виде обычного текста в SVG DOM, повышает доступность SVG-графики.

Спецификация SVG была обновлена ​​до версии 1.1 в 2011 году. Существует два «мобильных профиля SVG», SVG Tiny и SVG Basic, предназначенные для мобильных устройств с ограниченными вычислительными возможностями и возможностями отображения. Масштабируемая векторная графика 2 стала кандидатом в рекомендацию W3C 15 сентября 2016 года. SVG 2 включает несколько новых функций в дополнение к SVG 1.1 и SVG Tiny 1.2.

Печать

Хотя спецификация SVG в первую очередь ориентирована на язык разметки векторной графики , ее дизайн включает в себя основные возможности языка описания страниц, такого как Adobe PDF . Он содержит условия для богатой графики и совместим с CSS для стилизации. SVG содержит информацию, необходимую для размещения каждого глифа и изображения в выбранном месте на печатной странице.

Скрипты и анимация

Основная статья: SVG-анимация

Рисунки SVG могут быть динамическими и интерактивными. Основанные на времени модификации элементов могут быть описаны в SMIL или могут быть запрограммированы на языке сценариев (например, JavaScript ). W3C явно рекомендует SMIL в качестве стандарта анимации в SVG.

Богатый набор обработчиков событий, таких как onmouseover и onclick, может быть назначен любому графическому объекту SVG для применения действий и событий.

Сжатие

Изображения SVG, будучи XML, содержат множество повторяющихся фрагментов текста, поэтому они хорошо подходят для алгоритмов сжатия данных без потерь . Когда изображение SVG было сжато с помощью алгоритма gzip , оно называется изображением «SVGZ» и использует соответствующее .svgzрасширение имени файла. Программы просмотра, соответствующие стандарту SVG 1.1, будут отображать сжатые изображения. Файл SVGZ обычно составляет от 20 до 50 процентов от исходного размера. W3C предоставляет файлы SVGZ для проверки на соответствие.

История развития

SVG был разработан рабочей группой W3C SVG, начиная с 1998 года, после того, как в этом году было получено шесть конкурирующих заявок на векторную графику:

В то время рабочую группу возглавлял Крис Лилли из W3C.

Версия 1.x

  • SVG 1.0 стал Рекомендацией W3C 4 сентября 2001 г.
  • SVG 1.1 стал Рекомендацией W3C 14 января 2003 года. Спецификация SVG 1.1 разбита на модули, чтобы можно было определять подмножества как профили. Кроме того, между SVG 1.1 и SVG 1.0 очень мало различий.
    • SVG Tiny и SVG Basic (мобильные профили SVG) стали Рекомендациями W3C 14 января 2003 г. Они описаны как профили SVG 1.1.
  • SVG Tiny 1.2 стал Рекомендацией W3C 22 декабря 2008 года. Первоначально он был разработан как профиль запланированного SVG Full 1.2 (который с тех пор был заменен SVG 2), но позже был переработан как отдельная спецификация. Это вообще плохо поддерживается.
  • Второе издание SVG 1.1, которое включает в себя все исправления и уточнения, но не было выпущено никаких новых функций к исходному SVG 1.1 16 августа 2011 года.
  • SVG Tiny 1.2 Portable / Secure, более безопасное подмножество профиля SVG Tiny 1.2, представленное в качестве чернового стандарта IETF 29 июля 2020 года. Также известно как SVG Tiny P / S. SVG Tiny 1.2 Portable / Secure является требованием проекта стандарта BIMI .

Версия 2

SVG 2 удаляет или отменяет некоторые функции SVG 1.1 и включает новые функции HTML5 и Web Open Font Format :

  • Например, SVG 2 удаляет несколько элементов шрифта, таких как glyphи altGlyph(заменяется форматом шрифта WOFF).
  • xml:spaceАтрибут является устаревшим в пользу CSS.
  • Были добавлены такие функции HTML5, как translateи data-*атрибуты.
  • Функции обработки текста из SVG Tiny 1.2 аннотированы для включения, но еще не формализованы в тексте. Некоторые другие функции 1.2 были тщательно отобраны, но SVG 2 не является расширенным набором SVG tiny 1.2 в целом.

SVG 2 достиг стадии рекомендации кандидата 15 сентября 2016 года, а исправленные версии были опубликованы 7 августа 2018 года и 4 октября 2018 года. Последний проект был выпущен 8 июня 2021 года.

Мобильные профили

В связи с отраслевым спросом в SVG 1.1 были представлены два мобильных профиля: SVG Tiny (SVGT) и SVG Basic (SVGB).

Это подмножества полного стандарта SVG, в основном предназначенные для пользовательских агентов с ограниченными возможностями. В частности, SVG Tiny был определен для мобильных устройств с жесткими ограничениями, таких как сотовые телефоны ; он не поддерживает стили или сценарии. SVG Basic был определен для мобильных устройств более высокого уровня, таких как смартфоны .

В 2003 году 3GPP , международная группа телекоммуникационных стандартов, приняла SVG Tiny в качестве обязательного мультимедийного формата векторной графики для телефонов следующего поколения. SVGT является обязательным форматом векторной графики, а поддержка SVGB является необязательной для службы обмена мультимедийными сообщениями (MMS) и службы потоковой передачи с коммутацией пакетов. Позже он был добавлен в качестве необходимого формата для векторной графики в подсистеме мультимедиа IP 3GPP (IMS).

Отличия от немобильного SVG

Ни один из мобильных профилей не включает поддержку полной объектной модели документа (DOM), в то время как только SVG Basic имеет дополнительную поддержку сценариев, но поскольку они являются полностью совместимыми подмножествами полного стандарта, большая часть графики SVG может отображаться на устройствах, поддерживающих только мобильные профили.

SVGT 1.2 добавляет microDOM (μDOM), стили и сценарии.

Связанных с работой

Стандарт MPEG-4 Part 20 - облегченное представление сцены приложения (LASeR) и простой формат агрегирования (SAF) основан на SVG Tiny. Он был разработан MPEG ( ISO / IEC JTC1 / SC29 / WG11) и опубликован как ISO / IEC 14496-20: 2006. Возможности SVG расширены в MPEG-4 Part 20 ключевыми функциями для мобильных сервисов, такими как динамическое обновление, двоичное кодирование, представление шрифтов по последнему слову техники. SVG также был включен в MPEG-4 Part 11 в формате Extensible MPEG-4 Textual (XMT) - текстовое представление мультимедийного контента MPEG-4 с использованием XML .

Функциональность

Спецификация SVG 1.1 определяет 14 функциональных областей или наборов функций:

Пути
Контуры простых или составных фигур рисуются изогнутыми или прямыми линиями, которые можно заливать, обводить или использовать в качестве обтравочного контура . Пути имеют компактную кодировку.
Например, M(для «переместить в») предшествует начальным числовым координатам x и y , а (для «линии до») предшествует точке, до которой должна быть проведена линия. Другие командные буквы ( , , , , и ) данные предшествуют , которые используются , чтобы привлечь различные Безье и эллиптические кривые. используется для закрытия пути.LCSQTAZ
Во всех случаях абсолютные координаты следуют за командами с заглавными буквами, а относительные координаты используются после эквивалентных букв в нижнем регистре.
Основные формы
Можно рисовать прямолинейные пути и пути, состоящие из серии соединенных прямых отрезков (полилиний), а также замкнутых многоугольников, окружностей и эллипсов. Прямоугольники и прямоугольники с закругленными углами также являются стандартными элементами.
Текст
Текст символов Unicode, включенный в файл SVG, выражается как символьные данные XML . Возможны многие визуальные эффекты, и спецификация SVG автоматически обрабатывает двунаправленный текст (например, для составления комбинации английского и арабского текста), вертикальный текст (как исторически писали китайский) и символы по изогнутой траектории (например, текст вокруг край Большой печати Соединенных Штатов ).
Рисование
Фигуры SVG можно заливать и обводить (раскрашивать цветом, градиентом или узором). Заливки могут быть непрозрачными или иметь любую степень прозрачности.
«Маркеры» - это объекты на конце линии, такие как стрелки или символы, которые могут появляться в вершинах многоугольника.
Цвет
Цвета могут быть применены ко всем видимым элементам SVG, либо непосредственно , либо с помощью fill, strokeи другие свойства. Цвета задаются так же, как в CSS2 , то есть с использованием имен, таких как blackили blue, в шестнадцатеричном формате, например #2f0или #22ff00, в десятичном виде rgb(255,255,127)или в процентах от формы rgb(100%,100%,50%).
Градиенты и узоры
Фигуры SVG могут быть заполнены или обведены сплошными цветами, как указано выше, или цветовыми градиентами, или повторяющимися узорами. Цветовые градиенты могут быть линейными или радиальными (круговыми) и могут включать любое количество цветов, а также повторения. Также можно указать градиенты непрозрачности. Узоры основаны на предварительно определенных объектах растровой или векторной графики, которые могут повторяться в xразных yнаправлениях. Градиенты и узоры можно анимировать и создавать сценарии.
С 2008 года профессиональные пользователи SVG обсуждают, что в спецификацию SVG можно с пользой добавить градиентные сетки или, желательно, кривые диффузии . Говорят, что «простое представление [с использованием кривых диффузии] способно представить даже очень тонкие эффекты затенения» и что «изображения кривых диффузии сопоставимы как по качеству, так и по эффективности кодирования с градиентными сетками, но их проще создать (по мнению некоторых художники, которые использовали оба инструмента), и могут быть полностью автоматически захвачены из растровых изображений ". Текущий проект SVG 2 включает градиентные сетки.
Обрезка, маскирование и композитинг
Графические элементы, включая текст, контуры, основные формы и их комбинации, можно использовать в качестве контуров для определения как внутренних, так и внешних областей, которые можно раскрашивать (цветами, градиентами и узорами) независимо. Полностью непрозрачные пути отсечения и полупрозрачные маски будут собраны вместе , чтобы вычислить цвет и прозрачность каждого пикселя конечного изображения, используя альфа - смешивание.
Эффекты фильтра
Основная статья: эффекты фильтра SVG
Эффект фильтра состоит из серии графических операций, которые применяются к заданной исходной векторной графике для получения модифицированного растрового результата.
Интерактивность
Изображения SVG могут взаимодействовать с пользователями разными способами. В дополнение к гиперссылкам, упомянутым ниже, любая часть изображения SVG может быть сделана восприимчивой к событиям пользовательского интерфейса, таким как изменение фокуса , щелчки мыши, прокрутка или масштабирование изображения и другие события указателя, клавиатуры и документа. Обработчики событий могут запускать, останавливать или изменять анимацию, а также запускать сценарии в ответ на такие события.
Связывание
Изображения SVG могут содержать гиперссылки на другие документы с использованием XLink . Благодаря использованию <view>элемента или идентификатор фрагмента , URL - адреса можно связать с SVG - файлов , которые изменяют видимую область документа. Это позволяет создавать определенные состояния просмотра, которые используются для увеличения / уменьшения определенной области или для ограничения просмотра определенным элементом. Это полезно при создании спрайтов . Поддержка XLink в сочетании с <use>элементом также позволяет связывать и повторно использовать внутренние и внешние элементы. Это позволяет кодерам делать больше с меньшим количеством разметки и делает код более чистым.
Сценарии
Доступ ко всем аспектам документа SVG и управление ими с помощью сценариев аналогично HTML. Язык сценариев по умолчанию - JavaScript, и для каждого элемента и атрибута SVG определены объекты объектной модели документа (DOM). Скрипты заключены в <script>элементы. Они могут запускаться в ответ на события указателя, события клавиатуры и события документа по мере необходимости.
Анимация
Основная статья: SVG-анимация
Содержимое SVG можно анимировать с помощью встроенных элементов анимации, таких как <animate>, <animateMotion>и <animateColor>. Контент можно анимировать, управляя DOM с помощью ECMAScript и встроенных таймеров языка сценариев. SVG-анимация была разработана для совместимости с текущими и будущими версиями языка синхронизированной интеграции мультимедиа (SMIL). Анимации могут быть непрерывными, они могут повторяться и повторяться, и они могут реагировать на пользовательские события, как упоминалось выше.
Шрифты
Как и в случае с HTML и CSS, текст в SVG может ссылаться на файлы внешних шрифтов, например системные шрифты. Если требуемые файлы шрифтов отсутствуют на машине, на которой визуализируется файл SVG, текст может отображаться не так, как задумано. Чтобы преодолеть это ограничение, текст может отображаться шрифтом SVG , где необходимые глифы определены в SVG как шрифт, на который затем ссылается <text>элемент.
Метаданные
В соответствии с W3C «ы Semantic Web инициативного, SVG позволяет авторам предоставлять метаданные о содержании SVG. Основное средство - это <metadata>элемент, в котором документ может быть описан с использованием свойств метаданных Dublin Core (например, заголовок, создатель / автор, тема, описание и т. Д.). Также могут использоваться другие схемы метаданных. Кроме того, SVG определяет элементы <title>и <desc>элементы, авторы которых могут также предоставить описательный материал в виде простого текста в изображении SVG, чтобы облегчить индексацию, поиск и извлечение с помощью ряда средств.

Документ SVG может определять компоненты, включая формы, градиенты и т. Д., И использовать их повторно. Изображения SVG также могут содержать растровую графику , такую ​​как изображения PNG и JPEG , и другие изображения SVG.

Пример

SVG example markup grid.svg

Этот код будет создавать цветные формы, показанные на изображении, за исключением сетки и меток: 

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="391" height="391" viewBox="-70.5 -70.5 391 391" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect fill="#fff" stroke="#000" x="-70" y="-70" width="390" height="390"/>
<g opacity="0.8">
	<rect x="25" y="25" width="200" height="200" fill="lime" stroke-width="4" stroke="pink" />
	<circle cx="125" cy="125" r="75" fill="orange" />
	<polyline points="50,150 50,200 200,200 200,100" stroke="red" stroke-width="4" fill="none" />
	<line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" />
</g>
</svg>

SVG в сети

SVG экспортирован из КОМПАС-Графика  [ Викиданные ]

Использование SVG в Интернете было ограничено из-за отсутствия поддержки в более старых версиях Internet Explorer (IE). Многие веб-сайты, которые обслуживают изображения SVG, также предоставляют изображения в растровом формате либо автоматически путем согласования содержимого HTTP, либо путем предоставления пользователю возможности напрямую выбирать файл.

31 августа 2010 года Google объявил, что он начал индексировать SVG-контент в Интернете, независимо от того, находится ли он в отдельных файлах или встроен в HTML , и что пользователи начнут видеть такой контент в списке результатов поиска. 8 декабря 2010 года было объявлено, что Google Image Search также начнет индексирование файлов SVG. Сайт объявил о возможности ограничить поиск изображений файлами SVG 11 февраля 2011 года.

Встроенная поддержка браузера

Konqueror был первым браузером, который поддерживал SVG в версии 3.2, выпущенной в феврале 2004 года. По состоянию на 2011 год все основные браузеры для настольных ПК и многие второстепенные имеют определенный уровень поддержки SVG. Реализации других браузеров еще не завершены; см. сравнение двигателей компоновки для получения дополнительной информации.

Некоторым более ранним версиям Firefox (например, версиям от 1.5 до 3.6), а также небольшому количеству других уже устаревших веб-браузеров, способных отображать графику SVG, требовалось, чтобы они были встроены <object>или <iframe> элементы для их отображения были интегрированы как части веб-страницы HTML вместо используя стандартный способ интеграции изображений с <img>. Однако изображения SVG могут быть включены в страницы XHTML с использованием пространств имен XML .

Тим Бернерс-Ли , изобретатель Всемирной паутины , критиковал ранние версии Internet Explorer за то, что они не поддерживали SVG.

  • Opera (начиная с версии 8.0) поддерживает спецификацию SVG 1.1 Tiny, а Opera 9 включает поддержку SVG 1.1 Basic и часть SVG 1.1 Full. Opera 9.5 частично поддерживает SVG Tiny 1.2. Он также поддерживает SVGZ (сжатый SVG).
  • Все браузеры, основанные на механизме компоновки Gecko (например, Firefox , Flock , Camino и SeaMonkey ), не полностью поддерживают полную спецификацию SVG 1.1 с 2005 года. На сайте Mozilla есть обзор модулей, которые поддерживаются в Firefox, и модули, которые находятся в разработке. Gecko 1.9, включенный в Firefox 3.0 , добавляет поддержку большей части спецификации SVG (включая фильтры).
  • Pale Moon , использующий механизм компоновки Goanna ( ответвление движка Gecko ), поддерживает SVG.
  • Браузеры на основе WebKit (например, Apple , 's Safari , Google Chrome и The Omni Group ' ы OmniWeb ) имели неполную поддержку SVG 1.1 Полная спецификация с 2006 года.
  • Amaya частично поддерживает SVG.
  • Internet Explorer 8 и более ранние версии не поддерживают SVG. IE9 (выпущен 14 марта 2011 г.) поддерживает базовый набор функций SVG. IE10 расширил поддержку SVG за счет добавления фильтров SVG 1.1.
  • Microsoft Edge поддерживает SVG 1.1.
  • Браузер Maxthon Cloud также поддерживает SVG.

У встроенной и полной поддержки есть несколько преимуществ: плагины не нужны, SVG можно свободно смешивать с другим контентом в одном документе, а рендеринг и сценарии становятся значительно более надежными.

Мобильная поддержка

SVG Tiny (SVGT) 1.1 и 1.2 - мобильные профили для SVG. SVGT 1.2 включает в себя некоторые функции, отсутствующие в SVG 1.1, в том числе немасштабируемые штрихи, которые поддерживаются некоторыми реализациями SVG 1.1, такими как Opera, Firefox и WebKit. По мере увеличения общих кодовых баз между настольными и мобильными браузерами также увеличивалось использование SVG 1.1 по сравнению с SVGT 1.2.

Поддержка SVG может быть ограничена SVGT на старых или более ограниченных смартфонах или может быть в основном ограничена их соответствующей операционной системой. Adobe Flash Lite опционально поддерживает SVG Tiny, начиная с версии 1.1. На конференции SVG Open 2005 Sun продемонстрировала мобильную реализацию SVG Tiny 1.1 для платформы Connected Limited Device Configuration (CLDC).

Мобильные телефоны, использующие Opera Mobile , а также встроенный браузер iPhone также включают поддержку SVG. Однако, несмотря на то, что он использовал движок WebKit , встроенный браузер Android не поддерживал SVG до версии 3.0 (Honeycomb). До версии 3.0 Firefox Mobile 4.0b2 (бета) для Android был первым браузером, работающим под Android, который по умолчанию поддерживал SVG.

Уровень доступной поддержки SVG Tiny варьируется от мобильного к мобильному, в зависимости от установленного движка SVG. Многие новые мобильные продукты поддерживают дополнительные функции помимо SVG Tiny 1.1, такие как градиент и непрозрачность; его иногда называют «SVGT 1.1+», хотя такого стандарта нет.

RIM «s BlackBerry имеет встроенную поддержку SVG Tiny 1.1 начиная с версии 5.0. Продолжается поддержка браузера BlackBerry Torch на базе WebKit в OS 6 и 7.

Nokia «s платформа S60 имеет встроенную поддержку SVG. Например, значки обычно отображаются с использованием механизма SVG платформы. Nokia также возглавляла группу экспертов JSR 226: Scalable 2D Vector Graphics API, которая определяет Java ME API для представления и обработки SVG. Этот API был реализован в S60 Platform 3rd Edition Feature Pack 1 и более поздних версиях. Некоторые телефоны Series 40 также поддерживают SVG (например, Nokia 6280 ).

Большинство телефонов Sony Ericsson, начиная с K700 (по дате выпуска), поддерживают SVG Tiny 1.1. Телефоны, начиная с K750, также поддерживают такие функции, как прозрачность и градиенты. Телефоны с Sony Ericsson Java Platform-8 поддерживают JSR 226.

Windows Phone поддерживает SVG с версии 7.5.

SVG также поддерживается на различных мобильных устройствах от Motorola , Samsung , LG и Siemens mobile / BenQ-Siemens . eSVG, библиотека рендеринга SVG, в основном написанная для встраиваемых устройств, доступна на некоторых мобильных платформах.

Поддержка приложения

Изображения SVG можно создавать с помощью редактора векторной графики , такого как Inkscape , Adobe Illustrator , Adobe Flash Professional или CorelDRAW , и визуализировать в распространенные форматы растровых изображений, такие как PNG, с использованием того же программного обеспечения. Кроме того, редактора , как Inkscape и квадратная SVG предоставляют инструменты для трассировки растровых изображений , кривые Безье , как правило , используя изображение трассировки задней части конвейера , как Potrace , автотрассировку и imagetracerjs .

Программное обеспечение можно запрограммировать для рендеринга изображений SVG с помощью библиотеки, такой как librsvg, используемой GNOME с 2000 года, Batik или ThorVG с 2020 года для облегченных систем. Изображения SVG также можно преобразовать в любой желаемый популярный формат изображения с помощью ImageMagick , бесплатной утилиты командной строки (которая также использует librsvg под капотом).

Другие варианты использования SVG включают встраивание для использования в текстовых редакторах (например, с LibreOffice ) и настольных издательских системах (например, Scribus ), построение графиков (например, gnuplot ) и импорт путей (например, для использования в GIMP или Blender ). Сервисы приложений Microsoft 365 и Microsoft Office 2019 предлагают поддержку экспорта, импорта и редактирования изображений SVG. Равномерное идентификатор типа для SVG используется Apple , это public.svg-imageи соответствует public.imageи public.xml.

Смотрите также

Масштабируемая векторная графика

использованная литература

внешние ссылки