SVG和HTML中的缩放元素之间有区别吗？

Question

This question看起来很相似，但最终有所不同，没有帮助。此外，接受的答案写于2011年，似乎已经过时。该问题的票数超过400，而接受的答案的票数超过500，因此了解SVG和HTML之间的区别是一个常见问题。

画布及其性能优势不在考虑之列，因为我们一次只需要处理<= 100个元素，而不是数千个。

假设目标是创建Adobe Spark的替代品，这是一个简单的设计编辑器。 （请参见下图。）该编辑器将允许用户添加，移动和转换诸如文本，图像和图标之类的元素。设计以PNG格式输出。

到目前为止，SVG一直有效，但是在计算元素位置和大小方面存在诸如this和this之类的问题。

在初步测试中，HTML（例如div，span，img）看起来很有希望，但是在丢弃SVG代码之前，确定HTML和SVG之间的关键区别似乎是谨慎的做法。

尤其是：

似乎SVG的主要区别在于“神奇地”将设计从一种尺寸缩放到另一种尺寸（例如，正常分辨率->视网膜分辨率）。

但是，当我们使用JavaScript手动缩放文本和图像元素时，初步测试表明HTML和SVG设计看起来同样清晰。

使用SVG自动缩放设计（通过在SVG根元素上使用width，height和viewbox属性）与使用JavaScript手动缩放div，span，文本，图像和HTML元素之间是否有区别？