Inline SVG vs SVG File Performance

I'm currently building a website aimed at modern browsers and mobile devices. In terms of performance, is it better to inline SVG's directly inside the HTML using <svg> or is it better to use <img> and/or background-image instead. I run gzip on the server to further compress my content and prefer not to rely on Javascript.

Pros for inline:

• Fewer http requests;
• You can use css fill property and change the color;
• Svg is part of the content, so it is clickable and you can insert text;

Pros for separate file:

• Svg files can be cached;
• You don't see multiple lines of irelevant code in your files;
• If you need to change it later then you just change one file;

There is no universal approach. It really depends on many things, but here some basic strategies which can be used separately or combined.

If we have:

• Small number of SVG(s) with < 5k file size each–inline them in HTML. Compressed gzip/brotli each will be around 1k. Any small number multiplied by 1k is better than same number of additional requests, no matter cached or not.

• Huge number of small SVG(s) < 5k - Make SVG sprite

• Any number of big SVG(s) > 5k and let's say we do not need to access SVG properties via CSS or JS. Then <img src="name.svg">

• Any number of SVG(s), but we do need to use CSS to change a SVG property or lets say animate some SVG property. The only viable option is inline svg.

• If we need SVG(s) for backgrounds but they are < than 5k each:

  .bg { background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>'); }

• If we need SVG(s) for backgrounds but they are > than 5k each:

  .bg { background: url('images/file.svg'); }

• I have never had a chance to try SVG sprite as background, but it is an option too

Inline SVGs would reduce the number of HTTP requests, so it should make the page load faster the first time someone's visiting. But the drawback is that your SVGs won't be cached in the browser and therefore it will have to be loaded every time. I'd say if you're only using a few SVGs (like 10 or so), inline them; but if you have many, go with img+background-image.

You may also want to consider using SVG definitions and using the SVG use tag to reference SVG definitions. This method is pretty good; especially if you need to repeat an SVG multiple times in your page. More info on this technique: http://css-tricks.com/svg-sprites-use-better-icon-fonts/

https://icomoon.io/app">**My web app** can also help you easily make these SVG definition & use pairs.

Claudiu Creanga, you are correct on most, but not on the last one :)

Concerning file SRC: "If you need to change it later then you just change one file;"

The file can be a separate SVG as Inline also. Just include the XML/text source via PHP for instance:

<?php include_once($_SERVER['DOCUMENT_ROOT'] . '/img/icon-home.svg'); ?>

I'm using this tactic since I do CSS3 animations on my icons. This way you have the original reference file for modifying in a vector program and simple upload will fix all inline code. Object and path ID's inside the SVG won't change if you just rearrange or manipulated them.

Being able to cache SVGs is a big reason to include them as images. What I love doing is including them using CSS masks - this is for me the perfect cross between a true image and the ability to change the color of the icon like I would if it was inline SVG. This results in icons that are easily controlled through CSS classes, can be customized, and don't bloat the code at all.

Reference for this method: https://equinusocio.dev/blog/accessible-icon-buttons-with-masks-and-svg/