HTML5 Canvas против SVG против div

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

Я обнаружил, что на моем 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 1000 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 точек, а обработка js намного быстрее, чем protovis.

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

Существует также библиотека dojo.gfx набора инструментов 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 (и, возможно, другие) используют абсолютно позиционированные не вложенные div (с нетривиальным содержимым HTML/CSS) в сочетании с матрицей 2d/matrix3d ​​для позиционирования и 2D/3D-преобразованиями и обеспечивают стабильную 60FPS на умеренное мобильное оборудование, поэтому я бы сказал, что divs является медленным вариантом.

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

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

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

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

ИМХО для большинства случаев использования сегодня SVG дает наилучшее соотношение производительности и удобства использования. Визуализации должны быть действительно сложными (с точки зрения количества элементов) и одновременно очень простыми (для каждого элемента), чтобы Canvas и даже более того WebGL действительно сияли.

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

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

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

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

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