SVG Advantages

In term of serving graphics on websites, SVG offers a few advantages over Bitmap, some of which include:

Resolution Independent

Bitmap/raster graphic is resolution dependent – it is built upon pixels. Graphics served will looked pixelated when it is resized at a certain zoom level. That doesn’t happen to vector graphic, which is resolution independent in nature, as the graphic is expressed with a mathematical equation which makes it scalable at any zoom level while maintaining quality, even at Retina Display.

Reducing HTTP Request

SVG can be embedded directly into an HTML document with svg tag, so the browser does not need to do a request to serve the graphic. This also results in better load performance for the website.

Styling and Scripting

Embedding directly with svg tag will also allow us to style the graphic easily through CSS. We can change object properties such as background color, opacity, borders, etc the same way we do with regular HTML tag. Similarly, we can also manipulate the graphic via JavaScript.

Can be animated and Edited

SVG object can be animated when it uses the animation element or through JavaScript Library like jQuery. The SVG object can also be edited with any text code editor or a graphic software like Inkscape (which is free) or Adobe Illustrator.

Smaller File Size

SVG has a smaller file size compared to Bitmap, that has a similar graphic presentation.

Drawing Basic Shapes with SVG

According to the spec, we can draw some basic shapes like the rectangle, circle, line, ellipse, polyline and polygon with SVG and in order for the browser to render the SVG graphic, all those graphic elements need to be inserted within the <svg> ... </svg> tag. Let’s see the examples below for more details:

Line

To draw a line in SVG we can use the <line> element. This element is used to draw a single straight line, so it will only consist of two points, start and end.

As you can see above, the line start point coordinate is expressed with the first two attributes x1 and x2, while the line’s end point coordinate is expressed with y1 and y2.

There are also two other attributes, the stroke and stroke-width which are used to define the border’s color and border’s width, respectively. Alternatively, we can also define these attributes within an inline style, like so:

The first two attributes, cx and cy are defining the circle’s center coordinate. In the above example, we have set 102 both for the x and y coordinate, if these attributes are not specified, 0 will be taken as the default value.

Using Vector Graphic Editor

As you can see, drawing simple objects with SVG in HTML is quite easy. However, when the object gets more complex, that practice is no longer ideal and will give you a headache.

Fortunately, as we’ve mentioned above, we can use a vector graphic editor like Adobe Illustrator or Inkscape to do the job. If you are familiar with these software, it is surely a lot easier to draw objects with their GUI rather than to code the graphic yourself in HTML tag.

If you are working with Inkscape, you can save your vector graphic as plain SVG, and then open it in text code editor. Now, you should find the SVG codes in the file. Copy all the codes and paste them inside your HTML document.

Or, you can also embed the .svg file through one of these elements; embed, iframe and object, for instance;