в чем разница между svg и html5 canvas?

<p>каковы различия между svg и html5 canvas? они оба, кажется, делают то же самое для меня. по сути, они оба рисуют векторные изображения с использованием координатных точек.</p><p>что мне не хватает? каковы основные различия между svg и html5 canvas? почему я должен выбирать один над другим?</p>

<p>смотрите википедию: <a href="http://en.wikipedia.org/wiki/canvas\_element">http://en.wikipedia.org/wiki/canvas\_element</a> </p><blockquote> <p>svg - это более ранний стандарт для рисования фигур в браузерах. однако svg находится на принципиально более высоком уровне, потому что каждая нарисованная фигура запоминается как объект в графе сцены или dom, который впоследствии отображается в битовой карте. это означает, что если атрибуты объекта svg изменены, браузер может автоматически повторно визуализировать сцену.</p> <p>в приведенном выше примере, после того, как прямоугольник нарисован, тот факт, что он нарисован, забывается системой. если бы его положение было изменено, необходимо перерисовать всю сцену, включая любые объекты, которые могли быть покрыты прямоугольником. но в эквивалентном случае svg можно просто изменить атрибуты положения прямоугольника, и браузер определит, как его перекрасить. также возможно нарисовать холст в слоях и затем воссоздать определенные слои.</p> <p>изображения svg представлены в формате xml, а сложные сцены можно создавать и поддерживать с помощью инструментов редактирования xml.</p> <p>граф сцены svg позволяет связывать обработчики событий с объектами, поэтому прямоугольник может реагировать на событие onclick. чтобы получить ту же функциональность для холста, необходимо вручную сопоставить координаты щелчка мыши с координатами нарисованного прямоугольника, чтобы определить, был ли он нажат.</p> <p>концептуально, canvas - это протокол более низкого уровня, на котором может быть построен svg. [цитата нужна] однако, это (как правило) не так - они являются независимыми стандартами. ситуация сложная, потому что для canvas есть библиотеки графа сцены, а svg обладает некоторой функциональностью для работы с битовыми картами.</p> </blockquote><p>обновление: я использую svg из-за его возможностей языка разметки - он может обрабатываться xslt и может содержать другую разметку в своих узлах. точно так же я могу держать svg в моей разметке (химия). это позволяет мне манипулировать атрибутами svg (например, рендерингом) с помощью комбинаций разметки. это может быть возможно в canvas, но я подозреваю, что это намного сложнее.</p>

<p>svg - это программа для рисования. чертеж указан как инструкция для каждой фигуры, и любая часть любой фигуры может быть изменена. чертежи ориентированы на форму.</p><p>canvas - это программа для рисования. как только пиксели попадают на экран, это ваш рисунок. вы не можете изменять формы, кроме как перезаписывая их другими пикселями. картины ориентированы на пиксели.</p><p>возможность менять рисунки очень важна для некоторых программ; например создание приложений, создание диаграмм и т. д. таким образом, svg имеет здесь преимущество.</p><p>возможность контролировать отдельные пиксели важна для некоторых художественных программ.</p><p>с canvas проще, чем svg, получить отличную производительность анимации для манипулирования пользователями с помощью перетаскивания мышью.</p><p>один пиксель на экране компьютера часто потребляет 4 байта информации, а экран компьютера в наши дни занимает несколько мегабайт. поэтому canvas может быть неудобен, если вы хотите, чтобы пользователь мог отредактировать изображение, а затем загрузить его снова.</p><p>в отличие от этого, отрисовка нескольких фигур, охватывающих весь экран, с использованием svg занимает несколько байтов, быстро загружается и может быть легко загружена снова с теми же преимуществами, что и в этом направлении, когда речь идет о другом направлении. так что svg может быть быстрее, чем canvas.</p><p>google реализовал google maps с svg. это дает веб-приложению высокую производительность и плавную прокрутку.</p>

