An introduction to SVG for web

In this article, I'm discussing something I'm quite a big advocate for, which is SVG. As a web designer, our bread and butter is HTML, CSS, and Javascript. I'd argue that SVG should be in that list too because it offers a graphics format native to the web, and has a lot of very useful functions we can use to build better websites.

These are the points I'll be going over:

  • What is SVG?
  • What are SVGs made of?
  • Embedding SVG in HTML
  • Styling SVG with CSS

I'm going to give you a quick intro on SVG, then we're going to chat about how we can embed SVG in our webpages, and how we can style them with CSS. Then we'll go over one way we can animate SVG elements, and I have some quick tutorials and a few cool examples to show you.

SVGs can be an incredibly useful addition to your front-end toolkit, and if you're reluctant to use them, I'm going to try and convince you that they're really useful and easy.

What is SVG?

Just a quick intro for those of you who aren't super familiar with SVG. Basically, it is an image file format, similar to JPEG or GIF. Specifically, though, it is a vector graphics format. Vector graphics are different from most image formats in that they aren't made up of pixel information. Instead, they are composed of mathematically defined paths, which are fantastic because they can scale to any size without losing resolution.

An_introduction_to_SVG_for_web_image_1

These types of images can be created in any respectable vector graphics editing program, like Adobe Illustrator, or Sketch. SVG files can be used just like any other image on the web, just like JPG, PNG, or GIF, by being linked in an HTML <img> tag. Like this:

 <img src="image.svg" alt="SVG Example" />

But this isn't where the super-powers of SVG lie. You really start to get a sense of the capabilities of SVG when you open an SVG file in a text-editor. I know, I just said they're an image format, but trust me on this one :)

If you open an SVG file in a text editor, you're going to find markup like this:

<svg viewbox="0 0 200 100"> <!-- Rectangle --> <rect x="75" y="10" width="60" height="45" fill="orange" /> <!-- Circle --> <circle cx="30" cy="55" r="30" fill="blue" /> <!-- Text --> <text x="100" y="85" font-size="20" fill="white"> SVG Text </text> </svg>

If you compare the mark-up to the rendered image, you may find it surprisingly simple to get a basic understanding of what's going on. For example, in the markup you can see a <circle> tag, and then in the image you can find a circle. That's because this mark-up is defining each 'element' in the image.

Those of us who can read HTML will find that reading an SVG file is very familiar. They're both made up of tags which define the structure of the document, and those tags then have attributes which provide us more information about the elements. So, for instance:

<rect x="70" y="10" width="20" height="10" fill="blue" />

This SVG tag defines a rectangle element, and we have attributes that tell us the x and y coordinates of the top corner, the width and height of the rectangle, and the fill colour.

An_introduction_to_SVG_for_web_image_2

What are SVGs made of?

Just like HTML, the tags which make up SVG are semantically named, and give you an indication of their utility. Some common SVG tags are:

<circle />
<ellipse />
<line />
<polygon />
<polyline />
<rect />
<path />
<text />

Each element has its own attribute syntax, which can range from very simple for basic shapes (eg. x/y coordinates, width/height sizes) to complex for more intricate shapes (eg. bezier curves).

Emedding SVG in HTML

Now for the fun part: so, I mentioned that you can link an SVG file in an HTML <img> tag, but the real way to get the most out of SVG on your website is by embedding it directly into your HTML.

What do I mean by this? Well the markup for an SVG file can be placed into an HTML document, just like a normal HTML element, and then that SVG image will render on the page. Like this:

<body> <!-- HTML --> <div>Your SVG can sit in your HTML!</div> <!-- SVG --> <svg viewbox="0 0 200 100" width="200" height="100"> <!-- Rectangle --> <rect x="75" y="10" width="60" height="45" fill="orange" /> <!-- Circle --> <circle cx="30" cy="55" r="30" fill="blue" /> <!-- Text --> <text x="100" y="85" font-size="20" fill="white">SVG Text</text> </svg> </body>

If you're writing your SVG directly into your HTML page, it's quite simple to get started.

You just create an <svg> tag, and give it a viewbox attribute.

The viewbox attribute defines a grid, upon which we will then be able to align our various elements and shapes. The attribute takes four number values, each separated by a space. The first 2 values are an offset which typically aren't needed, so I'd suggest setting them to 0 for starters. The other 2 values are just the x and y values for the grid, so for example, setting them to 10 10would give you a 10 by 10 grid to work with.

This all comes together to look something like this:

<svg viewBox="0 0 10 10"> <!-- Elements would love to go here --> </svg>

And that gives us a grid like this:

An_introduction_to_SVG_for_web_image_3

And then we can place tags inside to create our graphic. For example,

<svg viewbox="0 0 10 10"> <rect x="1" y="1" width="2" height="2" fill="yellow" /> <circle cx="7.5" cy="4.5" r="1.5" fill="purple" /> <polyline points="1,6 4,5" /> <text x="2" y="8" fontSize="1">SVG Text</text> </svg>

You can see each element has attributes which align it to the viewbox in some way, usually by plotting the shape to an x/y coordinate and then giving it sizing values. This renders to be something a little like this:

An_introduction_to_SVG_for_web_image_4

At this point, hopefully you can see just how easy it is to 'draw' SVG images with markup. Most of the time, however, you're probably going to want to use a program to create your graphic, and export it to use in your web page. I'd recommend looking at SVG optimisation tools like SVGO, which can help you to simplify and improve the readability of the markup.

Styling SVG with CSS

The huge benefit of embedding SVG inline in your HTML is that the elements/shapes in that graphic are then available to use in the DOM, just like regular HTML elements. This means we can target them with CSS and Javascript, opening up a world of opportunities to us!

An_introduction_to_SVG_for_web_image_5

For example, we can change the presentational style of shapes by applying CSS to them. We can even add classes and IDs to elements, like this:

<svg viewBox="0 0 200 200"> <!-- Star --> <path class="star" d="..."/> </svg>

And then we can target that element with CSS to apply some styles to it:

svg .star { fill: purple; stroke: #000; stroke-width: 5px; stroke-linecap: round; }

We then apply these styles to our element. You'll notice that SVG has some unique styling properties, for example with fill taking the place of background. In this case, we've changed the fill to purple, and set a black stroke around the shape. When applied, our shape then looks like this:

An_introduction_to_SVG_for_web_image_6

What we can do with SVG and CSS isn't limited to basic colour changes, we can also apply animation, transition, and transform properties, giving us quite a powerful tool for manipulating the graphics within the browser. Add Javascript to the mix, and you've got a powerful tool for creating programmatic solutions for graphics, animation, and design.

SVGs are fantastic

There's a really large laundry list of reasons why you should use SVG, at the very least they are:

  • Scalable - Ideal for the responsive web because they are resolution independent by nature.
  • Great browser support - Embedding SVG is supported all the way back to IE9!
  • Accessible - By adding <title> tags, graphics can be accessible to screen readers and assistive technologies.
  • Small size - Tend to be a much smaller alternative to raster images.

When you combine that with their potential as a complement to HTML + CSS, there's really a lot of reasons for you to start using them in your web projects.

I hope this article has been helpful. Now over to you to share and comment what you think about SVGs, how you work with them, and special advice.

Need help with your website or web development? Talk to us about your ideas. Internetrix combines digital consulting with winning website design, smart website development and strong digital analytics and digital marketing skills to drive revenue or cut costs for our clients. We deliver web-based consulting, development and performance projects to customers across the Asia Pacific ranging from small business sole traders to ASX listed businesses and all levels of Australian government.

Add Your Comment

No one has commented on this page yet.