Этот вопрос выглядит аналогично, но в конечном итоге отличается и не помог. Более того, принятый ответ был написан в 2011 году и выглядит устаревшим. Этот вопрос имеет более 400 голосов, а принятый ответ имеет более 500 голосов, поэтому понимание различий между SVG и HTML является обычной проблемой.
Canvas и его преимущество в производительности не рассматриваются, потому что нам нужно иметь дело только с <= 100 элементами одновременно, а не с тысячами. </p>
Предположим, целью является создание альтернативы Adobe Spark, который является простым редактором дизайна. (См. Изображение ниже.) Редактор позволит пользователям добавлять, перемещать и преобразовывать такие элементы, как текст, изображение и значки. Проекты выводятся в формате PNG.
SVG до сих пор работал, но есть такие проблемы, как this и this с позициями и размерами вычислительных элементов.
В предварительных тестах HTML (например, div, span, img) выглядит многообещающе, но перед отказом от кода SVG представляется целесообразным выявить ключевые различия между HTML и SVG.
В частности:
Кажется, что основным отличием SVG является «магическое» масштабирование проектов от одного размера к другому (например, нормальное разрешение -> разрешение сетчатки).
Но когда мы вручную масштабируем элементы текста и изображения с помощью JavaScript, предварительные тесты показывают, что проекты HTML и SVG выглядят одинаково четко.
Есть ли разница между автоматическим масштабированием проектов с использованием SVG (с использованием атрибутов width, height и viewbox в корневом элементе SVG) и масштабированием элементов div, span, text, images и HTML вручную с помощью JavaScript?
