HTML5 Canvas vs SVG vs div

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

Я обнаружил, что на моем Mac для очень больших изображений SVG превосходит. У меня есть MacBook Pro 2013 13" Retina, и он довольно хорошо работает на скрипке ниже. Изображение 6000x6000 пикселей, и имеет 1000 объектов. Подобная конструкция в холсте была невозможна анимация для меня, когда пользователь перетаскивал объекты на диаграмме.

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

Скрипка:http://jsfiddle.net/knutsi/PUcr8/16/

полноэкранный режим:http://jsfiddle.net/knutsi/PUcr8/16/embedded/result/

var wiggle_factor = 0.0;
nodes = [];

// create svg:
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute('style', 'border: 1px solid black');
svg.setAttribute('width', '6000');
svg.setAttribute('height', '6000');

svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink",
    "http://www.w3.org/1999/xlink");

document.body.appendChild(svg);


function makeNode(wiggle) {
    var node = document.createElementNS("http://www.w3.org/2000/svg", "g");
    var node_x = (Math.random() * 6000);
    var node_y = (Math.random() * 6000);
    node.setAttribute("transform", "translate(" + node_x + ", " + node_y +")");

    // circle:
    var circ = document.createElementNS("http://www.w3.org/2000/svg", "circle");
    circ.setAttribute( "id","cir")
    circ.setAttribute( "cx", 0 + "px")
    circ.setAttribute( "cy", 0 + "px")
    circ.setAttribute( "r","100px");
    circ.setAttribute('fill', 'red');
    circ.setAttribute('pointer-events', 'inherit')

    // text:
    var text = document.createElementNS("http://www.w3.org/2000/svg", "text");
    text.textContent = "This is a test! ÅÆØ";

    node.appendChild(circ);
    node.appendChild(text);

    node.x = node_x;
    node.y = node_y;

    if(wiggle)
        nodes.push(node)
    return node;
}

// populate with 100 nodes:
for(var i = 0; i < 1000; i++) {
    var node = makeNode(true);
    svg.appendChild(node);
}

// make  one mapped to mouse:
var bnode = makeNode(false);
svg.appendChild(bnode);

document.body.onmousemove=function(event){
    bnode.setAttribute("transform","translate(" +
        (event.clientX + window.pageXOffset) + ", " +
        (event.clientY + window.pageYOffset) +")");
};

setInterval(function() {
    wiggle_factor += 1/60;
    nodes.forEach(function(node) {

        node.setAttribute("transform", "translate(" 
                          + (Math.sin(wiggle_factor) * 200 + node.x) 
                          + ", " 
                          + (Math.sin(wiggle_factor) * 200 + node.y) 
                          + ")");        
    })
},1000/60);

зная различия между SVG и Canvas было бы полезно в выборе правильного.

холст

• зависит от разрешения
• нет поддержки для обработчиков событий
• плохие возможности рендеринга текста
• вы можете сохранить полученное изображение как .png или .jpg
• хорошо подходит для графических интенсивных игр

SVG

• независимое разрешение
• поддержка обработчики событий
• лучше всего подходит для приложений с большими областями рендеринга (Google Maps)
• медленный рендеринг, если сложный (все, что использует DOM много будет медленно)
• не подходит для игрового приложения

Я согласен с выводами Саймона Сарриса:

Я сравнил некоторую визуализацию в Protovis (SVG) с Processingjs (Canvas), которая отображает > 2000 точек, а processingjs намного быстрее, чем protovis.

обработка событий с помощью SVG, конечно, намного проще, потому что вы можете прикрепить их к объектам. В Canvas вы должны сделать это вручную (проверить положение мыши и т. д.), Но для простого взаимодействия это не должно быть сложно.

существует также додзе.видеокарта библиотека инструментария dojo. Он предоставляет слой абстракции, и вы можете указать рендерер (SVG, Canvas, Silverlight). Это может быть также жизнеспособным выбором, хотя я не знаю, сколько накладных расходов добавляет дополнительный уровень абстракции, но он упрощает кодирование взаимодействий и анимаций и является рендерер-агностиком.

вот некоторые интересные контрольные показатели:

