SVG: Открытый стандарт для векторной графики

Введение

Открытый стандарт для двухмерной векторной графики. Информация о SVG-изображениях на Википедии.

Масштабируемая векторная графика (SVG) — это XML-формат векторного изображения для определения двухмерной графики с поддержкой интерактивности и анимации. Спецификация SVG — это открытый стандарт, разработанный консорциумом World Wide Web Consortium с 1999 года. SVG-изображения определяются в векторном формате и хранятся в текстовых файлах XML. Таким образом, SVG-изображения можно масштабировать без потери качества, а SVG-файлы можно просматривать, индексировать, использовать в скриптах и сжимать. Текстовые файлы XML можно создавать и редактировать с помощью текстовых редакторов или редакторов векторной графики, и они отображаются большинством веб-браузеров. Первоначальное распространение было ограничено из-за отсутствия поддержки в устаревших версиях Internet Explorer. Однако, начиная с 2011 года, все основные настольные браузеры стали поддерживать SVG. Встроенная поддержка браузерами предоставляет ряд преимуществ, таких как отсутствие необходимости в плагинах, возможность смешивания SVG с другим контентом и повышение надежности рендеринга и выполнения скриптов. Мобильная поддержка SVG существует в различных формах, при этом разные устройства и браузеры поддерживают SVG Tiny 1.1 или 1.2. SVG можно создавать с помощью редакторов векторной графики и преобразовывать в растровые форматы. В веб-приложениях Inline SVG позволяет встраивать SVG-контент непосредственно в HTML-документы. Несмотря на свои преимущества, SVG может представлять угрозу безопасности при использовании для изображений, поскольку он может содержать скрипты или CSS, что потенциально может привести к межсайтовым скриптовым атакам или другим уязвимостям.

Версия 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 Second Edition, включающий все исправления и уточнения, но не содержащий новых функций по сравнению с оригинальным 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. Некоторые другие функции из спецификации 1.2 были выборочно добавлены, но SVG 2 в целом не является надмножеством SVG Tiny 1.2. SVG 2 достигла стадии «Рекомендация-кандидат» 15 сентября 2016 года, а пересмотренные версии были опубликованы 7 августа 2018 года и 4 октября 2018 года. Последняя версия проекта была выпущена 8 марта 2023 года.

Особенности

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

Сценарий и анимация

SVG-рисунки могут быть динамичными и интерактивными. Изменения элементов с течением времени могут быть описаны с помощью SMIL или запрограммированы на языке сценариев (например, JavaScript). W3C однозначно рекомендует SMIL как стандарт для анимации в SVG. Любому графическому объекту SVG можно назначить широкий набор обработчиков событий, таких как "onmouseover" и "onclick", для выполнения действий и обработки событий.

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

В связи со спросом со стороны отрасли были введены два мобильных профиля SVG 1.1: SVG Tiny (SVGT) и SVG Basic (SVGB). Это подмножества полного стандарта SVG, предназначенные главным образом для пользовательских агентов с ограниченными возможностями. В частности, SVG Tiny был разработан для сильно ограниченных мобильных устройств, таких как сотовые телефоны; он не поддерживает стилизацию или скрипты. SVG Basic был разработан для мобильных устройств более высокого уровня, таких как смартфоны. В 2003 году 3GPP, международная группа по разработке телекоммуникационных стандартов, приняла SVG Tiny в качестве обязательного формата векторной графики для телефонов нового поколения. SVGT является требуемым форматом векторной графики, а поддержка SVGB является необязательной для службы мультимедийных сообщений (MMS) и пакетной передачи потокового видео. Позже он был добавлен в качестве обязательного формата для векторной графики в подсистеме IP Multimedia (IMS) 3GPP. Ни один из мобильных профилей не поддерживает полную модель объектного документа (DOM), при этом только SVG Basic имеет опциональную поддержку скриптов, но поскольку они являются полностью совместимыми подмножествами полного стандарта, большинство SVG-графики все еще могут быть отображены устройствами, поддерживающими только мобильные профили. SVGT 1.2 добавляет микроDOM (μDOM), стилизацию и скрипты. Файл SVGZ обычно составляет от 20 до 50 процентов от исходного размера. W3C предоставляет файлы SVGZ для проверки соответствия стандартам.

Реализация

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

Веб-браузеры

