Introduction

In this tutorial, We will use HTML to Create SVG Images and icons that has been recently introduced in HTML5. SVG stands for Scalable Vector Graphics which is a way for the browser to use xml data to plot and define graphics on the web. Why use SVG instead of jpg or png? The main benefit of using SVG is for its ability to scale to any size without losing clarity or rasterizing. SVGs can also help reduce HTTP request for fetching images. The only downside is that SVG is not supported in older versions of browsers and is still in the testing phase so it may be best to wait a little bit before relying solely on SVG. We will learn how to create five SVG icons to get familiar with how to implement them into HTML.

SVG HTML Icon

Square SVG

The easiest SVG to create is the Rectangle/Square. The Rectangle has its own HTML tag and only needs to designate the X & Y position and the Width & Height. Like all HTML elements, they can be styled by using the style inline styling attribute. Here is the example.

Notice that we have two Widths and Heights. The inline SVG width and height designates the canvas size. The second width and height inside the tag designates the height of the SVG object inside of the canvas.

Circle SVG

The circle SVG is another standard preset with it’s own HTML tag. It is setup very similar to the rectangle except you must designate a radius which will determine the size of the SVG object.

To demonstrate the flexibility of SVGs, we created two circles and lowered their opacity. By moving the position of each SVG, we can overlap the two circles and get an overlay effect that allows us to see the circle’s intersection.

Polyline SVG

The Polyline also has it’s own HTML tag and is a shape that displays straight lines and is perfect for creating line graphs.

Much like plotting points on a graph, the polyline uses the points attribute to plot and connect points on an X & Y Plane.

Grouped SVG

Now that we understand how SVG’s work, lets start to experiment further. What if we want more than just basic shapes? How about icons or intricate vector clipping? This can still be achieved by plotting points, but how do we know where the right plot points start and end? We could just guess the points but there is an easier way. By using Vector Plotting programs like Adobe Illustrator and Inkscape, we can draw our vector images in programs we are already comfortable with. You can also use Google’s online SVG edit application here to create your own images and retrieve the XML data.

In Illustrator, create your vector image and go to Save As, name your vector and under Save as type select SVG and click Save. Another window will pop up similar to the image below. Make sure the Type is SVG and click the SVG Code button on the bottom. A webpage will open up display the HTML code you will need to display the SVG on the web page. Go ahead and copy/paste only the code from <svg> to </svg>. The code provided below will display a refresh icon that has been grouped together using the <g> tag. This tag can help group certain SVG paths together and make it easier to target with a class.

Grouped SVG

The last SVG we will show is a the atoms network logo which consists of multiple shapes merged together to create quite a lot of plotted points. This will demonstrate how technical an organic shaped icon can be.

Wrapping it Up

Although SVGs are not widely accepted by all browsers yet, it is important to learn about this new and exciting technology. SVG is a great leap forward for HTML and will more than likely become a standard within a few short years. If you are a web design who loves crisp and clean design, we definitely recommend becoming proficient in implementing SVGs into your work flow.