К вопросу о кроссбраузерном использовании SVG

[@homm]

Как вставить SVG в HTML. Известно, что есть три способа:

Про image src и background-image вы забыли?

[@tenshi]

а скриптовать как?

[@torbasow]

Во-первых, в статьях, по которым я (когда-то) осваивал SVG, эти способы вообще не назывались, так что не так уж они известны — во всяком случае, не так, как перечисленные. Во-вторых, нет, не забыл; внедрение через тег img в статье всплывает. Забыл только про background-image, как, если уж на то пошло, и про SVG-favicon и про SVG-шрифты. В-третьих, не работает же в моём любимом «Файерфоксе»! Да и в Уэбкит-браузерах работает условно, не скриптуется.

[@kellas]

А как на счёт заюзать raphael.js?
достаточно просто написать скриптик конвертирующий строки из svg в нужный рафаелю формат для отрисовки canvas.

[@homm]

raphael это не canvas.

[@kellas]

Cсори перепутал, действительно raphael использует svg и vml(в IE).

[@igamity]

Рафаэль — это все же не нативный SVG для IE, там используется VML. Хотя, несмотря на фундаментальность топика, я тоже больше склоняюсь к варианту с Рафаэлем вместо таких вот танцев с поддержкой SVG в осле. ИМХО, заставлять пользователя ставить доп. плагины для чего-то на сайте неправильно с точки зрения юзабилити.

[@tenshi]

флеш и сильверлайт как-то все поставили и ничего, не подавились

[@igamity]

Не подавились — не синоним юзабилити

[@tenshi]

зато синоним «не так страшен чёрт, как его малюют».
развелось, блин, юзабилистов… плагин в 2 клика поставить пользователю видите ли сложно, а вот тыкаться в уёбищный поисковик по сайту — легко и просто…

[@igamity]

Да иди ты в пень с таким гонором. От такого отношения к пользователям и появляется Виста, вместо МакОС. При чем тут вообще поиск по сайту?

[@tenshi]

при том, что на подавляющем большинстве сайтов есть куда более серьёзные проблемы с юзабилити, но избирательность мышления заставляет их не замечать.
а семёрка мне нравится больше макоси, так что сам иди в пень :-Р

[@igamity]

Мы же не про подавляющее большинство сайтов говорим и вообще не о сайтах в целом, а о конкретной технологии. С точки зрения использования SVG-графики на сайте заставлять пользователя только для этого ставить плагин… В общем, благими намерениями сами знаете куда дорога выстлана ;)

А на счет 7 — да, она хороша, мне тоже нравится. Лично у меня это первый продукт мелкомягких, который мне понравился в использовании. Но при этом до макоси (с точки зрения именно юзабилити в целом для обычного пользователя, а не гика) винде еще как до луны пешком.

[@tenshi]

один раз поставить плагин и далее наслаждаться жизнью

я гик и пользователь. от макоси с её тупыми дизайнерскими ограничителями меня тошнит. я люблю систему подстраивать под себя, а не себя под систему.

[@DmitryBaranovskiy]

SVG plugin от Adobe не поддерживается самой Adobe.
Читаем:
“Please note that Adobe has announced that it will discontinue support for Adobe SVG Viewer on January 1, 2009.”
То есть полтора года уже как.
Не говоря уже про то, что не всякий пользователь имеет на компьютере достаточно прав чтобы установить плагин.

[@tenshi]

да мне как-то пох, поддерживается он или нет. он работает — этого достаточно.

значит они скорее всего и без флеша сидят, который используется на подавляющем большинстве сайтов. ну, что поделать, значит не судьба.

[@TedBeer]

до сих пор обхожусь без силверлайта и жив пока

[@torbasow]

Сейчас так, наверное, лучше. Но если смотреть на перспективу и рассчитывать на нативную поддержку SVG в 9-ке, то не факт, что стоит связываться с лишней библиотекой и языком VML. Честно говоря, я не знаю, какие тут могут быть подводные камни, но сильно подозреваю, что они могут быть.

[@Zitrix]

насколько же проще создавать svg скриптом:

var svgDoc = document.implementation.createDocument("http://www.w3.org/2000/svg", "", null);
var svg = svgDoc.createElementNS("http://www.w3.org/2000/svg", "svg");
// и добавляем svg куда хотим (внутрь html-элемента)

[@tenshi]

в хтмл зафигачивать его тоже не сложно…

[@torbasow]

Я так понимаю, это то же самое, что inline SVG (IE против!), но зачем-то Javascript-ом. Не так?

[@bolk]

IE9 поддерживает inline SVG.

[@tenshi]

ie9 ещё не существует %-)

[@bolk]

Ну и, кстати, единственная в мире ужималка SVG:

bolknote.ru/files/svgcrush.phps

[@Quiz]

Вам не кажется, что геморроя от использования SVG сейчас на порядок больше, чем профита?

[@torbasow]

Кажется. Но лично я считаю, что это благородный геморрой.

Впрочем, огромные проблемы возникают только при поиске философского камняуниверсального решения, а частные задачи на моей практике решались вполне гладко.

[@eeccho]

«Когда в товарищах согласья нет,
На лад их дело не пойдёт.

Однажды Лебедь, Рак и Щука
Задумали сыграть квартет...»

© Иван Андреевич Крылов

[@Quiz]

Что ж Вы мою любимую басню так исковеркали? =(

[@eeccho]

Драматичности для, не хохмы ради…

[@Andrewus]

Отличное исследование.
Поделитесь тайной, зачем вам понадобилось любой ценой обеспечить поддержку SVG в IE?
По-моему, гораздо проще еще на этапе прорисовке дать дизайнеру по рукам за элементы, требующие SVG

[@torbasow]

Нужна была интерактивная схемка со сложными активными областями. SVG, по-моему, вполне подходил (и на практике отлично подошёл). Да и какая тут особо «цена»?

[@Andrewus]

Не очень сложную в свое время решал png и наложенными сверху div'ами:)
А работало достаточно шустро в итоге, со всеми костылями?

[@torbasow]

Вполне. Только фактически там был скрипт только для IE. Прозрачность фона была не критична.

[@tenshi]

слишком громоздко, вот мой вариант: habrahabr.ru/blogs/webdev/99248/

[@torbasow]

Ах, вот оно что! Атрибут codebase работает так, как предполагалось, что должен работать pluginspage! Спасибо, не знал.

Кстати: а IE с уже установленным плагином и остальные браузеры по этому адресу не ломанутся?

Проверил: не ломятся (кстати, почему?). Но происходят странные, тревожные вещи. «Файерфокс» загружает SVG-шку внутрь элемента embed, а IE 8 — в object, причём, конечно, с непрозрачным фоном.

[@tenshi]

они туда поломятся только если не смогут отобразить

у меня они ломятся наоборот

[@antirek]

А я для SVG внедрения и скриптования пользуюсь jquery.svg.js, брать тут keith-wood.name/svg.html

[@Rebus]

Спасибо за статью, она мне только что очень помогла. :)