3 ways to add svg

Three Ways to Add SVG to Your Website

May 02, 2018|SVG, CSS

When you think of using SVG on your website, you might not realize that you have three different ways you can add svg. In some cases one way might be better and more appropriate than at other times.

I will walk you through each of the ways so the next time you want to use svg you can do it in whichever way it is best for what you’re trying to accomplish.

Inside the IMG tag

SVG can simply be an image. So, logically it makes sense that you can add your svg image right inside an image tag just like you would with any other image on your website (i.e., jpg, png, gif) .

    <img src=“logo.svg” alt=“My awesome logo”>

In this case the svg logo is part of the content on your page.

Background Image (in CSS)

Just like you do with your jpg, png, and gif images, you can also add your svg image onto your page using CSS.

    .logo {
        background-image: url(logo.svg);
    }

This is very useful if you want to create a repeating pattern in a section of your page. It is small, crisp, and will scale perfectly.

Repeatable SVG Images on Hero Patterns Check out these Hero Patterns for some really great repeatable svg options.

As an SVG tag inline in the HTML

Okay, it’s not technically an HTML tag but I like to think of it that way.

Technically it’s an SVG document that lives inside the HTML document. A document inside a document. Very inception-ish.

<svg viewBox=“0 0 20 20”>
    <rect x=“0” y=“0” width=“20” height=“20” />
    <!— your svg shapes would go here —>
</svg>

SVG is it’s own markup language just like HTML. It has angle brackets, tags, attributes and can be styled/interacted with via CSS and Javascript.

This is easily the most powerful and interactive way to use SVG and my personal favorite. Others prefer it as well

Are these the only ways to use SVG?

No. However, those three are the most convenient and most commonly used. You can also link to SVG through object, embed, and iframe elements. I think you’ll be happiest though using one of the first three options I note here.

Learn to Effortlessly Create Anything in CSS

Get access to my free courses, best articles, and tips once a week.

I won't send you spam, promise. If it ever feels that way you can unsubscribe at any time.

Sign Up For Free

×

Sign In

×