Inline Svg Vs Svg File Performance

Img or SVG File loading Performance?

Depends on your definition to the term "best".

If best means vectorized, then SVG, see the advantages and disadvantages of SVG.
If best means a compressed picture, then create an image.
If best means something very interactive, like a game, then canvas and Javascript might be the best for you.
If best means some consistent design, then solve the problem using HTML & CSS (which is not the case when we are talking about drawing the half-moon).

So, first of all, you will need to think about what your design is for and try to implement everything you can with HTML and CSS (using media queries) and make sure your pictures are implemented well. Note, that if you create an svg, you can export it into an image any time, so this might be a clue that you could temporarily choose svg while you are waiting for further specification for your job.

SVG inline vs <img>, performance and caching

The decision of picking inline versus tag would depend on the popularity of your site / app. There is a very interesting article on Yahoo! Perf guidelines page developer.yahoo.com/performance/rules.html which says on an average 60-80% of the users come to your site daily with an empty cache (yuiblog.com/blog/2007/01/04/performance-research-part-2) It totally depends on the popularity of the website - The more popular a site, the chances of a having a non empty cache is more.

Is it better to use SVG or JPG/PNG images for page performance?

These are different tools for different jobs.

SVG is for vector images. Rectangles, lines, ellipses, and all the things you can compose together from primitive objects. Vector images can scale to most any size and still look decent, because they're not made of pixels. They're a set of instructions for what to draw on the screen.

PNG is for raster images. A grid of pixels that represent the image. These cannot be scaled without loss of quality, as naturally all you can do is make the pixels bigger, or resample the image which gives it various levels of fuzziness in quality. PNG is great for when you need an alpha channel, need lossless quality of image, or have a lot of solid colors side-by-side, such as the case with computer screenshots.

JPEG is for photos, also raster images. It's lossy and designed to take advantage of how human vision works to reduce file sizes for images of the real world.

You wouldn't use a JPEG for a vector logo... you'd use SVG. You wouldn't use a JPEG for a screenshot. You couldn't use an SVG for a screenshot, as it's a raster image.

performance issue inline SVG vs. embed or iframe

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.

Inline Svg Vs Svg File Performance

Img or SVG File loading Performance?

SVG inline vs <img>, performance and caching

Is it better to use SVG or JPG/PNG images for page performance?

performance issue inline SVG vs. embed or iframe

Related Topics

Leave a reply