Up until a couple of months ago I had no idea that there was even such a thing as an inline SVG. Once I found out I realized that I need to learn more about them. First off SVG stands for “Scalable Vector Graphics” which literally means just what it says. It’s simply an image format containing XML code that describes vector graphics which can be resized large or small without affecting quality.

Not all images are suitable as SVG however, just like raster and vector formats in image editing software, photos are still better suited as jpg, png, or gif format. Line art, a logo for example, would be better suited as SVG.

Once I started looking into them a little more I found that there are actually many different ways to use SVGs in a web page.

Using an SVG as a CSS background-image

This is very straight forward, you’ll just need to save your image as SVG (I’ll talk about this in detail in a later post) and then simply add it to your site as you would any other image. Once it’s added just add the CSS background property with the path to your .svg file as you would any other .jpg, .png, or .gif image.

The Code:

Demo:

 

Using background-size With an SVG Background

Using the CSS3 background-size property you can easily scale the SVG when using it as a background image.

The Code:

Demo:

Using an SVG as an inline image

This too is pretty straight forward, you just save your image as an SVG and then simply add it to your site as you would any other image. Once it’s added just add an <img> tag and in the src attribute include the path to your .svg file like any other .jpg, .png, or .gif image.

The Code:

Demo:

SVG as an inline image

Embedding an SVG using an iframe tag

SVGs can be embedded directly into web pages, one way to do this is to add it to the “src” attribute on an <iframe> tag.

The Code:

Demo:

Embedding an SVG using an object tag

Another method for embedding an SVG directly into a web page is to use an <object> tag.

The Code:

Demo:

Content for browsers that don’t support SVG

Embedding an SVG using an embed tag

Yet another method for embedding an SVG directly into a web page is to use an <embed> tag.

The Code:

Demo:

 

Using inline SVGs

All of the code for the SVG can actually just be added to your page markup without relying on any external sources.

The Code:

Demo:

 

SVG Pros

  • No need for separate versions for high density displays
  • No need for different responsive versions
  • Small file size, since they are XML, gzipping works really well to compress files on the server
  • Embedded versions can be manipulated/animated with CSS and JavaScript

SVG Cons

  • Not suitable for photos and images with lots of pixel information
  • Inline SVGs are difficult to cache
  • Inline SVGs may make code a little messy

Recommended Methods

The <object> Embedding Method

Overall, I would recommend using SVGs by embedding them with the <object> tag. This allows you to keep your SVG code, clean, separated, and organized. It also allows you to manipulate your SVG code with CSS and JavaScript.

The CSS Background Image Method

Sometimes the <object> embedding method will not be appropriate like when you need to apply your SVG as a background-image on a container. It is also perfectly acceptable to use them as CSS backgrounds, but just like using other image formats you will still want to pay attention to your http requests and consider using SVG sprites where appropriate. Also, the thing to remember when using SVG backgrounds is that you will not be able to manipulate and animate their paths and elements like you can using embedded methods.

Browser Support

ie9 and aboveChrome 29 and aboveFire Fox 24 and aboveOpera 17 and aboveSafari 5.1 and above

SVGs have good browser support working in all modern browsers. Not supported in Internet Explorer 8 and below.

Sources

Comments