performance issue inline SVG vs. embed or iframe

Question

I have two SVG images, both together have about 8000 lines and consist of several shapes with gradients. No patterns, filters, texts, just basic graphical elements with strokes, simple- or gradient fill.

At the moment they are injected inline into the HTML while it is generated, so the source code becomes quiet large. Does this decrease performance for animation, so that it would better to embed the svg differently?

Is there a general rule of thumb to follow when embedding svg?

Greetings philipp

Everything that uses DOM a lot with slow down rendering of the site so will a large SVG. Even if you use iframes or other embedding methods you don't know at which time the browser with load and render it... except you use Javascript to ensure that its only loaded after the page was rendered. Maybe you render a placeholder first. — codingjoe
– codingjoe, Commented May 2, 2013 at 12:17

codingjoe · Accepted Answer · 2013-05-02 14:23:52Z

If you use the HTML5 SVG tag to embed the SVG inline that will not just increase the html file size but also keep DOM busy and your browsers renderer.

If you use iframes you don't really know when it gets loaded or rendered, at least not for all browsers.

HTML5 offers you JavaScript and that might be the solution. Just wait for the body to load and then inject the SVG.

You can use body-onLoad or jQueries ready()-funktion

Here is how it's done in jQuery:

<!DOCTYPE html> <html> <body> <div id="svg-01" class="placeholder"></div> <script src="path/to/jQuery.js"></script> <script> $(document).ready(function(){ $("#svg-01").replaceWith('<svg><!--// some svg //--></svg>'); }); </script> </body> </html>

I would even go a step further and rather use replace it with an iframe and gziped SVG as described here.

Collectives™ on Stack Overflow

performance issue inline SVG vs. embed or iframe

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related