SVG и Canvas. Помогите сравнить!

[vla]

SVG или Canvas​

В этой теме хочу сравнить два вида векторной web-графики.​

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

• Как в SVG-графике, так и в элементе HTML5 - Canvas можно рисовать примерно одинаковый набор элементов: эллипс, прямоугольник, кривая, изображение jpeg(gif,png), текст...
• Также идентичны "раскраски" и трансформации/деформации: градиенты/моноцвет(заливка), обводка, поворот, перемещение по осям X и Y, изменение пропорций, масштабирование объекта, наклон...
• В обоих случаях есть возможность управлять элементами и их свойствами через JavaScript, т.е. делать анимационные эффекты и интерактивные действия (хватать курсором объект). Как я понял, в Canvas можно создавать и управлять объектами только через JS!
• По некоторым источникам графика/анимация Canvas значительно выигрывает по производительности. К сожалению не сохранил ссылку на источник...

Наверное, это всё. Всё что мне известно на данный момент! Все, кто может и можетихочет сравнить эти две штуки, прошу отписаться здесь!

Также хочу приложить несколько ссылок - может кому пригодится...
http://ru.wikipedia....ki/Canvas_(html) - Canvas - статья из Википедии на русском, с примерами
http://www.w3schools...tml5_canvas.asp - описание Canvas на почетном сайте w3schools.com
http://www.w3schools..._ref_canvas.asp - элементы, их свойства и методы. w3schools.com
http://ru.wikipedia.org/wiki/SVG - SVG - статья на Вики, более информативная, чем статья про Canvas. С примерами
http://www.w3schools...5/html5_svg.asp - w3schools.com рассказывает о SVG и как ее включить в HTML5
http://www.w3schools.com/svg/ - страница про SVG
http://javascript.ru...acii-JavaScript - Статья, как сделать анимацию на JS. Помогает понять отличия анимационных эффектов CSS и программной анимации на JS. Интересные примеры
http://learn.javascript.ru/animation Тоже очень интересная статья о JS-анимации

 

[czp]

я этим загонялся месяца 2(может меньше, на этом форуме есть тема, создавал) назад, мой вывод:
если просто рисовать то канвас, он идет как картинка,
если делать приложение с событиями, типа клики, тягалки и всякую другую чушь то СВГ, не вопрос канвас тоже умеет это делать, но канвас идет как картинка как уже писал, задолбитесь со слоями работать, а СВГ теги идут - как верстка, канвас на графики хорош и прочее
--
и то, и то кул, но для своих задач

 

[AngelGabriel]

не нужн сравнивать свинью и коня. Выбор той или иной технологии делается исходя из птребностей конкретного проекта. У даных технологий есть свои + и - прочтите книгу Р. Шарпа

 

[BaNru]

Книгу переворошив,
намотай себе на ус -
все работы хороши,
выбирай
на вкус!
В. В. Маяковский, «Кем быть?»

Мое мнение, и я его частично уже озвучивал - я выбрал пока что SVG. Но это не отменяет того, что я не буду подробно изучать CANVAS
Есть вещи, которые лучше и проще делать на SVG, а есть, которые на CANVAS.
На данный момент, я считаю CANVAS слишком сложным.

Вот бы инструмент, который туда сюда перегоняет вектор ))) Может кто знает, может есть уже?

 

[medwoodu]

Какая у вас задача??? может вообще лучше webgl? SVG это вектор, вектор и еще раз вектор, это полярная система координат. А канвас - это прямоугольная система координат и некоторый аналог пиксельного растра. Они одинаково легкие/сложные, все зависит от задач.

 

[vla]

[member=czp], спасибо тебе большое, что рассказал о своем собственном опыте. Твое мнение понял!

Выбор той или иной технологии делается исходя из птребностей конкретного проекта.

Блин, [member=ozzon91], а как ты будешь выбирать, если ты их не сравнил однажды и не знаешь что для чего лучше!

У даных технологий есть свои + и - прочтите книгу Р. Шарпа

За указание на информации - спасибо. Посмотрю что за книжка.

[member=BaNru], как я понял, ты еще тоже не определился окончательно. Мне стала интерсна эта тема, но информации намного меньше, чем о популярных вопросах типа: "Скругленные углы CSS" и "Падающий снег, будь он проклят". Обидно. Я помню в моей предыдущей теме про SVG SVG-графика, информация ты хотел написать статью... Надеюсь, что поделишься знаниями и информацией!

Какая у вас задача???

[member=Medwoodu], вся проблема в том, что определенная задача пока не ясна! Но если будет легче на примере, хорошо:
с помощью чего лучше написать анимацию "прыгающий/катящийся мячик по рельефу"? Сделав упор на реалистичную физику (школьного курса, достаточно) - упругость, деформация мячика (просто кружка), отскок, свободное падение итд