• http://svbreakaway.info/tp.php#jan21a
• http://www.eleqtriq.com/2010/02/canvas-svg-flash/
• http://smus.com/canvas-vs-svg-performance/

только мои 2 цента относительно опции divs.

известных/Infamous и SamsaraJS (и, возможно, другие) использовать абсолютное позиционирование без вложенных дивов (с нетривиальным HTML и CSS контент), совмещенный с matrix2d/matrix3d для позиционирования и 2D/3D преобразования и добиться стабильных 60FPS на умеренных мобильных устройств, так что я спорил против ДИВС быть медленным вариантом.

есть много записей экрана на Youtube и в других местах, высокопроизводительных 2D / 3D вещей запуск в браузере со всем, что является элементом DOM, который вы можете Проинспектировать Элемент on, при 60FPS (смешивается с WebGL для определенных эффектов, но не для основной части рендеринга).

для ваших целей я рекомендую использовать SVG, так как вы получаете события DOM, такие как обработка мыши, включая перетаскивание, включенные, вам не нужно реализовывать собственную перерисовку, и вам не нужно отслеживать состояние ваших объектов. Используйте Canvas, когда вам нужно выполнять манипуляции с растровыми изображениями и использовать обычный div, когда вы хотите манипулировать материалом, созданным в HTML. Что касается производительности, вы обнаружите, что современные браузеры теперь ускоряют все три, но этот холст получил больше всего пока внимание. С другой стороны, насколько хорошо вы пишете свой javascript, имеет решающее значение для получения максимальной производительности с помощью canvas, поэтому я все равно рекомендую использовать SVG.

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

за эти годы производительность SVG значительно улучшилась и теперь есть аппаратное ускорение CSS переходов и анимации для SVG это не зависит от производительности JavaScript вообще. Конечно, производительность JavaScript также улучшилась, и с ней улучшилась производительность Canvas, но не так сильно, как SVG. Также есть "новый ребенок" на блоке, который является доступно практически во всех браузерах сегодня и это WebGL. Чтобы использовать те же слова, которые Саймон использовал выше: It бьет как холст, так и SVG руки вниз. Это не означает, что это должна быть технология go-to, хотя, поскольку это зверь для работы, и он только быстрее в очень конкретных случаях использования.

IMHO для большинства случаев использования сегодня SVG дает лучшее соотношение производительности/удобства использования. Визуализации должны быть действительно сложными (по количеству элементов) и очень просто в то же время (на элемент), так что холст и тем более WebGL действительно сияют.

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

в то время как googling я нахожу хорошее объяснение об использовании и сжатии SVG и холст at http://teropa.info/blog/2016/12/12/graphics-in-angular-2.html

надеюсь, это поможет:

• SVG, как и HTML, использует сохранил перевода: когда мы хотим нарисовать прямоугольник на экране, мы декларативно используем элемент в нашем ДОМ. Затем браузер нарисует прямоугольник, но он также будет создавать в памяти SVGRectElement "объект", представляющий прямоугольник. Этот объект-это то, что прилипает к нам, чтобы манипулировать – это удержанный. Мы можем назначить ему различные позиции и размеры с течением времени. Мы также можем прикрепить слушателей событий, чтобы сделать его интерактивным.
• холст использует немедленное оказание: когда мы нарисуйте прямоугольник браузер сразу же отображает прямоугольник на экране, но есть никогда не будет быть любым "прямоугольным объектом", который его представляет. Есть просто куча пикселей в буфере холста. Мы не можем сдвинуть прямоугольник. Мы можем только нарисовать еще один прямоугольник. Мы не можем ответить щелчки или другие события на прямоугольнике. Мы можем только реагировать на события на весь холст.

таким образом, canvas является более низкоуровневым, ограничительным API, чем SVG. Но есть обратная сторона в том, что с холста вы можете сделать больше с такое же количество ресурсы. Потому что браузер не нужно создавать и поддерживать в памяти объектный граф всех вещей, которые у нас есть нарисованный, он требует меньше памяти и вычислительных ресурсов, чтобы сделать то же визуальная сцена. Если у вас очень большая и сложная визуализация нарисуйте, холст может быть вашим билетом.