torbasow 15 июл 2010 в 17:37

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

14 мин

44K

Работа с векторной графикой*

+20

Комментарии 41

homm 15 июл 2010 в 18:14

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

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

НЛО прилетело и опубликовало эту надпись здесь

tenshi 15 июл 2010 в 20:36

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

torbasow 17 июл 2010 в 16:51

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

kellas 15 июл 2010 в 18:41

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

homm 15 июл 2010 в 18:44

raphael это не canvas.

kellas 15 июл 2010 в 23:18

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

igamity 15 июл 2010 в 22:26

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

tenshi 15 июл 2010 в 22:37

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

-1

igamity 15 июл 2010 в 23:00

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

tenshi 15 июл 2010 в 23:42

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

-3

igamity 15 июл 2010 в 23:47

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

-1

tenshi 16 июл 2010 в 00:37

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

-1

igamity 16 июл 2010 в 01:00

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

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

tenshi 16 июл 2010 в 01:08

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

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

DmitryBaranovskiy 16 июл 2010 в 09:09

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

-1

tenshi 16 июл 2010 в 10:55

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

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

TedBeer 16 июл 2010 в 02:17

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

torbasow 17 июл 2010 в 16:56

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

Zitrix 15 июл 2010 в 19:07

насколько же проще создавать 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 15 июл 2010 в 20:28

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

torbasow 17 июл 2010 в 17:20

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

bolk 15 июл 2010 в 19:33

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

tenshi 15 июл 2010 в 20:29

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

bolk 15 июл 2010 в 19:35

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

bolknote.ru/files/svgcrush.phps

Quiz 15 июл 2010 в 20:15

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

torbasow 17 июл 2010 в 17:24

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

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

НЛО прилетело и опубликовало эту надпись здесь

eeccho 15 июл 2010 в 22:31

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

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

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

Quiz 16 июл 2010 в 15:10

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

eeccho 16 июл 2010 в 23:48

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

Andrewus 16 июл 2010 в 00:01

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

torbasow 17 июл 2010 в 17:29

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

Andrewus 20 июл 2010 в 23:58

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

torbasow 21 июл 2010 в 09:51

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

tenshi 16 июл 2010 в 02:42

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

-1

torbasow 17 июл 2010 в 17:56

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

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

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