Konqueror был первым браузером, который поддерживал SVG в версии 3.2 в феврале 2004 года. По состоянию на 2011 год все основные настольные браузеры и многие незначительные браузеры имеют определенный уровень поддержки SVG. Реализации в других браузерах еще не завершены; подробности см. в сравнении движков отрисовки. Некоторые более ранние версии Firefox (например, версии между 1.5 и 3.6), а также некоторые другие устаревшие веб-браузеры, способные отображать SVG-графику, требовали встраивания 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), с 2005 года имеют неполную поддержку спецификации SVG 1.1 Full. На сайте Mozilla представлен обзор поддерживаемых в Firefox модулей и модулей, находящихся в разработке. Gecko 1.9, включенный в Firefox 3.0, добавляет поддержку большего количества спецификаций SVG (включая фильтры). Pale Moon, использующий движок отрисовки Goanna (ответвление от Gecko), поддерживает SVG. Браузеры, основанные на WebKit (такие как Safari от Apple, Google Chrome и OmniWeb от The Omni Group), имеют неполную поддержку спецификации SVG 1.1 Full с 2006 года. Amaya имеет частичную поддержку SVG. Internet Explorer 8 и более ранние версии не поддерживают SVG. IE9 (выпущен 14 марта 2011 года) поддерживает базовый набор функций SVG. IE10 расширил поддержку SVG, добавив фильтры SVG 1.1. Microsoft Edge Legacy поддерживает SVG 1.1. Maxthon Cloud Browser также поддерживает SVG. Существует несколько преимуществ нативной и полной поддержки: не требуются плагины, SVG можно свободно смешивать с другим контентом в одном документе, а отрисовка и скрипты становятся значительно более надежными.

Konqueror was the first browser to support SVG in release version 3.2 in February 2004. As of 2011, all major desktop browsers, and many minor ones, have some level of SVG support. Other browsers' implementations are not yet complete; see comparison of layout engines for further details. Some earlier versions of Firefox (e. g. versions between 1.5 and 3.6), as well as a smattering of other now outdated web browsers capable of displaying SVG graphics, needed them embedded in <object> or <iframe> elements to display them integrated as parts of an HTML webpage instead of using the standard way of integrating images with <img>. However, SVG images may be included in XHTML pages using XML namespaces. Tim Berners Lee, the inventor of the World Wide Web, was critical of early versions of Internet Explorer for its failure to support SVG. Opera (since 8.0) has support for the SVG 1.1 Tiny specification, while Opera 9 includes SVG 1.1 Basic support and some of SVG 1.1 Full. Opera 9.5 has partial SVG Tiny 1.2 support. It also supports SVGZ (compressed SVG). Browsers based on the Gecko layout engine (such as Firefox, Flock, Camino, and SeaMonkey) all have had incomplete support for the SVG 1.1 Full specification since 2005. The Mozilla site has an overview of the modules which are supported in Firefox and of the modules which are in development. Gecko 1.9, included in Firefox 3.0, adds support for more of the SVG specification (including filters). Pale Moon, which uses the Goanna layout engine (a fork of the Gecko engine), supports SVG. Browsers based on WebKit (such as Apple's Safari, Google Chrome, and The Omni Group's OmniWeb) have had incomplete support for the SVG 1.1 Full specification since 2006. Amaya has partial SVG support. Internet Explorer 8 and older versions do not support SVG. IE9 (released 14 March 2011) supports the basic SVG feature set. IE10 extended SVG support by adding SVG 1.1 filters. Microsoft Edge Legacy supports SVG 1.1. The Maxthon Cloud Browser also supports SVG. There are several advantages to native and full support: plugins are not needed, SVG can be freely mixed with other content in a single document, and rendering and scripting become considerably more reliable.

Мобильные устройства

Поддержка SVG может быть ограничена SVGT на более старых или менее производительных смартфонах, либо в первую очередь зависеть от их операционной системы. Adobe Flash Lite с версии 1.1 опционально поддерживает SVG Tiny. На конференции 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+", хотя официального стандарта не существует. BlackBerry от RIM имеет встроенную поддержку SVG Tiny 1.1, начиная с версии 5.0. Поддержка браузера BlackBerry Torch на базе WebKit сохраняется в ОС 6 и 7. Платформа S60 от Nokia также имеет встроенную поддержку SVG. Например, иконки обычно отображаются с использованием SVG-движка платформы. Nokia также возглавляла экспертную группу JSR 226: Scalable 2D Vector Graphics API, которая определяет Java ME API для представления и обработки SVG. Этот API был реализован в S60 Platform 3rd Edition Feature Pack 1 и последующих версиях. Некоторые телефоны серии 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, разработанная в основном для встраиваемых устройств, доступна на некоторых мобильных платформах.

