The viewBox attribute represents the viewable area of the graphic. ViewBox - this is more complicated to get your head around, but simply represents the viewable area of the SVG canvas (what?! - all will be explained) 2. These can be used to scale the vector to fit certain dimensions. Width/height - self-explanatory, the total width and height of the SVG element.

On this element, we can add some basic parameters which help set up the SVG. SVG’s are similar to HTML elements, instead of defining DOM layout, they define paths and shapes.Įach defined set of instructions for our SVG sit inside tags. But, it should provide a good starting point for coding simple icons. It’s by no means a comprehensive introduction to SVG’s. The following article demonstrates how to create some simple SVG icons. SVG’s can seem daunting, especially if you see the exported code from a vector editor. A simple bit of SVG code can do the trick.

But, if you only need one or two it can feel like overkill.

And yes, there are great libraries such as Glypicons and Fontawesome to help out. As a developer, I often come up against situations where I need an icon.

User svg icon