Website Logo. Upload to /source/logo.png ; disable in /source/_includes/logo.html

Up and Running with SVG

An SVG primer for everyone. Created by Mijingo.

Adding SVG to Your Template Code

Okay, let’s get started adding SVG images to our code so you can use them on our webpage. We’ll start off really simple and just use the SVG using a standard image tag in HTML. And then we will use SVG as a background image. And finally will set up SVG as an object in our webpage.

You can do this in your favorite code editor or, if you would like, you can even do this on CodePen. CodePen makes it really easy to see our changes and to quickly add some CSS or even JavaScript, if we need it.

Plain Ol’ SVG XML

<svg>
    <rect class="reverse" width="400" height="400"/>
</svg>

This is what we’ve been doing up to this point when we’re adding SVG files to our page. It’s just the SVG XML right in the HTML document. Nothing fancy, nothing difficult. It’s also one less asset for the browser to retrieve from a remote location because everything needed to render the image is right in the HTML. Pretty cool, right?

Advantages

A huge advantage of using SVG like this is that you can access it via the DOM and modify it using CSS and JavaScript. Add a class to a one of the elements and then style it accordingly from your CSS.

Disadvantages

One major drawback is that this asset is not cacheable like an SVG file or bitmap image invoked using other methods (like the img tag or as a background image). This may seem like a small affair but for high traffic sites this can be a big problem with scaling and performance.

SVG as Object

Using the object element is the most flexible way of adding SVG to your HTML document. You can declare a fallback image inside of the object tag pair. Unsupported web browsers will show this fallback image (a PNG, GIF, or JPG).

<object type="image/svg+xml"        
    data="big-company-logo-without-text.svg">
        <img src="big-company-logo-without-text.png" />
</object>

Advantages

  • Full access to the SVG internal elements. What does this mean? You can still manipulate the SVG with JavaScript and CSS.

  • The object element is cacheable.

Disadvantages

  • Implemented as-is, with a fallback image, the fallback image will always be retrieved by the client even if it is not needed. See more about this later on.

Using the img tag

The simplest way to add SVG to a web page is to call the image using the standard image tag, setting your SVG image as the source file.

<img src="myimage.svg" alt="My File">

Advantages

  • Very easy to do and using markup that’s simple and often used.
  • File can be cached for better performance.

Disadvantages

  • Unable to manipulate the SVG with JavaScript or CSS. For images like logos or icons that don’t need manipulation, this option is a fine choice.

SVG as Background Image

Just like you can with any other image, you can specify an SVG file as the background image for your page or element.

.logo { background: url(myimage.svg); }

Advantages

  • More flexible use of the SVG that just having it in the page.
  • Image can be cached

Disadvantages

  • Similar to when you use it with the img element, you are unable to manipulate the SVG with JavaScript for CSS.

Ready to learn more?

Get the Full Video Course