Support for SVG may be limited to SVGT on older or more limited smart phones or may be primarily limited by their respective operating system. Adobe Flash Lite has optionally supported SVG Tiny since version 1.1. At the SVG Open 2005 conference, Sun demonstrated a mobile implementation of SVG Tiny 1.1 for the Connected Limited Device Configuration (CLDC) platform. Mobiles that use Opera Mobile, as well as the iPhone's built in browser, also include SVG support. However, even though it used the WebKit engine, the Android built in browser did not support SVG prior to v3.0 (Honeycomb). Prior to v3.0, Firefox Mobile 4.0b2 (beta) for Android was the first browser running under Android to support SVG by default. The level of SVG Tiny support available varies from mobile to mobile, depending on the SVG engine installed. Many newer mobile products support additional features beyond SVG Tiny 1.1, like gradient and opacity; this is sometimes referred to as "SVGT 1.1+", though there is no such standard. RIM's BlackBerry has built in support for SVG Tiny 1.1 since version 5.0. Support continues for WebKit based BlackBerry Torch browser in OS 6 and 7. Nokia's S60 platform has built in support for SVG. For example, icons are generally rendered using the platform's SVG engine. Nokia has also led the JSR 226: Scalable 2D Vector Graphics API expert group that defines Java ME API for SVG presentation and manipulation. This API has been implemented in S60 Platform 3rd Edition Feature Pack 1 and onward. Some Series 40 phones also support SVG (such as Nokia 6280). Most Sony Ericsson phones beginning with K700 (by release date) support SVG Tiny 1.1. Phones beginning with K750 also support such features as opacity and gradients. Phones with Sony Ericsson Java Platform 8 have support for JSR 226. Windows Phone has supported SVG since version 7.5. SVG is also supported on various mobile devices from Motorola, Samsung, LG, and Siemens mobile/BenQ Siemens. eSVG, an SVG rendering library mainly written for embedded devices, is available on some mobile platforms.

Авторство

Изображения SVG могут быть созданы с помощью редактора векторной графики, такого как Inkscape, Adobe Illustrator, Adobe Flash Professional или CorelDRAW, и преобразованы в распространенные растровые форматы изображений, такие как PNG, с использованием того же программного обеспечения. Кроме того, редакторы, такие как Inkscape и Boxy SVG, предоставляют инструменты для векторизации растровых изображений в кривые Безье, обычно используя библиотеки векторизации, такие как potrace, autotrace и imagetracerjs. Программное обеспечение может быть запрограммировано для рендеринга SVG-изображений с использованием библиотеки, такой как librsvg, используемой GNOME с 2000 года, Batik и Thor Vector Graphics (ThorVG) с 2020 года для легковесных систем. SVG-изображения также могут быть преобразованы в любой желаемый популярный формат изображения с помощью ImageMagick, бесплатной утилиты командной строки (которая также использует librsvg внутри). Для веб-приложений режим использования, называемый Inline SVG, позволяет встраивать SVG-контент непосредственно в HTML-документ с помощью тега <svg>. Его графические возможности затем могут быть использованы для создания сложных пользовательских интерфейсов, поскольку SVG и HTML совместно используют контекст, обработку событий и CSS. Другие области применения SVG включают встраивание для использования в текстовых редакторах (например, LibreOffice) и программах верстки (например, Scribus), построение графиков (например, gnuplot) и импорт контуров (например, для использования в GIMP или Blender). Приложения Microsoft 365 и Microsoft Office 2019 поддерживают экспорт, импорт и редактирование SVG-изображений. Универсальный идентификатор типа для SVG, используемый Apple, является общедоступным: public.svg image и соответствует public.image и public.xml.

Безопасность

В качестве формата документа, аналогичного HTML, SVG может содержать скрипты или CSS. Это представляет собой проблему, когда злоумышленник может загрузить SVG-файл на веб-сайт, например, в качестве изображения профиля, и этот файл будет обработан как обычное изображение, но при этом содержать вредоносный код. Например, если SVG-файл используется как CSS-фоновое изображение, логотип на веб-сайте или в галерее изображений, то при загрузке изображения в браузере активируется скрипт или другой вредоносный контент. Это может привести к зависанию браузера (атака "Миллиард смехов"), а также к HTML-инъекциям и межсайтовым скриптовым атакам. Поэтому W3C устанавливает определенные требования к использованию SVG исключительно в качестве изображений: SVG Security. W3C утверждает, что Inline SVG (SVG-файл, встроенный непосредственно в HTML-код веб-сайта) считается менее опасным, поскольку его содержимое является частью большего документа, и наличие скриптов и CSS в нем ожидаемо. SVG был разработан MPEG (ISO/IEC JTC 1/SC29/WG11) и опубликован как ISO/IEC 14496 20:2006. Функциональность SVG расширена в MPEG 4 Part 20 ключевыми возможностями для мобильных сервисов, такими как динамические обновления, бинарное кодирование и современное представление шрифтов. SVG также был интегрирован в MPEG 4 Part 11 в расширяемом текстовом формате MPEG 4 (XMT) – текстовом представлении мультимедийного контента MPEG 4 с использованием XML.