3

This question looks similar but ultimately is different and didn't help. Moreover, the accepted answer was written in 2011 and seems outdated. That question has 400+ votes and the accepted answer has 500+ votes so understanding the differences between SVG and HTML is a common problem.

Canvas and its performance advantage is not under consideration because we only need to deal with <= 100 elements at a time, not thousands.

Assume the goal is to create an alternative to Adobe Spark, which is a simple design editor. (See image below.) The editor will let users add, move, and transform elements like text, image, and icons. Designs are output as PNGs.

SVG has worked so far, but there are issues like this and this with computing element positions and sizes.

In preliminary tests, HTML (e.g., div, span, img) looks promising, but before discarding the SVG code, it seems prudent to identify the key differences between HTML and SVG.

In particular:

It seems SVG’s primary difference is “magically” scaling designs from one size to another (e.g., normal resolution -> retina resolution).

But when we manually scale text and image elements with JavaScript, the preliminary tests show the HTML and SVG designs look equally as sharp.

Is there a difference between scaling designs with SVG automatically (by using the width, height, and viewbox attributes on the root SVG element) and scaling divs, spans, text, images, and HTML elements manually with JavaScript?

enter image description here

Crashalot
  • 33,605
  • 61
  • 269
  • 439
  • Just to clarify: when you say "HTML", do you mean rendering to ``, or do you mean sticking to text and images in divs and spans? – ccprog Jan 06 '19 at 20:57
  • @ccprog divs and spans, thanks! – Crashalot Jan 06 '19 at 21:02
  • 1
    Why the close vote? If the question is unclear, we are happy to clarify. If it's a dupe, please share the authoritative SO question. We're happy to use those answers to understand the differences between HTML and SVG. Otherwise, we have researched extensively on SO and elsewhere and not found an answer fit for 2019. – Crashalot Jan 06 '19 at 21:05
  • 2
    You get close votes as your question is way too broad, and actually somewhat opinion-based. On top you ask 4 questions in 1, which again is not recommended. I suggest you narrow things down, into several question and as well become more specific, preferable with some code samples, showing one and the other. With that we will be more able to provide a proper answer to each case. – Asons Jan 06 '19 at 21:14
  • We tried to remove any semblance of opinion by asking for differences, and we tried to narrow the question by asking specific cases. Which parts do you feel are too subjective? We'll fix those. Also it's unclear how this is different from the linked question which has 400+ up votes. Thanks for your feedback! – Crashalot Jan 06 '19 at 21:16
  • 1
    This is an apples-and-oranges comparison between two very dissimilar technologies, and some aspects of the question are borderline nonsensical ("are there any HTML gotchas with text" for example -- basically the entire web consists of HTML containing text so it's difficult to understand what you're getting at there.) – Daniel Beck Jan 06 '19 at 21:18
  • @DanielBeck ok happy to remove the gotcha question, but the linked question which is similar has 400+ upvotes but has an outdated answer. this seems like a common question many people want to understand. – Crashalot Jan 06 '19 at 21:19
  • Generally, don't ask 4-in-1. When it comes being too subjective, when asking, _"use this or that"_, one need to say _"it depends"_, and until we can't see _"what"_ you do (with code samples), there is too many answers, hence make it all too broad. ... As a note, in 2011, when the linked question were posted, SO was less strict, still, its also quite specific, asking about a _"rectangle, circle and polygon"_. As some of those can't be made with e.g. a `div`, the answering becomes easier. – Asons Jan 06 '19 at 21:27
  • So simply put, in some cases SVG is good, in some HTML. – Asons Jan 06 '19 at 21:28
  • 1
    @LGSon read and updated the question. thanks for helping to make the question better! – Crashalot Jan 06 '19 at 21:36
  • @DanielBeck revised question. thanks for the feedback and making the question better. – Crashalot Jan 06 '19 at 21:40
  • 1
    As far as I am concerned, you just deleted the answerable parts of your question, and kept the "it depends" parts. In terms of supported attributes, CSS properties and offered functionality, it is possible to compare `` to HTML elements like `

    ` and `` to ``. A functional comparison of SVG `transform` and CSS `transform` in the light of current browser support is equally possible. What I understand is the argument of "too much at once".

     – ccprog Jan 06 '19 at 22:21
  • The main difference is the language. SVG is all oriented toward graphic elements while HTML is oriented toward semantic. Now I understand you are worried about which will render best, and this is very dependent on the implementation and what you'll render, but in browsers, HTML elements and SVG ones will actually follow a very similar route from parsing to rendering, making HTML + CSS indeed a vector like graphic if you wish. If you are planning on using text, then you may have better font smoothing for HTML content than for SVG, but once again heuristics are numerous in this area... – Kaiido Jan 07 '19 at 01:32
  • All in all, remember that at the end everything is drawn on canvas internally, and that all these technologies can be mixed pretty well, so just choose whatever you are the more comfortable with. – Kaiido Jan 07 '19 at 01:33

0 Answers0