3

Has anybody experienced the difference in performance between:

  • Human SVG (shapes like polygon, circle, elipse, rect, line, text) (typed by human in text editor)
  • Application SVG (path) (generated by application / exporting as svg)

What renders faster in browsers? What has smaller size in bytes?

I bet this may depend largely on the actual image but I wonder if there are some general rules and if we can come up with a pattern as a community.

This is a follow up to question: Examples of polygons drawn by path vs polygon in SVG by chris Frisina.

Context: I'm working on reducing paint times by replacing simple JPEG backgrounds with SVGs (to save bytes) as CSS3 background image using data URI (to save on DOM nodes and HTTP request). I can't decide if I should go with Human SVG or Application SVG and if I should use Base64 encoding (I read a lot that modern browsers can use UTF-8 for SVG but I wonder if that's true for Human SVG or only for paths!).

4
  • 1
    The answer to all these sort of questions is "test and see". I doubt very much that there will be any significant difference. Mainly because the spec states that the basic shapes are to be converted to path representation internally anyway.. Even if there is a difference, it won't necessarily be consistent between browsers. Jan 17, 2017 at 2:47
  • Another of your misconceptions is that a CSS3 background image has the same number of DOM nodes as inline SVG, you just can't access them. Jan 17, 2017 at 6:29
  • @RobertLongson Sorry, I must have not been clear enough in my post- I agree with you that CSS3 background image has the same number of dom nodes as inline SVG. It's data URI which makes it only ONE image DOM node. Without data URI every element in Human SVG would become it's own node which would affect paint and flow times. Jan 17, 2017 at 7:17
  • 2
    The data URI has internal DOM nodes. I wouldn't expect paint flow and times to be much different. Try it and see of course. Jan 17, 2017 at 7:25

1 Answer 1

4

Assuming the svg image resulting from the manually-created and application-generated svg's is exactly the same, you wouldn't be able to notice a difference in draw-time. The resulting code generated by a program may be substantially larger, though, even if saving to the most optimized version. That is something to watch for. Don't bother using something like inkscape if all you need is a triangle. Manual creation will always be simpler in that case.

I'm answering because I happened upon this question while working on a semi-complex svg application for a larger app. I used paths to create a large portion of the shapes, but I wondered if polygons would be better at performance. My shapes are draggable and can have corners added/removed/dragged as well. Many of them move in tandem. In my small amount of testing the two versions, I couldn't see a difference in loading, drawing, etc. It doesn't seem like this applies to your scenario, but I will add this: since I am dynamically updating the d/points attribute, I had to test both examples of code that join the strings from sets of x, y coordinates. Again, both observing the running application or benchmarking the code itself, no clear winner.

So, use whichever you think is best. A polygon may be more contextual, if you don't need some qualities of the path element, such as curving.

If others have more in-depth tests of runtime performance, I'd love to see them.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.