• 3 марта 2009

    SVG вместо Canvas

    По наводке товарища Bolk решил проверить, насколько сложно генерировать графику в SVG и использовать ее в качестве фона у элемента. Оказалось, совсем не сложно (смотреть надо в Опере и Сафари): создаем строчку, содержащую код SVG, кодируем на лету алгоритмом base64 и вставляем как background у элемента. Код кодировщика совсем небольшой, взял его отсюда и вынес в отдельный namespace. У Firefox есть встроенные методы: window.atob() и window.btoa(), но они вроде как сломаны во второй версии браузера.

    Какия я вижу плюсы и минусы при использовании SVG и Canvas:

    • У сanvas есть метод toDataURL(), который позволяет получить нарисованную картинку в формате data: URL. Этот метод не работает в Safari.
    • С другой стороны, Firefox упорно требует перевести документ в XHTML-режим для отображения SVG (для справки: переключение в XHTML-режим выполняется не доктайпом, а заголовком Content-Type: application/xhtml+xml, который должен послать сервер). Я пока не готов это делать — и так проблем с браузерами хватает, не хочу создавать новые.
    • У SVG объективно больше возможностей. Хотя бы работа с текстом.
    • Некоторые вещи гораздо проще нарисовать/стереть в canvas.
    • В SVG гораздо проще модифицировать уже «нарисованные» объекты.
    • Safari оказался довольно чувствительным к сгенерированной SVG-картинке в качестве фона у элемента: если этому элементу добавить border, то SVG не отобразится.
    • Вопрос о производительности и потребляемых ресурсах пока остается открытым.

    Хочу найти универсальный способ рисования графики, работающий во всех (кроме IE) браузерах и внедрить в rocon. Это нужно потому, что встроенные в Safari и Firefox методы рисования далеки от идеала, иногда нужно и вручную нарисовать уголки. Например, ни один из браузеров не добавляет скругленные уголки картинкам, Safari сносит башню от бордюров разной толщины, да и рисует он не совсем корректно.

    Метки:
    Комментировать (RSS)  |  Trackback

    • 8 комментариев

    1. denisx
      4 марта 2009

      Флеш спасёт мир? =)

    2. Сергей Чикуенок
      4 марта 2009

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

    3. sharifulin
      5 марта 2009

      Есть такая библиотека jsxgraph. Примеры впечатляют.
      http://jsxgraph.uni-bayreuth.de/wp/examples/

      ЗЫ: Если бы не Шитов, то не знал бы, что есть такой интересный блог :)

    4. Глеб Арестов
      14 марта 2009

      кажется есть идея:
      1)svg можно вставлять в html через тэг object
      2)в svg есть foreign object, который позволяет вставлять в svg файлы html тэги
      (пример: http://starkravingfinkle.org/blog/wp-content/uploads/2007/07/foreignobject-transform.svg)

      скрипт находит объект для скругления, получает его свойства, (вроде фоновой картинки и границ). Генерирует svg код с круглёнными уголками, картинкой в качестве заливки(fill), границами и foreign объектом с содержимым нашего объекта.

      понятное дело встаёт вопрос производительности, одинакого отображения (в опере шрифты в некоторых случая иначе сглаживают) и доступность всех элементов скриптам

    5. Сергей Чикуенок
      14 марта 2009

      Зачем так радикально? :) Можно просто сгенерировать уголки с элементами фона. Более того, я не хочу своими действиями навредить разработчику сайта: элемент должен оставаться элементом, должен оставаться на своем месте и должен управляться через CSS и JS.

    6. Глеб Арестов
      14 марта 2009

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

      я же не дачу в подмосковье… )

      а что ты имеешь под радикальным? и что ты имеешь ввиду про сгенерировать уголки, ты про object?

      думаю надо просто проверить, может css и js Будет нормально работать

    7. Сергей Чикуенок
      14 марта 2009

      Под радикальным я имею в то, как поступает, например, разработчик DD_roundies. Он, по сути, заменяет HTML-блок на VML аналог и управляет им через JS. Отсюда проблемы с производительностью и с управляемостью: как, например, мне его с помощью анимации переместить, изменить размер и контент?

      Я пока, к сожалению, не вижу простого и универсального способа решить 100% задач, связанных со скругленными уголками. Даже в Safari и Fx3 с ними жуткие проблемы, хотя вроде как нативно поддерживают эти свойства.

    8. Rembo
      12 апреля 2009

      Это моя работа:

      http://forums.realcoding.net/index.php?showtopic=22509
      http://forum.vingrad.ru/forum/act-ST/f-319/t-247791/unread-1.html

      Вроде рисует всё красиво, но результата вычисления экстремума функции нет (
      Вся проблема в некоторых переменных, которые нельзя изменять во время отображения странички, почему… понятия не имею.

    Комментировать

    Powered by Zen Coding