Norderly

Buy graphic designs with Bitcoin.

Latest 🏙 Log entry: Falling Asheep and Burano Italy logos crafted. ^ 05 Mar 2021 | Support

Using inline SVG to get the highest logo quality

| Updated: Jul 21, 2020


Unicorn vector

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:

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?

Feel free to reach out to anyone at Norderly via the support page email addresses. If we can help, we will!

⮐ All Logs