Кроссбраузерный SVG

[alexandr_v-vich]

Как макисмально кроссбраузерно подключить svg? Хаки, js, чит-коды, принимаются все решения)

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

Да, ссылки, статьи кидайте, буду благодарен)

UPD: Ай да википедия))) Пишет поддержка такова

Internet Explorer с 9

Opera с 8.0; включая 9.5

Mozilla Firefox с 1.5, включая 3.0, 4.0, 5.0, 6.0, 7.0 и текущую 10.0

Netscape Navigator 9.0

Safari 4.0

Google Chrome 3.0

Правда?

Тогда вопрос такой. Подключение через — embed в object`e? А ссылку ставить на оба тега? Никого не затруднит пример написать?

И ещё один, более важный, безусловно. Что сделать с IE8 ?

Edited April 27, 2012 by alexandr_v-vich

[Viper]

Если вам нужен именно SVG, то библиотека Rapha?l для вас будет идеальным выбором.

П.С. Возможно, еще статья о сравнении графических библиотек будет вам полезной.

[alexandr_v-vich]

Viper, премного тебе благодарен за ответ. Но, можно прояснить это? Как я понял быстро пробежав глазами, это библиотека для рисования в векторе. Но мне не надо рисовать. У меня это отлично выходит в Люстре) а рисовать через код, да ещё и js — да я ж сдохну)))

У меня есть готовый svg. Вот его через тот же Рафаэль я смогу продвинуть в IE?

Но даже, если это вообще сложный вопрос, то мне бы хотя бы решить задачу такую. Если я подключаю svg на сайте, как будет отображаться он в браузерах, которые svg не поддерживают? И как сделать, чтобы они отображали вместо svg ну любой другой поддерживаемый формат? Т.е., допустим, везде стоит png, а кто может работать с svg получает svg)

И завсегдатый вопрос, как его правильно подключать (сама семантика)?

Edited April 28, 2012 by alexandr_v-vich

[Viper]

Да, подключение Rapha?l вам, как я понял, ничего не даст. Прийдеться переделывать...

Как вариант подключать код в тег <svg>. Все(ну вы понимаете...) кроме ИЕ7-8 будут нормально отображать. А для ИЕ в conditional comments выводить изображение, тег <svg> он проигнорирует. Врядли это лучший вариант в вашем случае, но хоть что-то...

Семантика зависит от контекста в котором оно будет использоваться. Та и сомневаюсь, что про семантику компонента SVG в вашем случае стоит задумываться... ИМХО

П.С. Если есть возможность, задайте этот вопрос на Хабре в разделе Q&A. Большой шанс, что там подскажут что-то более конструктивное, правильное...

[alexandr_v-vich]

Ну если уж по этому пути следовать, я бы не выбирал тег <svg> а всё же через object и embed. Как-то поддержка с тегом уж совсем по-моему слабая… Вот, только, не совсем ясно вижу как их вместе там (object и embed)…

А вот мысль ещё есть. Как-то с флеш делал. Если, я вот сделаю через object и этому object поставлю background png`шкой. Я конечно попробую, но может кто делал уже так — получится, что я хочу?))

[danik.html]

Если еще актуально, попробуйте svg подключать тегом object, а внутри него разместить img с пнгшкой. По спецификации, если браузер не может отобразить файл подключенный через object, он должен отобразить вложенные в него теги

<object data="images/image.svg" type="application/svg+xml" alt="..." width="140" height="148" >
    <img src="images/image.png" alt="..." width="140" height="148" />
</object>

[alexandr_v-vich]

Спасибо, danik.html, попробую, если через бг не выйдет нормально как я хочу)