What is SVG and Why use it?

Scalable Vector Graphics or SVG is an image format which allows you to draw two-dimensional vector graphics to be used on websites. The graphics are defined in XML format. The scalable aspect lets you resize and zoom without compromising image quality. SVG images can be static or animated. SVG is a W3C standard so it integrates well with other W3C standards like DOM and XSL.

Why use SVG over other image formats?

There are several advantages to using SVG over other image formats like GIF or JPEG. The first advantage is that resizing and scaling an image does not affect it’s quality. This is because an SVG image is drawn as vectors on a coordinate system. When it is scaled, the image is just redrawn and there are no pixilation adjustments necessary like with raster images. This makes for great retina displays on normal setting and when zoomed in. SVG is also an open standard making it easily accessible to everyone. All browsers (except IE8) have SVG support. An SVG image can be searched, compressed and indexed.

SVG Elements and Attributes

The following elements and attributes are the most basic building blocks of an SVG image.

Shapes

• Rectangle – The rect element has six attributes (x, y, w, h, rx, ry).  X and y coordinates of the upper left-hand corner, width, height, and the x corner radius and y corner radius of the rectangle.
• Circle – The circle element has three attributes (x, y, r). The x and y coordinates of the center of the circle and the radius.
• Line – Has only two attributes (x1y1,  x2y2). The x and y coordinates of the starting point, and ending point of the line.
• Polygon – A polygon is created by listing multiple x and y points. A path is drawn from the last point to the next point.
• Fill/Stroke –  These attributes allow you to color in an image by setting an rgb value or simply writing the color name such as ‘blue’.
• Path – With the path element you can draw all the shapes in the shapes element as well as bezier curves, quadratic curves, semicircles and any other shapes.
• Text – This element allows you to include text in your image. X and y coordinates are assigned to position the text.

Let’s make a SVG pizza!

SVG image code can be written and edited in any text editor. If you don’t want to write code from scratch there are numerous SVG based drawing software such as Inkscape, Adobe Illustrator, and CorelDraw X6 which allow you to create vector graphics without coding. Inkscape is a great open source option. The code below provides a simple example of creating a pizza image using circle and line elements.  

<svg width="1000" height="1000">

<circle cx="100" cy="100" r="60" stroke="brown" stroke-width="9" fill="yellow"/>

<circle cx="78" cy="90" r="10" fill="red"/>

<circle cx="125" cy="125" r="10" fill="red"/>

<circle cx="140" cy="102" r="10" fill="red"/>

<circle cx="60" cy="120" r="10" fill="red"/>

<circle cx="100" cy="60" r="10" fill="red"/>

<circle cx="120" cy="80" r="10" fill="red"/>

<circle cx="95" cy="140" r="10" fill="red"/>

<line x1="60" y1="61" x2="140" y2="140" style="stroke-width:2;stroke:rgb(0,0,0)"/>

<line x1="58" y1="140" x2="140" y2="60" style="stroke-width:2;stroke:rgb(0,0,0)"/>

<line x1="43" y1="100" x2="158" y2="100" style="stroke-width:2;stroke:rgb(0,0,0)"/>

<line x1="100" y1="44" x2="100" y2="157" style="stroke-width:2;stroke:rgb(0,0,0)"/>

</svg>

 

The above code produces this pepperoni pizza. Put the code into the SVG editor and make your own version!

The first line of the code block sets out the area of the drawing. In this case it is 1000 by 1000. The next line creates the pizza by defining a circle of radius 60. The crust is created by setting a stroke of width 9. A fill is assigned to both the stroke and the circle. The next 7 lines of code create the pepperonis. These are all circles of radius 10, positioned at different coordinates. Lastly four lines are created by setting the (x, y) starting point and ending point of each line. A stroke width is set for the line and the color is assigned using rgb values.