inline SVG: data URI
open google reader я разрабатывал в том числе для того, чтобы использовать его на мобильных устройствах. Экранчики там маленькие, поэтому на кнопках лучше рисовать символы, а не писать названия. К сожалению, на обеих моих нокиях нет возможности использовать многие символы Unicode, поэтому мой любимый способ вставки иконок для них не подходит.
но я не унывал: на дворе 2011 год, торжество веб-технологий, поэтому сейчас я быстро что-нибудь изображу на SVG! Ведь ещё в 2007 году я вставлял его в веб-страничку для презентации на ClientSide. Да не тут-то было: я оказался в локальном минимуме технологий между двумя пиками.
дело в том, что inline SVG прекрасно вставляется в XHTML — спасибо XML и его namespaces. Не менее прекрасно он вставляется в HTML5-странички. Однако мой частный случай не даёт мне ни одной из этих возможностей: страницы гугла — не XHTML, и юзерскрипту этого не изменить, а мобильная опера ещё не содержит HTML5-парсера, поэтому не показывает SVG в обычном HTML.
и тут я вспомнил про старшенького недалёкого братца inline SVG: вставку картинок и прочих объектов посредством data: URI. Недалёким я его считаю потому, что он использует base64, а этот формат бинарный в том смысле, что невооружённым глазом его фиг прочитаешь. Впрочем, кто сказал, что base64 обязателен? В конце концов, эта кодировка прямо указывается в URI, так что можно попробовать её и не указывать.
долго ли, коротко ли, путь ошибок привёл меня к истине: раз это называется URI, оно должно выглядеть, как URI. То есть, всяких там пробелов, угловых скобок, двоеточий и кавычек содержать не должно. Поэтому совсем красивый код SVG таким образом в страницу не вставишь. Однако некрасивый — вставишь. Имена тегов, имена и значения атрибутов остаются почти прежними, а это для меня гораздо лучше base64.
впрочем, честно говоря, я не смог отказать себе в красоте. Раз уж я делаю веб-приложение, без яваскрипта вообще ни на что не годное, то encodeURIComponent — мой друг (и не нужно работать с битами на яваскрипте). А ещё один мой друг — The Noun Project. Там можно взять «путь» для svg-картинки и вставить его в нужную обёртку. Вот так:
'<img src="data:image/svg+xml,' +
encodeURIComponent(svg.replace('{path}', path)) + '">'
а теперь картинки! Вот для начала пример счастливого будущего нормального inline SVG:
а вот как его можно вставить при помощи data URI:
