SVG on the Web

What is SVG

SVG is an image format, based on xml. It looks like this:

SVG stands for Scalable Vector Graphic. SVG is a vector format as opposed to PNG, which is a raster format. This gives us a lot of power.

Let’s take a look at why it’s so powerful in a second, but first, you may notice it looks similar to HTML. This is because HTML is also based on XML. Because of this shared origin, SVG is able to be used in much the same way as any other element on a webpage.

Differences

There are some major differences between SVG, and other web image formats out there. Almost every image out there is a raster image.

Here is an example.

PNG

Raster…

SVG

Here is the same example with an SVG.

Vector…

I think we can see from this how vector formats are useful on the web, for logos and such on a multitude of devices.

How you can use it

First off, according to caniuse.com, SVG is supported by all modern browsers, so we won’t have to worry about complex fallbacks, etc… You can just start working with them!

If we want to include a cool SVG on a website, there are two main ways.

Image Tag | <img />

You can use it just like any other web-supported image with the img tag.

<img src="rectangle.svg" />

Here are two examples were we link to a local file within our project. It is a plain-text .svg file.

Inline | <svg></svg>

You can also write it inline, like so:

<svg viewBox="0 0 400 300">
  <rect stroke="#000000" stroke-width="4" fill="#D8D8D8" x="2" y="2" width="300" height="200">
  </rect>
</svg>

Here are two more, where we write the code in-line, among our HTML elements.

With either method, we get a basic image on the page:

A very boring rectangle.

Beyond the image

Well, I’m sorry to say it, but most images are boring. We can only do so much so let’s go into the interesting parts of SVG, focusing on the in-line code.

Since SVG is like HTML, we can target it with CSS selectors. Nice! Now, we can do almost anything you can with other elements in HTML.

Note: You can only select SVG nodes when it’s inline.

How can we do that?

Well, I’m glad you asked. Here is an example. We can include an SVG Star in an img tag.

Super Boring Star…

So, with this, you can’t do much, but say we put a similar star in-line in our code, and we write some simple :hover effects for it.

#star:hover {
  stroke-width: 10px;
  stroke: #F00;
  fill: #00F;
}

We can get something like this:

Super Exciting Star!

This is not something we could do with a raster image, or an SVG in an img tag.

Interactive SVG

Since these SVGs are part of our webpage, they’re also part of the DOM, which means JavaScript! I used DOM manipulation for enlarging this image…

SVG DOM Manipulation

Since we can use JS & CSS, a major use is…

Animation!

How can you animate them? Well, we have two major methods. It is common to make animations in both CSS3 and JS.

SVG Animation with CSS — Karel Eding

So, to represent these animations, I’m using GIFs. Why not use GIFs for everything, you say?? Well, scalability. Remember raster images?

GIF is a raster, and we pointed out the problems with that earlier. In comparison, you can infinitely scale these SVGs.

Also, because of this, and JS, we can do more in-depth interactivity and animations, depending on screen-size and other user data.

This is a fun example of interactions in SVG.

Cool Interactions

Responsive Logos are cool. This site shows big company, and scales out complexity on mobile size screens. It doesn’t do in-line SVG, but it still a cool demo.

I hope you’ve seen some good things, and are intrigued enough to learn more.