SVG на странице, в телефоне и в печати
Написать файл SVG и добиться, чтобы конкретная программа его нарисовала, это разные задачи. Формат специфицировали за годы до того, как стало безопасно считать, что браузер посетителя его покажет.
Браузеры
Konqueror был первым браузером, который поддержал SVG в выпуске, версия 3.2, в феврале 2004 года. К 2011 году у каждого крупного настольного браузера и у многих меньших была какая-то степень поддержки. Реализации были закончены не в равной мере. Несколько подробностей из тех неловких лет стоит сохранить: старые страницы всё ещё живут старыми привычками.
Firefox с версии 1.5 по 3.6 и некоторые другие браузеры того времени показывали SVG внутри страницы только тогда, когда его встраивали через object или iframe, а не обычным элементом img. SVG можно было включить и в XHTML через пространства имён XML. Тим Бернерс-Ли, изобретатель веба, публично критиковал ранний Internet Explorer за то, что тот вовсе не поддерживал формат. У Opera SVG Tiny есть с версии 8. Opera 9 добавила SVG Basic и часть полного языка 1.1. У Opera 9.5 была частичная поддержка Tiny 1.2, и она рисовала сжатые файлы SVGZ. Браузеры на движке Gecko, среди них Firefox, с 2005 года имели неполную поддержку полной спецификации 1.1. Gecko 1.9 в Firefox 3.0 добавил ещё один пласт, включая фильтры. Pale Moon на движке Goanna, ответвлении Gecko, поддерживает SVG. Браузеры на WebKit, среди них Safari, Chrome и OmniWeb, с 2006 года имели неполную поддержку полного 1.1. У Amaya поддержка была частичной.
Internet Explorer 8 и старше SVG не рисуют. IE9, вышедший 14 марта 2011 года, поддерживает базовый набор возможностей. IE10 добавил фильтры SVG 1.1. Microsoft Edge Legacy поддерживает SVG 1.1. Облачный браузер Maxthon тоже. Встроенная поддержка, когда она и правда полна, имеет три преимущества, которых плагины так и не дали. Ничего лишнего ставить не нужно. SVG можно свободно мешать с прочим содержимым в одном документе. Рендеринг и сценарии становятся заметно надёжнее, потому что движок один, а не переговоры между двумя.
Телефоны
На телефоне поддержка часто ограничивалась SVG Tiny или ограничивалась операционной системой, а не амбициями браузера. Adobe Flash Lite мог по желанию рисовать Tiny начиная с версии 1.1. На конференции SVG Open в 2005 году Sun показала реализацию Tiny 1.1 для Connected Limited Device Configuration, небольшой платформы Java. Opera Mobile и браузер на iPhone включали SVG. Браузер Android не включал до версии 3.0, Honeycomb, хотя этот браузер использовал WebKit. До Honeycomb первым браузером, работавшим на Android и поддерживавшим SVG по умолчанию, был Firefox Mobile 4.0 beta 2.
Насколько полно конкретный телефон реализовывал Tiny, зависело от движка, с которым его выпускали. Многие поздние телефоны добавили градиент и непрозрачность сверх Tiny 1.1. Иногда это называли «SVGT 1.1+». Такого стандарта нет. У BlackBerry встроенный Tiny 1.1 есть с OS 5.0, и браузер Torch на WebKit сохранил его в OS 6 и 7. Платформа S60 фирмы Nokia рисует средствами SVG. Значки на этой платформе обычно выводит движок SVG. Nokia возглавляла группу, написавшую JSR 226, API Java ME для показа и изменения SVG. Его реализовали начиная с S60 3rd Edition Feature Pack 1. Некоторые телефоны Series 40, среди них Nokia 6280, тоже его рисуют. Большинство телефонов Sony Ericsson начиная с K700 поддерживает Tiny 1.1. С K750 они добавляют непрозрачность и градиенты. Телефоны на Java Platform 8 фирмы Sony Ericsson поддерживают JSR 226. Windows Phone поддерживает SVG с версии 7.5. Аппараты Motorola, Samsung, LG и BenQ-Siemens тоже выходили с ним. eSVG, библиотека рендеринга для встраиваемых устройств, встречается на части этих платформ.
В 2003 году 3GPP, партнёрство, которое задаёт спецификации мобильной связи, приняло SVG Tiny как обязательный векторный формат для следующего поколения телефонов. Tiny обязателен, а Basic необязателен для мультимедийных сообщений и для потоковой передачи с коммутацией пакетов. Позже его потребовали для векторной графики в IP Multimedia Subsystem. Ни один мобильный профиль не включает полную объектную модель документа. Необязательные сценарии есть только у Basic. Поскольку профили это настоящие подмножества, большая доля обычного SVG всё же рисуется на устройстве, которое реализует только профиль. Tiny 1.2 добавляет микро-DOM, оформление и сценарии, а также несколько возможностей, которых нет в 1.1, включая обводки, которые не масштабируются вместе с рисунком. Некоторые реализации 1.1, среди них Opera, Firefox и WebKit, обзавелись этими обводками всё равно. Когда браузеры телефонов и настольные браузеры стали делить один код, полный SVG 1.1 на практике вытеснил Tiny 1.2. Малый профиль был мостом. Мост перестал быть дорогой.
Сжатие, создание и другие программы
SVG это XML, поэтому он повторяет сам себя. Имя тега, которое встречается двести раз, подарок для сжатия без потерь. Когда файл сжат gzip, его называют SVGZ, и расширение у него .svgz. Программа просмотра, соответствующая SVG 1.1, покажет сжатый файл. SVGZ обычно занимает от 20 до 50 процентов исходного размера. W3C публикует файлы SVGZ в составе испытаний на соответствие, так что у вопроса «открывает ли программа просмотра сжатый файл» есть известный верный ответ.
Разметку можно писать вручную. Можно пользоваться и векторным редактором: Inkscape, Adobe Illustrator, Adobe Animate, CorelDRAW. Те же программы умеют растеризовать результат в PNG. Inkscape и Boxy SVG умеют обращать растровое изображение обратно в кривые Безье, движками вроде potrace, autotrace и imagetracerjs. Результат такой обводки это новый рисунок, а не фотография, сохранённая хитрее. Мелкая подробность становится политическим решением о том, сколько кривых готовы оставить.
Библиотеки рисуют SVG внутри других программ. librsvg использует GNOME с 2000 года. Batik это реализация на Java. ThorVG, с 2020 года, целится в более лёгкие системы. ImageMagick, конвертер командной строки, использует librsvg и с другой стороны умеет записывать обычные растровые форматы. Для веб-приложения важный режим это встроенный SVG: элемент svg в документе HTML. Рисунок тогда делит события страницы и её CSS, поэтому SVG идёт и на части интерфейса, и на иллюстрации. Кнопку, которая сама рисунок, можно оформить той же таблицей стилей, что и текст рядом.
Вне браузера SVG встраивают в текстовые процессоры, LibreOffice один из них, и в настольные издательские системы, Scribus один из них. gnuplot умеет его выдавать. Контуры можно импортировать в GIMP или в Blender. Microsoft 365 и Office 2019 умеют импортировать, экспортировать и править SVG. На системах Apple идентификатор типа это public.svg-image, и он соответствует и public.image, и public.xml. Аккуратное резюме всего формата. Есть даже кустарный способ: функцией сцепления в электронной таблице склеить числа и имена тегов в готовый документ SVG. Способ работает. Он напоминает, что файл это текст.
В Windows Проводник уже много лет сам не рисует миниатюры SVG. Ставят расширение предпросмотра или пользуются файловым менеджером, который формат уже понимает. Браузер это другой вопрос. Браузер файл рисует. Оболочка рабочего стола часто нет, и два этих факта удивляют того, кто встречает их в один и тот же день.
Документ, а не снимок
SVG может нести сценарий или таблицу стилей, так же как документ HTML. Это становится проблемой, когда посторонний может загрузить SVG, например картинку профиля, а сайт обращается с загрузкой как с обычным изображением. Если этот файл затем используют как фон CSS, или как логотип, или в галерее, браузер может выполнить сценарий в момент загрузки изображения. Враждебный файл может запереть браузер, взвалив на него несуразный объём работы. Он может привести и к внедрению HTML, и к межсайтовому выполнению сценариев. Поэтому W3C задаёт дополнительные требования на случай, когда SVG используют просто как изображение.
Встроенный SVG, элемент svg, который составляет часть страницы, это другой случай. W3C считает его менее неожиданным: содержимое входит в больший документ, и сценарий на этой странице ожидаем. Практическое правило короткое. Не следует принимать загрузку SVG и отдавать её обратно как доверенную картинку, пока файл не проверен. Подробности проверок стоят в правилах W3C для SVG в роли изображения.
Одного родственника среди стандартов стоит назвать. MPEG-4, часть 20, Lightweight Application Scene Representation и Simple Aggregation Format, основан на SVG Tiny. Его опубликовали как ISO/IEC 14496-20:2006. Он добавляет то, чего хочет мобильная служба: динамические обновления, двоичное кодирование, компактный способ нести шрифты. SVG появляется и в MPEG-4, части 11, в текстовом представлении XMT. Веб-формат и формат мобильного мультимедиа родственники. Что содержит файл в обоих случаях называет один и тот же словарь. Где графику применяют это более старая причина, по которой всё это стоило стандартизировать: маленькая резкая картинка, повторённая всюду, где странице нужен знак.