Geek asks and answers

Embedded SVG vs embed or iframe performance issue

I have two SVG images, both of them have about 8000 lines and consist of several shapes with gradients. No templates, filters, texts, just basic graphic elements with strokes, simple or gradient filling.

They are currently being injected inline in HTML while they are generated, so the source code becomes quiet. Does this have performance degradation for the animation, so it would be better to embed svg differently?

Is there a general rule for implementing svg?

Greetings philipp

+5
source share
1 answer

SVG HTML5 SVG, html, DOM .

iframe, , , , .

HTML5 JavaScript , , . , load, SVG.

body-onLoad jQueries ready() - funktion

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>

iframe gziped SVG, .

+1

More articles:


All Articles