Using inline SVG to get the highest logo quality

Why SVG?

Glad you asked!

Essentially you can get the best quality and speed when using SVG for your logo, icons and other graphic elements on your website.

Here are a few benefits:

  • – less HTTP requests (fater webpage load speed)
  • – small size (less bytes = faster load speed)
  • – scalability without clarity loss
  • – design control (modify logo with CSS, no need to open AI/Inkscape)

The only downside I can think of is that you can’t benefit from caching when inlining your SVGs. There is a way to use JS to address that but I won’t go into it in this short guide.

Bottom line: that’s not a huge problem and the pros heavily outweigh the cons.

Grab your SVG code

If you had a designer create your logo, just kindly ask for a scalable vector graphics (.SVG) format for it.

If you already have the source (Adobe Illustrator, .AI) then you can export it yourself. Note that you might also be able to use Inkscape if you don’t have Illustrator.

Open your logo.svg file in your default text editor (right-click > open with > notepad). You will see some text similar to this:

svg-example.png

Don’t worry if it’s a bit different, as long as you can see the <svg> tag somewhere.

Drop the SVG code in your HTML

<body>

 <svg>
	<!-- svg code.. -->
 </svg>

</body>

That’s right, copy-paste everything in your webpage. It works the same as an <img>. Refresh and your logo should show up!

Optimizations

You can optionally remove unnecessary comments and other junk from your SVG code that’s not needed in production.

If you are technical, svgo is a nice tool you can incorporate into your workflow (I use it as a Gulp task).

Alternatively there are online tools like SVG Optimiser where you can upload your SVG and it will give you an optimized version of it.

Does it work in..

The answer is probably ‘yes’ – it works in most modern browsers and the only realistic issues you are going to have is with users of IE 6-8, Android under 2.3.

Just check CanIUse for updated broswer support stats.

Need assistance?

Drop us a line via the contact form and use the Other-Misc dropdown. If we can help, we will!

Keep exploring

More Posts