SVG на странице, в телефоне и в печати
Написать файл SVG и добиться, чтобы конкретная программа его правильно отобразила, это разные задачи. Формат описали за много лет до того, как можно было с уверенностью рассчитывать, что браузер посетителя его покажет.
Браузеры
Первым браузером, поддержавшим SVG в официальном выпуске, стал Konqueror версии 3.2 в феврале 2004 года. К 2011 году все крупные настольные браузеры и многие менее известные в той или иной мере поддерживали SVG. Но доработаны реализации были неодинаково. Несколько подробностей тех непростых лет стоит запомнить, потому что старые страницы до сих пор хранят старые привычки.
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 поддерживала SVG частично.
Internet Explorer 8 и более ранние версии SVG не отображают. IE9, вышедший 14 марта 2011 года, поддерживает базовый набор возможностей. В IE10 добавили фильтры SVG 1.1. Microsoft Edge Legacy поддерживает SVG 1.1. Облачный браузер Maxthon тоже. У встроенной поддержки, когда она действительно полная, есть три преимущества, которых плагины так и не смогли дать. Ничего дополнительно устанавливать не нужно. SVG можно свободно сочетать с другим содержимым в одном документе. Отрисовка и скрипты работают гораздо надёжнее, потому что движок один и двум программам не нужно договариваться между собой.
Телефоны
На телефонах поддержка часто ограничивалась SVG Tiny или зависела от операционной системы, а не от амбиций браузера. Adobe Flash Lite начиная с версии 1.1 мог по выбору отображать Tiny. На конференции 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, тоже отображают SVG. Большинство телефонов Sony Ericsson начиная с K700 поддерживают Tiny 1.1. Начиная с K750 к этому добавились прозрачность и градиенты. Телефоны Sony Ericsson на Java Platform 8 поддерживают JSR 226. Windows Phone поддерживает SVG начиная с версии 7.5. Поддержка SVG была и в телефонах 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, а в 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 умеет выводить графики в SVG. Контуры можно импортировать в GIMP или Blender. Microsoft 365 и Office 2019 умеют импортировать, экспортировать и редактировать SVG. В системах Apple идентификатор типа для SVG это public.svg-image, и он относится одновременно к public.image и к public.xml, что очень точно описывает весь формат. Есть даже кустарный способ: с помощью функции сцепления в электронной таблице склеить числа и имена тегов в готовый документ SVG. Он работает. И напоминает, что файл это текст.
В Windows Проводник уже много лет не умеет сам показывать миниатюры SVG. Пользователи устанавливают расширение для предпросмотра или пользуются файловым менеджером, который уже понимает этот формат. С браузером дело обстоит иначе. Браузер файл отображает. Оболочка рабочего стола часто нет, и тот, кто сталкивается с обоими фактами в один и тот же день, бывает удивлён.
Документ, а не снимок
SVG может содержать скрипт или таблицу стилей, так же как документ HTML. Это становится проблемой, когда посторонний человек может загрузить SVG, например аватарку, а сайт обращается с ним как с обычным изображением. Если затем этот файл используют как фон в CSS, как логотип или в галерее, браузер при загрузке изображения может выполнить скрипт. Вредоносный файл может подвесить браузер, заставив его выполнить абсурдно большой объём работы. Он может также привести к внедрению HTML и межсайтовому скриптингу (XSS). Поэтому W3C устанавливает дополнительные требования для случаев, когда SVG используется просто как изображение.
Встроенный SVG, то есть элемент svg, который входит в саму страницу, это другой случай. W3C считает его менее неожиданным, потому что содержимое входит в более крупный документ, а скрипты на такой странице и так ожидаемы. Практическое правило простое. Не принимайте загруженный SVG и не отдавайте его обратно как надёжную картинку, пока файл не проверен. Подробности таких проверок описаны в правилах W3C для SVG, используемого как изображение.
Стоит назвать и одного родственника SVG среди стандартов. MPEG-4 Part 20, Lightweight Application Scene Representation и Simple Aggregation Format, основан на SVG Tiny. Он опубликован как ISO/IEC 14496-20:2006. В нём есть то, что нужно мобильному сервису: динамические обновления, двоичное кодирование, компактный способ передачи шрифтов. SVG встречается и в MPEG-4 Part 11, в текстовом представлении XMT. Веб-формат и формат мобильного мультимедиа родственники. Состав того, что лежит в файле, в обоих случаях описывается одним и тем же словарём. А то, где применяют графику, и есть более давняя причина, по которой всё это стоило стандартизировать: маленькое чёткое изображение, которое повторяется везде, где странице нужен знак.