In this tutorial, we will take an introductory path to create SVG icons using HTML and using them within our design. 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 icons 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.


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.

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.