CODEWITHSUNDEEP
csssvgdata-uri
Jakub Pawlowski
Jakub Pawlowski

Reputation: 247

SVG optimization and performance: human (shapes like polygon, circle...) vs application (path)

Has anybody experienced the difference in performance between:

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!).

Upvotes: 3

Views: 2275

Answers (1)

Devin Fields
Devin Fields

Reputation: 2544

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.

Upvotes: 4

Related Questions