[member=Medwoodu], в теме, о которой я говорил выше вы мне посоветовали библиотеку для SVG raphaeljs! Перевел, изучил, понял. Еще раз спасибо. Сделал анимацию: колесо катится по горкам Смотря инфу про Canvas заметил, что Кaphaeljs очень и очень похожа, за исключением синтаксиса!

 

[BaNru]

как я понял, ты еще тоже не определился окончательно

Не совсем. Я определился ещё лет эдак 8 назад. Я за вектор. SVG - это вектор во всём его опенсорс проявление :biggrin:
Просто canvas тоже надо хоть немного знать, что бы применять его там, где он больше подходит. Я просто его ещё не изучал. Пару раз глянул на него, ужаснулся на непонятно_что_там_написанное и закрывал :biggrin:
И как Медвуду тут упомянул, у меня желание лежит копнуть в webgl больше чем в canvas.

прыгающий/катящийся мячик по рерьефу

Уже выкладывал ссылку и еще раз поделюсь
http://alteredqualia...webgl_cars.html

 

[vla]

SVG это вектор, вектор и еще раз вектор, это полярная система координат.

Наверное вы имеете ввиду визуализацию/рассчеты браузера. Я конечно не досканально изучил SVG, но мне не попадалось задавать в полярных координатах ничего! Там даже трансформации декартовыми координатами прописаны. Можно "другими словами" что вы имели ввиду.

[member=BaNru], я понял, что выкладывал... где-то я это уже видел )
Your browser does not seem to support WebGL.
Find out how to get it here.
ФАК

 

[BaNru]

BaNru, я понял, что выкладывал... где-то я это уже видел ) Your browser does not seem to support WebGL. Find out how to get it here. ФАК

Потому что надо либо разрешать в браузерах webgl, либо ставить хром для таких дел

 

[vla]

SVG это вектор, вектор и еще раз вектор, это полярная система координат.

И еще! Из этих слов я могу сделать вывод, что SVG сложнее в построении/обработке для браузера (процессора)?

 

[medwoodu]

http://habrahabr.ru/.../canvas/137762/ это построение canvas
а в svg вам нужно было бы задать поверхности и текстуры

p.s. на canvas есть дофига готовых движков, с физическими законами взаимодействия тел

 

[AngelGabriel]

Потому что надо либо разрешать в браузерах webgl, либо ставить хром для таких дел

та же фигня и в хроме

 

[BaNru]

та же фигня и в хроме

Ну что вы как маленькие дети. Задайте вопрос Яндексу или Гуглу
"Как включить WEBGL в [имя браузера]"
"Как включить аппаратное ускорение в [имя браузера]"

а в svg вам нужно было бы задать поверхности и текстуры

А в SVG я просто нарисовал бы в кореле :biggrin:

 

[medwoodu]

А в SVG я просто нарисовал бы в кореле :biggrin:

ога, бьющееся сердце? :tongue:

 

[BaNru]

ога, бьющееся сердце?

Не, ну анимация уже с помощью CSS или JS.
Что-то, а вот розу из ссылки или бьющееся сердце точно проще в кореле нарисовать.

 

[vla]

Не, ну анимация уже с помощью CSS или JS.

Вот этот вопрос меня очень интересует!!!!!!
Какой способ легче для браузера? Canvas или SVG анимировать? Из того, что я прочитал - легче Canvas...
Интересно, как можно протестировать...?

Что-то, а вот розу из ссылки или бьющееся сердце точно проще в кореле нарисовать.

Полностью поддерживаю эту мысль... Не вижу никакой разницы, что анимировать!

 

[BaNru]

Какой способ легче для браузера?

Canvas

Всё же стоит разделить тут сразу:
CAMVAS - это своего рода градиенты, анимация более продвинутая.
А вот SVG - это всё же картинки, типа иконок и т.п.

Это как спорить, что лучше JPEG, PNG или GIF.

Вот SVG как раз и призваны в вебе заменить PNG, APNG (это вообще не понятно зачем хотят вводить) и GIF.

CANVAS - это в какой-то мере для более сложных, динамических задач, такие как игры. SVG в создание игры скорее всего проиграет из-за производительности. Но рисовать проще все же в специальных пакетах, таких как CorleDraw, AI или Inscape

ЗЫ Опять таки, ИМХО, производительность ниже, потому что SVG добавили для галочки и это старые технологии, а CANVAS более молодая и интенсивно развивающаяся. Если бы у SVG обновили движок, оптимизировали работу, то всё могло бы быть наоборот.