Inline SVG vs SVG File Performance

Dave picture Dave · Apr 22, 2014 · Viewed 22.6k times · Source

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.

Answer

Claudiu Creanga picture Claudiu Creanga · Aug 5, 2016

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;