Какие браузеры поддерживают svg
Как-то у меня возник интересный вопрос. Есть решение для замены инлайнового SVG на фоновые картинки в браузерах, где инлайновый SVG не поддерживается. Оно построено на допущении, что на странице есть нужный нам класс .ie8 , по которому SVG-элементам включаются фоновые изображения.
Очевидный недостаток способа состоит в том, что мы должны отдельно позаботиться о том, чтобы нужный нам класс был — при генерации страницы на сервере или же определив браузер с помощью JS.
Второй очевидный недостаток состоит в том, что способ не годится для других браузеров без поддержки инлайнового SVG, например, Оперы Мини и Андроидов 2.x.
Мне стало интересно: можно ли обеспечить поддержку во всех старых браузерах, используя только CSS?
И, кажется, я нашла решение. Оно странное, но работает. Меня интересовала его работоспособность в следующих браузерах:
- IE8 и 9
- Android 2.x
- Opera 12, Opera Mini
Тестировалось вот на такой конструкции:
Если SVG не поддерживается браузером, мы увидим — только эту фоновую картинку:
Если поддерживается — и фон, и SVG. Если вы смотрите страницу в современном браузере, демо покажет вам именно этот вариант:
На самом деле, в браузерах без поддержки SVG также будет виден текст "SVG", но в реальной жизни это вряд ли будет проблемой, если только вы не кладете текст в иконки.
Задача состоит в том, чтобы в браузерах с поддержкой SVG убирать фон.
Картинки для понятности:
— сейчас демо выглядит вот так
— так оно должно выглядеть в браузерах без поддержки SVG
— а вот так в браузерах, где SVG поддерживается
То есть по умолчанию всегда показывается PNG-заглушка, и её нужно скрыть только в современных браузерах. Нам нужна некая конструкция в CSS, поддержка которой в разных браузерах совпадает с поддержкой SVG.
Первым делом в голову приходит вариант с множественными фонами, например:
Хороший вариант, но браузеры Android 2.x понимают множественные фоны и не понимают SVG, поэтому в них при таком способе на странице не будет ни того, ни другого.
Следующая идея убирать фон с помощью невидимого градиента.
Способ работает везде, где нужно, кроме IE9 — он не понимает градиенты, поэтому в нем будут отображаться и SVG, и фон.
Нужно какое-то решение, которое уберет фон в IE9 и ничего не поломает в остальных.
Мне не удалось найти ничего подходящего в CSS-свойствах для управления фоном, но зато кое-что интересное неожиданно обнаружилось в единицах измерения.
Если для управления размерами или положением фона использовать единицы вьюпорта — vw или vh , браузеры Android 2.x и Opera Mini полностью проигнорируют свойство, где они содержатся. То есть можно написать:
и этот код уберет фоновое изображение в IE9.
Не все браузеры понимают единицы вьюпорта, так что в финальной версии кода нужно комбинировать оба последних способа:
Возможно, я что-то упустила, но на данный момент мои тесты показывают, что этот способ работает.
Браузеры, где проверяла:
- IE8 и 9
- Android 2.3
- Opera 12, Opera Mini
Вообще если у вас есть возможность потестить демо на устройствах, где может быть проблема с инлайновым SVG, — проверьте, пожалуйста, и сообщите как оно там — этот способ на данный момент нуждается в основательном тестировании.
Хочется надеяться, что постепенно старые устройства канут в лету, и нам больше не надо будет изобретать такие странные решения на стыке магии и CSS.
Второй сюрприз: не будет, пока мы не установим плагин — например, Adobe SVG Viewer. Правда, Adobe, вроде бы, прекратила его поддержку с 1 января 2009 г., но уже сделанного пока что должно хватить, да и, в конце концов, есть ещё RENESIS Player 1.0 for Internet Explorer и Ssrc SVG Plugin. Кроме того, как ни разобижена Microsoft за свой VML , с коим W3C её кинул в 1999 г., ввести нативную поддержку SVG её уламывают такие авторитеты как Google и Wikimedia Foundation. Обнадёживающая новость, что «Microsoft подала заявку на вступление в рабочую группу развития формата SVG в организации W3C» на Хабре уже обсуждалась. Так что тут есть все основания для оптимизма.
Далее. В описаниях тега embed во множестве мест в Интернете можно прочитать, что у него есть такой замечательный атрибут pluginspage , указывающий адрес, по коему, якобы, «будет направлен пользователь в том случае, если его браузер не поддерживает SVG -графику».
Не верьте! Это — третий сюрприз: в реальности IE игнорирует сей атрибут.
А чтобы заставить его работать, существует весьма малоизвестный (судя по тотальному отсутствию ссылок в тематических материалах в Интернете) хитрый способ с применением скриптов на JScript и VBScript . В принципе, ничего страшного, но об этом нужно знать.
Решение это, однако же, не вполне хорошо. Во-первых, оно не валидно, во-вторых, рассчитано на какие-то допотопные браузеры, коими уже никто не пользуется, но, в-третьих, не работает с современными браузерами (строго говоря, оно вообще не работает в том виде, в каком дано). Однако, основная идея решения верна, поэтому попытаемся сделать его работоспособным и современным.
Для начала, есть проблема вот с этой строчкой:
Функция в ней не выполняется, если только мы не перенесём её вызов на новую строчку. Только в XHTML экранирование будет выполняться ещё сложнее, посему вынесем-ка мы вызов функции во внешний скрипт:
Тогда все три подключенных скрипта можно скрыть от прочих браузеров в условный комментарий (ну и насчёт языка перестаём притворяться, что это — JavaScript):
В сумме получается довольно громоздкая конструкция, да ещё смешивающая представление с поведением. На самом деле можно просто написать:
Можно писать просто:
Впрочем, если кому-то вышеописанный вариант дорог, как память, можно и так:
В заголовочной части страницы, как уже указано, пишем:
Файл fixSVG.js выглядит так (с использованием уже скриптового условного комментария):
Содержимое fixSVG_IE_5-8.html , подгружающееся в динамически созданный плавающий фрейм:
Скрипты svgcheck.js и svgcheck.vbs — адоубивские, нетронутые. А fixSVG_IE_5-8.js — наш:
Вторая проблема серьёзней: если у вставленной через object SVG-картинки прозрачный фон, он заливается белым (это баг! причём очень старый, более чем двухлетней давности — и в 5-х версиях этих браузеров он не исправлен), как и в IE (но там мы можем просто добавить embed -элементу атрибут wmode со значением transparent ).
Увы, но на вставленных таким образом картинках перестают работать скрипты, так что решение не универсально!
Проблемы возникают в Internet Explorer. В нём мы можем после загрузки страницы получить элемент embed и у него даже уже доступен SVG -документ, но только — вот беда! — он совершенно пуст. Навесить на элемент embed событие load мне не удалось; похоже, оно вообще не поддерживается (впрочем, те из якобы поддерживаемых событий, что я пробовал, тоже не работают).
Кроме того, выяснилась ещё одна подлянка: содержимое таких элементов, как object и embed загружается асинхронно, в отдельном потоке. Это означает, как я понимаю, что, с одной стороны, пока не закончен парсинг основной страницы, элемент ещё недоступен для навешивания на него обработчика события, а когда он закончен — событие загрузки элемента может уже сработать и тогда обработчик навешивать уже бесполезно. Кажется, именно последний случай я периодически наблюдал в экспериментах, не улавливая никакой закономерности в глюке.
Да и по спецификации, кстати, событие load у элемента object отсутствует — оно есть в HTML только у элемента body . Так что то, что оно вообще где-то работает — это неправильно!
Выход найден следующий (не очень элегантный, но… будем ещё думать!): событие load пишем внутри SVG -кода у элемента svg , вызывая оттуда функцию HTML -документа. Как-нибудь так:
Ну, или, чтобы, уж, единообразно работало во всех браузерах:
Или даже просто (поскольку parent в окне верхнего уровня указывает на само это окно):
Забавно, что этот способ перестал работать локально в Chrome 5.0 из-за каких-то его заморочек с безопасностью. Совсем не забавно, что, как уже указано, в Webkit-браузерах он вообще не работает, если мы используем тег img .
Как отдавать с сервера SVGZ
Заархивировали, сменив расширение с образующегося автоматически .svg.gz на .svgz , после чего с изумлением убеждаемся, что получившийся файл адекватно воспринимают только Opera и Internet Explorer, а Firefox, Safari и Chrome воротят нос, ругаясь на синтаксис XML . Ну, конечно, какой там XML , пока не разархивируешь? А почему, собственно, они не разархивируют?
Встречался мне ещё совет дописывать туда же (ради Firefox) следующее:
Возможно, это имеет смысл, если на сервере настроено автоматическое gzip -ование отдаваемых файлов; не знаю.
Недавно я имел по этому вопросу смешные бодания с техподдержкой своего хостера, кои продолжались месяц. Я так понял, что перед Apache там стоит фронт-ендом nginx, что неким образом ограничивает возможность использования директив Apache. Конкретнее, директива AddType срабатывает, а AddEncoding — нет. Разумеется, раздел «Помощь» на сайте провайдера не содержит про эту закавыку ни слова и даже вообще ни единого упоминания про nginx. Техподдержка упорно не хотела мне внимать и выдавать свои тайны, потчуя меня безумными отписками: «Заголовок не отдается, поскольку на сервере не установлен необходимый для
работы директивы AddEncoding модуль Apache Mod_gzip», «За сжатие отвечает nginx, остальные директивы Apache поддерживаются в полном объёме» (неправда, кстати), «Приносим извинения. Передавать формат svgz можно лишь при наличии модуля mod_deflate, который, к сожалению, отсутствует на серверах, используемой Вами услуги» (и тут же предложение купить впятеро более дорогой план!). В конце концов, мне так и не объяснили, в чём у них закавыка, но сдались и стали отдавать правильный заголовок сами.
Решил сделать вольно-раздолбайский перевод статьи о SVG с ALA. Это перевод первой части, в ближайшее время постараюсь перевести вторую.
Масштабируемая векторная графика (SVG) состоит из кругов, прямоугольников и путей, представленных в XML и объединенных в изображения на веб-страницах. Вы можете применять сплошную заливку, градиенты и некоторые фильтры SVG — не все браузеры поддерживают все типы фильтров. Вы можете включать текст, изображения и можете копировать ваши SVG столько, сколько хотите. Чаще всего SVG используется в графических программах, для создания диаграмм, иллюстраций, анимаций. Однако, ничто не мешает нам использовать SVG для дизайна сайтов —это дает нам удивительно универсальные возможности в веб-дизайне, занятные в использовании. В этой вводной статье я рассмотрю некоторые важные моменты в работе с SVG, включая поддержку в браузерах. Во второй части мы рассмотрим, как найти и адаптировать SVG, которые вы можете найти в Сети, или как создать SVG-изображения самостоятельно и добавить их на вашу страницу.
Дикий SVG
Некоторые люди используют SVG для дизайна сайтов, обычно для значков топиков. Например, Sam Ruby, сопредседатель рабочей группы HTML5, использует SVG в постах своего блога. Erik Dahlstrom из команды Opera делает то же самое, что и Jeff Schiller на Codedread.
Джефф использует SVG не только для иконок, но и встраивает в меню и весь его сайт использует векторную графику. На сайте Emacs для Mac OS X в основном используется SVG, чтобы увидеть масштабирование SVG в действии, изменить размер страницы.
Я (т.е. автор статьи — прим. пер.) использовал SVG для получения цветов градиента из фото, отображаемого в данный момент (перезагрузите пару раз страницу, чтобы увидеть эффект), как причудливый элемент фона и для общей темы моих сайтов.
Когда можно и когда нельзя использовать SVG
Вы можете использовать SVG везде, где вы используете GIF, JPEG или PNG. Используя SVG, вы предоставляете инструкции по отрисовке, а не растр.
Будучи векторным графикой, SVG может масштабироваться, чтобы вписаться в размер страницы, тогда как JPEG или GIF этого не могут совсем или, как минимум, не могут сделать это чисто. Эта масштабируемость может быть особенно полезна, когда пользователь просматривает страницу и на таком маленьком устройстве, как iPhone, и на большом 32-дюймовом мониторе. На скриншотах ниже показан сайт EMACS для OS X открытый браузере на весь экран и ужатом по вертикали. Обратите внимание, что изображение уменьшается так, чтобы вписаться в окно браузера, не нарушая при этом пропорций. Независимо от того, насколько велика страница, изображение масштабируется корректно.
Скриншот сайта EMACS для Mac OS X
Тот же сайт, но в уменьшенном окне браузера
SVG так же не сильно нагружает канал. Неважно сколько графики передается клиенту, ведь она описывается при помощи XML. SVG может быть полезен, когда необходимо заполнить фон страницы графикой без повторяющихся элементов.
Каким бы хорошим SVG не был, существуют случая, когда вам не следует его использовать. Например, вы можете преобразовать фото в SVG, но преобразование не будет точным. К тому же ресурсов клиента может не хватить для отрисовки такого изображения. Я сконвертировал довольной сложный JPEG в SVG для тестирования. В результате повисла не только первая бета Хрома, но и компьютер, во время обработки SVG.
Итак, SVG не может заменить фото или сложные изображения, но для всего остального вполне подойдет. До того, как мы измажем руки во второй части этой статьи, нам важно узнать о поддержке SVG в браузерах.
Поддержка браузерами
Основные браузеры — Firefox, Chrome, Safari и Opera поддерживаю т SVG либо в виде файла, загружаемого в объект, либо встраиваемого непосредственно в XHTML кода. Джефф Шиллер, упомянутый ранее, поддерживает график, показывающий поддержку SVG в различных браузерах.
Как показано на графике, большинство основных браузеров поддерживают основные возможности SVG. Сюда входит поддержка шрифтов, изображений, графических элементов, таких как круги или пути, градиентов и некоторые фильтров. Не поддерживаются только более экзотические возможности.
Однако, нехватка более продвинутых функций не должна влиять на использование SCV в дизайне сайта, так как я не рекомендую использовать сложные SVG-изображения для фона страницы, потому что браузер потратит много времени на их отрисовку.
Стоит дважды подумать, прежде чем использовать анимированный фон, т.к. людей раздражает шевеление странице, в особенности то, от которого они не могут избавиться отключением яваскрипта.
Как упоминалось ранее, большинство основных браузеров поддерживает основные возможности SVG. Как всегда, существенным исключением является Internet Explorer.
Internet Explorer и SVG
Я одобряю использование SVG, но как было сказано, один из основных браузеров не поддерживает SVG, и этот браузер — Internet Explorer. К счастью для нас, отсутствие поддержки SVG в IE больше не является для нас преградой.
Тем временем, число мобильных устройств в вебе увеличивается, и ни одно из популярных устройст не зависит от IE. Вдобавок, растущая поплярность минималистичного дизайна может быть использована для эффективного введения SVG на ваши сайты. Если сайт имеет привлекательный, но минималистичный дизайн, SVG может быть добавлен, как занятная инновация, и не важно, отобразится он или нет. Упомянутые ранее сайты, использующие SVG, в случае отсутствия поддержки со стороны браузера либо предоставляют альтернативную графику, либо предлагают читателю использовать браузер, поддерживающий SVG. (И не надо бить авторов за последний вариант — такой подход уже больше 10 лет работает для IE в браузерных войнах).
Что насчет доступности?
SVG предоставляет возможность использовать короткие и длинные текстовые альтернативы изображениям. Т.к. он основан на языке разметки, вы можете легко добавить название и описание при помощи элементов title и desc, как показано ниже.
К несчастью, поддержка этих элементов для чтения с экрана недостаточно, что создает проблему для сайтов, где доступность является обязательной.
* This source code was highlighted with Source Code Highlighter .
Title обычно используется в качестве заголовка документа в standalone SVG. И title , и desc также могут использоваться в более сложной разметке в других пространствах имен. Вдобавок, для более сложных метаданных существует элемент metadata , который может содержать RDF/XML для таких вещей, как информация об авторских правах и авторе.
Поскольку поддержка SVG для чтения с экрана скудна, можно использовать обработку на стороне сервера или XSLT для доступа к информации во встроенном в страницу SVG и генерировать HTML из элементов title , desc , и metadata. Для фона и изображений, используемых в качестве элементов дизайна, можно убрать элементы title и desc за ненадобностью.
Продолжаю серию топиков про SVG. Векторные SVG-элементы корректно отображаются в современных браузерах, но как реализовать поддержку в старых версиях? Разберемся с кроссбраузерностью векторной графики.
Использование элемента object
Если в файле .svg хранится графика, то можно использовать элемент object на странице:
При использовании следующей конструкции, браузеры, поддерживающие SVG, будут отображать векторные элементы корректно, остальные же покажут .jpg файл (Демонстрация):
Основным недостатком этого способа является немасштабируемость PNG-изображений.
Modernizr
В этом способе используются JavaScript-библиотеки Modernizr.js и Raphael.js. Прежде всего необходимо конвертировать SVG-файлы в формат, поддерживающийся Raphael. В этом нам поможет инструмент ReadySetRaphael.js. Подключаем Modernizr.js:
Затем, в случае не поддерживающего браузера, необходимо подключить Raphael.js, а также svg.js — файл, получившийся после конвертации.
Теперь осталось только добавить HTML-разметку. В коде ниже SVG-файл включен непосредственно в HTML-код страницы, чтобы обеспечить работу Raphael:
Вспоминая прошлую статью, добавим текста под SVG-файл:
SVGWeb
Еще один инструмент для реализации поддержки SVG старыми браузерами — это JavaScript-библиотека SVGWeb. После подключения ее на страницу можно располагать SVG-элементы так:
В XHTML необходимо использовать CDATA:
Вывод
Описанные примеры кроссбраузерности SVG-графики не идеальны, однако подходят в качестве решения для большинства проблем с корректным отображением векторной графики в старых браузерах.
SVG — это формат векторных изображений, основанный на XML.
SVG имеет массу преимуществ перед растровыми изображениями:
- векторные изображения масштабируются без потери качества и лучше отображаются на устройствах с ретиной;
- SVG, как правило, весит несколько меньше, чем PNG-версия того же изображения;
- содержимое рисунка описывается на XML, SVG-файл можно открыть в текстовом редакторе и увидеть человекопонятный код;
- поэтому SVG-изображение можно не только нарисовать в векторном редакторе, но и написать руками;
- SVG-файл — это всегда исходник. В отличие от растровой графики, для его редактирования не требуется исходный PSD-файл, содержимое файла не склеивается в один слой, поэтому его всегда можно просто открыть и отредактировать. Правда, если в файле также есть стили и скрипты, лучше так не делать, потому что содержимое перезапишется;
- внутри SVG-файла можно описывать тени и градиенты, причем использовать их можно не только внутри этого файла, но также можно применять и к внешним элементам (пока работает не везде);
- внутри файла могут находиться CSS и JavaScript.
SVG хорошо поддерживается всеми современными браузерами и его уже вполне можно использовать, предусмотрев PNG-версии для старых браузеров.
Он хорошо подходит для использования в адаптивном дизайне, потому что без потерь растягивается и сжимается, меньше весит и не выглядит размытым на устройствах с высокой плотностью пикселей. Вот, например, скрин с современного смартфона:
Хорошо видно, что SVG (внизу) в этих условиях выглядит гораздо лучше, чем PNG (наверху). Так что если поставить себе задачу сделать сайт, который хорошо выглядит на любых устройствах, SVG очень пригодится.
Уже сейчас можно найти довольно много сайтов с готовой SVG-графикой, например:
В основном, это наборы иконок.
Можно использовать картинки как есть, а можно перекрасить, объединить в стек, спрайт или сделать шрифт.
SVG на страницу можно вставить несколькими способами. Они по-разному поддерживаются браузерами и предоставляют разные возможности.
Embed/object/iframe
Содержимое доступно для внешнего JavaScript. Хорошая поддержка браузерами (все, кроме IE8 и ниже).
Читайте также: