Как вставить SVG в HTML
Для векторной графики в Интернете формат SVG - самое то. Во-первых, он поддерживает масштабирование любой степени. Во-вторых, можно обращаться к любым составляющим элементам такой картинки - адресовать их, стилизовать и скриптовать. В-третьих, за исключением совсем маленьких файлов, этот формат выигрывает по компактности перед любыми растровыми представлениями, особенно если применить gzip-сжатие. В-четвёртых, сие есть стандарт W3C.
Но как поместить SVG-картинку в HTML-документ?
Известно, что есть три способа:
непосредственно в код (но - увы и ах! - IE этот способ не приемлет, да и остальные браузеры допускают лишь в XHTML-документе, что не всегда возможно);
в плавающий фрейм iframe (это я даже пробовать не стал, ибо фреймы - устаревшее зло);
через специальный тег object (вот этим приёмом и займёмся).
Первый сюрприз нам преподносит… угадайте, какой браузер? Ну, конечно, это IE не даёт скриптовать встроенную посредством тега object SVG-картинку! К счастью, он предоставляет свой проприетарный тег embed для этих целей. Посредством условных комментариев и управлением стилями можно легко и валидно добиться, что нормальные браузеры будут отображать SVG через object-элемент, а IE - через embed. Но будет ли?
Второй сюрприз: не будет, пока мы не установим плагин - например, Adobe SVG Viewer. Я тут слышал, что Adobe собирается прекратить его поддержку, но не знаю, насколько это критично, да и, в конце концов, есть ещё RENESIS Player 1.0 for Internet Explorer и Ssrc SVG Plugin. Кроме того, как ни разобижена Microsoft за свой VML, с коим W3C её кинул в 1999 г., ввести нативную поддержку SVG её уламывают такие авторитеты как Google и Wikimedia Foundation, так что, как мне кажется, тут есть основания для сдержанного оптимизма.
Далее. В описаниях тега embed во множестве мест в Интернете можно прочитать, что у него есть такой замечательный атрибут pluginspage, указывающий адрес, по коему, якобы, «будет направлен пользователь в том случае, если его браузер не поддерживает SVG-графику».
Не верьте! Это - третий сюрприз: в реальности IE игнорирует сей атрибут.
А чтобы заставить его работать, существует весьма малоизвестный (судя по тотальному отсутствию ссылок в тематических материалах в Интернете) хитрый способ с применением скриптов на JScript и VBScript. В принципе, ничего страшного, но об этом нужно знать.
Да, окончательного успеха с SVG я ещё не достиг. Мне пока не удалось (только в IE, разумеется) «достучаться» из скриптов HTML-документа до элементов и событий картинки, хотя изнутри SVG-картинка отлично скриптуется и может по событиям вызывать функции основного документа, передавая им действующие ссылки на элементы.
Ещё удивительным для меня открытием стало, что если (в любом браузере) задать, скажем, цветовую заливку элементов стилем, то её потом нельзя перекрыть скриптом. Это кажется странным.