Menu
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
764
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.
166
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
