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

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

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

Изображения SVG и их поведение определены в текстовых файлах XML. Это означает, что их можно искать , индексировать , создавать сценарии и сжимать . Как файлы XML, изображения SVG можно создавать и редактировать с помощью любого текстового редактора , а также с помощью программного обеспечения для рисования . Арабский Unicode программист и каллиграф , Томас Мило кредитует адаптационный SVG Википедии в качестве причины , почему компактная технология визуализации приобрела популярность. [3]

Все основные современные веб-браузеры, включая Mozilla Firefox , Internet Explorer , Google Chrome , Opera , Safari и Microsoft Edge , поддерживают рендеринг SVG .

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

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

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

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

Печать

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

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

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

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

Сжатие

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

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

  • Веб-схемы, от CCLRC [13]
  • PGML от Adobe Systems , IBM , Netscape и Sun Microsystems [14]
  • VML от Autodesk , Hewlett-Packard , Macromedia , Microsoft и Vision [15]
  • Язык гиперграфической разметки (HGML) от Orange UK и PRP [16]
  • WebCGM от Boeing , InterCAP Graphics Systems, Inso Corporation , CCLRC и Xerox [17]
  • DrawML, от Excosoft AB [4]

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

Версия 1.x

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

Версия 2.x

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

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

Он достиг стадии рекомендации кандидата 15 сентября 2016 г. Последний проект был выпущен 26 мая 2020 г. [27]

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

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

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

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

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

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

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

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

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

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

Пути
Контуры простых или составных фигур рисуются изогнутыми или прямыми линиями, которые можно заливать, обводить или использовать в качестве обтравочного контура . Пути имеют компактную кодировку.
Например, M(для «перейти к») предшествует начальным числовым координатам x и y , а (для «линии до») предшествует точке, до которой должна быть проведена линия. Другие командные буквы ( , , , , и ) данные предшествуют , которые используются , чтобы привлечь различные Безье и эллиптические кривые. используется для закрытия пути. LCSQTAZ
Во всех случаях абсолютные координаты следуют за командами заглавных букв, а относительные координаты используются после эквивалентных букв нижнего регистра. [39]
Основные формы
Можно рисовать прямолинейные пути и пути, состоящие из серии соединенных прямых отрезков (полилиний), а также замкнутых многоугольников, окружностей и эллипсов. Прямоугольники и прямоугольники с закругленными углами также являются стандартными элементами. [40]
Текст
Текст символов Unicode, включенный в файл SVG, выражается как символьные данные XML . Возможны многие визуальные эффекты, и спецификация SVG автоматически обрабатывает двунаправленный текст (например, для создания комбинации английского и арабского текста), вертикальный текст (как исторически писали китайский) и символы вдоль изогнутого пути (например, текст вокруг край Великой печати Соединенных Штатов ). [41]
Картина
Фигуры SVG можно заливать и обводить (раскрашивать цветом, градиентом или узором). Заливки могут быть непрозрачными или иметь любую степень прозрачности.
«Маркеры» - это объекты на конце линии, такие как стрелки или символы, которые могут появляться в вершинах многоугольника. [42]
Цвет
Цвета могут быть применены ко всем видимым элементам SVG, либо непосредственно , либо с помощью fill, strokeи другие свойства. Цвета задаются так же, как в CSS2 , то есть с использованием имен, таких как blackили blue, в шестнадцатеричном виде, например #2f0или #22ff00, в десятичном виде rgb(255,255,127)или в процентах от формы rgb(100%,100%,50%). [43]
Градиенты и узоры
Фигуры SVG могут быть заполнены или обведены сплошными цветами, как указано выше, или цветовыми градиентами, или повторяющимися узорами. Цветовые градиенты могут быть линейными или радиальными (круговыми) и могут включать любое количество цветов, а также повторения. Также можно указать градиенты непрозрачности. Узоры основаны на предварительно определенных объектах растровой или векторной графики, которые могут повторяться в xразных yнаправлениях. Градиенты и узоры можно анимировать и создавать сценарии. [44]
С 2008 года среди профессиональных пользователей SVG ведется дискуссия [45] [46] о том, что в спецификацию SVG можно с пользой добавить градиентные сетки или предпочтительно кривые диффузии . Говорят, что «простое представление [с использованием кривых диффузии] способно представить даже очень тонкие эффекты затенения» [47] и что «изображения кривых диффузии сопоставимы как по качеству, так и по эффективности кодирования с градиентными сетками, но их проще создать ( по словам нескольких художников, которые использовали оба инструмента), и может быть полностью автоматически захвачен из растровых изображений ". [48] Текущий проект SVG 2 включает градиентные сетки. [49]
Обрезка, маскирование и композитинг
Графические элементы, включая текст, контуры, основные формы и их комбинации, можно использовать в качестве контуров для определения как внутренних, так и внешних областей, которые можно раскрашивать (цветами, градиентами и узорами) независимо. Полностью непрозрачные пути отсечения и полупрозрачные маски будут собраны вместе , чтобы вычислить цвет и прозрачность каждого пикселя конечного изображения, используя альфа - смешивание. [50]
Эффекты фильтра [51]
Эффект фильтра состоит из серии графических операций, которые применяются к заданной исходной векторной графике для получения модифицированного растрового результата.
Интерактивность
Изображения SVG могут взаимодействовать с пользователями разными способами. В дополнение к гиперссылкам, упомянутым ниже, любая часть изображения SVG может быть сделана восприимчивой к событиям пользовательского интерфейса, таким как изменение фокуса , щелчки мыши, прокрутка или масштабирование изображения и другие события указателя, клавиатуры и документа. Обработчики событий могут запускать, останавливать или изменять анимацию, а также запускать сценарии в ответ на такие события. [52]
Связывание
Изображения SVG могут содержать гиперссылки на другие документы с использованием XLink . Благодаря использованию элемента или идентификатор фрагмента , URL - адреса можно связать с SVG - файлов , которые изменяют видимую область документа. Это позволяет создавать определенные состояния просмотра, которые используются для увеличения / уменьшения определенной области или для ограничения просмотра определенным элементом. Это полезно при создании спрайтов . Поддержка XLink в сочетании с элементом также позволяет связывать и повторно использовать внутренние и внешние элементы. Это позволяет кодировщикам делать больше с меньшим количеством разметки и делает код более чистым. [53]
Сценарии
Доступ ко всем аспектам документа SVG и управление ими с помощью сценариев аналогично HTML. Язык сценариев по умолчанию - JavaScript, и для каждого элемента и атрибута SVG определены объекты объектной модели документа (DOM). Скрипты заключены в
Contribute a better translation