<p>резюме высокого уровня canvas vs. svg</p><p><strong> canvas </strong></p><ol> <li>пиксельный (dynamic .png)</li> <li>отдельный элемент html. (проверьте элемент в инструменте разработчика. вы можете видеть только тег canvas)</li> <li>изменено только через скрипт</li> <li>модель события/взаимодействие с пользователем является гранулированной (x, y)</li> <li>производительность лучше с меньшей поверхностью, большим количеством объектов (> 10k) или обоими</li> </ol><p><strong>svg</strong></p><ol> <li>основанный на форме</li> <li>несколько графических элементов, которые становятся частью dom</li> <li>модифицировано через скрипт и css</li> <li>модель события/взаимодействие с пользователем абстрагируется (прямоугольник, путь)</li> <li>производительность лучше с меньшим количеством объектов (<10k), большей поверхностью или обоими</li> </ol><p>подробнее о разнице читайте <a href="http://msdn.microsoft.com/en-us/library/ie/gg193983(v=vs.85).aspx">http://msdn.microsoft.com/en-us/library/ie/gg193983 (v = vs.85) .aspx</a> </p>

<p>две вещи, которые поразили меня больше всего для svg и canvas, были:</p><p>возможность использовать canvas без dom, поскольку svg сильно зависит от dom и по мере увеличения сложности производительность замедляется. как в игровом дизайне.</p><p>преимущество использования svg заключается в том, что разрешение остается одинаковым для всех платформ, которых нет в canvas.</p><p>на этом сайте предоставлено много подробностей. <a href="http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/">http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/</a> </p>

<p>это абсолютно зависит от ваших потребностей/требований.</p><ul> <li> <p>если вы хотите просто показать изображение/диаграмму на экране, то рекомендуется использовать метод canvas. (например, png, gif, bmp и т.д.)</p> </li> <li> <p>если вы хотите расширить возможности вашей графики, например, если вы наведите курсор мыши на график и хотите увеличить определенную область без ухудшения качества отображения, тогда вы выбираете svg. (хороший пример - файлы autocad, visio, gis).</p> </li> </ul><p>если вы хотите создать инструмент создания динамических потоковых диаграмм с помощью коннектора формы, лучше выбрать svg, а не canvas.</p><ul> <li> <p>когда размер экрана увеличивается, холст начинает ухудшаться, так как необходимо нарисовать больше пикселей.</p> </li> <li> <p>когда количество объектов увеличивается на экране, svg начинает<br> ухудшаются, поскольку мы постоянно добавляем их в dom.</p> </li> </ul><p>также, пожалуйста, обратитесь: <a href="http://msdn.microsoft.com/en-us/library/gg193983%28v=vs.85%29.aspx">http://msdn.microsoft.com/en-us/library/gg193983 (v = vs.85) .aspx</a> </p>

<p><strong>svg</strong></p><p>исходя из варианта использования svg используется для логотипов, диаграмм, потому что свою векторную графику вы рисуете и забываете об этом. при изменении вида порта, например, изменения его размера (или масштабирования), он будет саморегулироваться и не будет нуждаться в перерисовке.</p><p><strong> canvas </strong></p><p>холст - это растровое изображение (или растр), которое выполняется путем рисования пикселей на экране. он используется для разработки игр или графики ( <a href="https://www.chromeexperiments.com/webgl">https://www.chromeexperiment.com/webgl</a> ) в определенной области, он рисует пиксель и изменяет его, перерисовывая другой. поскольку это растровый тип, нам нужно полностью перерисовывать при изменении вида порта.</p><p><em> ссылка </em></p><p> <a href="http://www.sitepoint.com/7-reasons-to-consider-svgs-instead-of-canvas">http://www.sitepoint.com/7-reasons-to-consider-svgs-instead-of-canvas</a> </p><p> <a href="http://en.wikipedia.org/wiki/webgl">http://en.wikipedia.org/wiki/webgl</a> </p><p> <a href="http://vector-conversions.com/vectorizing/raster\_vs\_vector.html">http://vector-conversions.com/vectorizing/raster\_vs\_vector.html</a> </p>

<p>добавив к вышеуказанным пунктам:</p><p>svg облегчает передачу через интернет по сравнению с jpeg, gif и т.д., а также масштабируется при изменении размера без потери качества.</p>