How do you implement an SVG logo?

archived 🗄
1

Hi all,

This is not a Sage specific question, but more of a general How to / Best Practice topic on usage of SVG logo’s. I’m using SVG logo’s in my latest Sage projects but I assume there is still room for improvement.

This is what I want to achieve:

  1. Great quality on all displays (incl Retina) / Scale to any size
  2. Modern browser support
  3. Logo should be clickable and return to the website homepage

This is my workflow:

  1. Create a logo in Illustrator

  2. In Illustrator → Create Outlines, Fit to Artboard

  3. Save to SVG using the settings below

  4. Include the logo in header.php

     <a class="navbar-brand" href="<?= esc_url(home_url('/')); ?>">
             <object type="image/svg+xml" class="logo" data="<?php echo get_template_directory_uri(); ?>/dist/images/logo.svg"></object>
         </a>

  5. Set width (and height) in CSS .navbar-brand {width:120px;}

  6. Hack to make the SVG logo clickable:
    a.navbar-brand { position: relative; display: inline-block; }
    a.navbar-brand:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left:0; }
    object { width: 100%; }

This is one way of doing it and it works fine for me. But I’m sure there are lots of differrent ways to achieve this and I’m curious to see your workflow. Please contribute to this post so we can compare different methods, pros and cons. Thanks!

2

Simply <img src="/path/to/the/file.svg"> or using inline SVG.

No need for an <object> or what you’re doing in #6

3

The hardest part about inline is making it clean.

Here’s a post I made on it: Best Practice: SVG Wordpress like a Boss

Lately I’ve started doing something different, and just using a template include. It’s a little simpler than my previous method. I can go more into depth if you’re interested, but it’s fairly straight forward. I think the tricky part is removing the SVG’s internal CSS and putting it into your stylesheet so you can use SASS on them.

If you’re not sure the difference between <img src="/path/to/the/file.svg"> and doing inline– inline gives you way more control on styling/animating the SVG with code for doing fancy stuff, or even just quickly changing the colors of an SVG without having to open Illustrator or anything.