27 июн. 2007 г.

SVG inside html

По видимому, уже сегодня можно включать SVG в код (к сожалению, пока IE без плагина не поддерживает формат - да и с плагином он это делает как-то мутно). Firefox и Opera последних версий отрабатываю отлично. Для тех, кто не знает, что такое SVG, другая полезная информация и еще.

Попробуем вставить в код SVG графику.

Я не решился экспериментировать с блогом и вставил код в отдельную страницу - откройте - посмотрите (исправил ошибки, замеченные с прошлой публикации). И FF и Opera отрабатывают на ура (последние версии). Нашел необходимые комбинации кода - посмотрите в странице по указанной ссылке.

Сторонний вариант (не мой) - тут.

Для тех, кто перейдет по указанным в первом абзаце ссылкам - данная статья станет гораздо понятнее.


17 комментариев:

  1. Экспериментальный код, по-видимому, не заработал. Это связано с кодом blogger.com

    ОтветитьУдалить
  2. Лучше всего ссылка отработала в опере. Я не придерживался корректного синтаксиса, а лишь решил опробовать возможность. Судя по описаниям в сети, потихоньку применять SVG уже можно начинать.

    ОтветитьУдалить
  3. Этот комментарий был удален автором.

    ОтветитьУдалить
  4. Возможно, после того, как получше разберусь в вопросе - статью поправлю.

    ОтветитьУдалить
  5. У меня Opera 9.21 всё заработало. Картинка в двух экземплярах... А когда я сам пытался внедрять svg по примеру для огнелиса, под лисой заработало, а под оперой нет... Такие вот пироги.

    ОтветитьУдалить
  6. Для внедрения необходимо определенный DOCTYPE прописывать, на сколько я смог понять ситуацию. В сети встречались примеры динамически созданного (с прим. Javascript) внедренного SVG. Этот пример у меня отработал, как в FF, так и в Опере. Думаю, что в IE он бы тоже отработал с установленным AdobeSVG Plugin.
    Думаю, что постепенно SVG займет достойное место в мире Internet. Очень достойный формат, да и поддерживать его браузеры стали, пусть пока и не идеально.

    Мне сейчас было бы интересно в качестве эксперимента научиться делать фон для html блоков на основе SVG. Интересно, может ли из этого что-то выйти или нет?

    ОтветитьУдалить
  7. Safari для win - всё отображается четко по обоим ссылкам.

    ОтветитьУдалить
  8. Как видно, тормозят одни мастодонты, которым один путь - на свалку. И почему Microsoft считает себя в праве задерживать развитие всей индустрии? Вопрос риторический... Почему web-дизайнеры вынуждены "плясать с бубнами", а основная причина плясок - IE, невразумительный выкидыш монополиста? Больше всего проблем возникает именно с IE. Все разработчики браузеров уже осознали необходимость соответствия стандартам... FF, Opera, Safari и иже с ними нетрудно заставить понимать код одинаково, а вот с убогим осликом от версии к версии творятся оказии...

    И ведь же не страдаю я отвращением к Майкрософту, как к таковому, не являюсь слепым фанатом Linux и стараюсь оценивать ситуации, по возможности, объективно... Но в случае с IE слов не хватает.

    А пользователям все равно... IE - самый популярный браузер.

    По-видимому, возникает необходимость создавать 2 дизайна - красивый на SVG для достойных, и обычный средненький - для пользователей IE. Пусть это будет такой своеобразный бойкот...

    Увидит пользователь убожества, как интересен дизайн какого-либо сайта, скажем, в FF и скажет, а почему у меня не так? А ему в ответ - ты пользуешься кривым архаизмом... И т.д.

    P.S. К стати, с DOCTYPE я напутал, в коде его использовать не обязательно.

    ОтветитьУдалить
  9. Анонимный19 июля 2007 г., 18:55

    А еще вот стоящий эксперимент:
    http://nicubunu.blogspot.com/2007/07/progress-authoring-svg-websites-with.html

    ОтветитьУдалить
  10. Анонимный21 июля 2007 г., 11:07

    Либо делать по примеру Microsoft: для отображения данного сайта необходим Firefox/Opera :)

    ОтветитьУдалить
  11. Этот комментарий был удален автором.

    ОтветитьУдалить
  12. А что сделать, если хочется строить не ссылку на svg файл, а сразу xml-код svg картинки?

    ОтветитьУдалить
  13. Можно и напрямую в html встраивать svg код. Посмотрите исходники второго примера в посте

    ОтветитьУдалить
  14. Почему-то firefox не хочет показывать SVG, если расширение файла php, а не xhtml/html. Не знаете как в таком случае поступить?

    ОтветитьУдалить
  15. Возможно эта информация
    поможет ответить на поставленный вопрос

    ОтветитьУдалить
  16. Супер! Огромное спасибо! Погуглить и сам мог догадаться конечно :(

    ОтветитьУдалить
  17. Здравствуйте,
    нашел сайт с использованием SVG (встроен в веб-страницу через тэг ) www.emacsformacosx.com. Сайт нормально отображается в браузере (у меня Firefox 3.6.8). Сохраняю страницу у себя, пробую отрыть браузером как локальный файл - получаю облом, svg код не отображается. Никак не могу понять в чем причина. Может кто сможет прояснить ситуацию?

    ОтветитьУдалить