SVG as a Modern Web Graphics Design

Table of Contents

In this article, i covered following points of SVG:

  • # What is SVG?
  • # Why use SVG? – Pros and Cons
  • # How to make SVG? – Tools
  • # Basic shapes of SVG
  • # How to use SVG on the web?
  • # Exporting SVG for web
  • # Browser Support
  • # More resources about SVG

What is SVG?

SVG stands for Scalable Vector Graphics which can describe in:

S – We can zoom or resize image at any size without losing quality.
V – It is not pixel based, means all shaped are defined by geometry instead of dots (.).
G – Obviously, it is graphic.

Before we dive into SVG, at least we should know what is SVG?

The SVG specification is an open standard developed by the WWW Consortium (W3C) since 1999. It is the XML based language that defines 2D (two-dimensional) vector graphics.

Why use SVG?

SVG is a vector graphics so it is truly scalable. Depending on how you implement SVG, it offers more control than with an image. We can target each element separately via CSS because SVG is in xml format.

vector-vs-raster

Pros
  • SVG graphics are vector graphics, so they can be resized without losing quality.
  • SVG file might also be smaller in size than raster (.jpeg, .gif, .png) graphics.
  • Size is small so obviously web page load is faster.
  • SVG is a W3C recommendation.
  • SVG defines graphics in XML format.
Cons
  • Older browsers are not able to render SVG.

How to Make SVG?

Let’s have a look at some tools to work with SVG.

  1. W3C Amaya – An open source editor/browser
  2. InkScape – An open source graphics drawing tool with advanced features, using SVG as a native format
  3. SVG-edit – A simple browser based SVG drawing tool
  4. Adobe Illustrator – A Professional commercial vector graphics drawing tool
  5. CorelDRAW – A Professional commercial vector graphics drawing tool

Basic Shapes of SVG

SVG has some built in shape elements that are as under:

  1. Rectangle
  2. Circle
  3. Ellipse
  4. Line
  5. Polyline
  6. Polygon
  7. Path

The element is used to create a rectangle. There are six basic attributes that control the position and shape of the rectangle.


Preview
Attributes
  • x – The x position of top left corner.
  • y – The y position of top left corner.
  • rx – The x radius of corner.
  • ry – The y radius of corner.
  • width – The width of the rectangle.
  • Height – The height of the rectangle.

The element is used to draw circle on the screen. There are three attributes that define the position and radius of circle.


Preview
Attributes
  • x – The x position of the center of the circle.
  • y – The y position of the center of the circle.
  • r – Defines the radius of the circle.

The element is similar to element, but here we can specify x and y radius separately. Let’s see the following example.


Preview
Attributes
  • cx – The x position of the center of the ellipse.
  • cy – The y position of the center of the ellipse.
  • rx – The x radius of the ellipse.
  • ry – The y radius of the ellipse.

It is line, just straight line. It takes four attributes to draw a line which determine start and end point of the line.


Preview
Attributes
  • x1 – Starting x position of the line.
  • y1 – Starting y position of the line.
  • x2 – Ending x position of the line.
  • y2 – Ending y position of the line.

Polylines are group of connected straight lines. All points are included in single attribute that why list can get quit long.


Preview
Attrributes
  • points – It accepts multiple values which is called points. Each of them have a two value x and y.

Polygon is similar to , it accepts list of points and these points make up a polygon. All coordinate values are in the user coordinate system.


Preview
Attributes
  • points – It accepts multiple values which is called points. Each of them have a two value x and y. For example, points=“0 0, 1 1, 2 2” then closing path would be drawn from (2 2) to (0 0).

Path is the most important shape of SVG. With the help of element, we can draw any shapes including curve, rounded rectangle etc. Also we can create Bézier curves, quadratic curves, rectangular shapes etc.


Preview
Attributes
  • d – A list of points and other commands about how to draw a path. There are following commands available for path:
    • M – moveto
    • L – lineto
    • H – horizontal lineto
    • V – vertical lineto
    • C – curveto
    • S – smooth curveto
    • Q – quadratic Bézier curveto
    • T – smooth quadratic Bézier curveto
    • A – elliptical arc
    • Z – close path

Actually, we don’t need to remember everything in path element because we don’t create SVG vectors manually (most of time).

Note: All above commands can be expressed in upper case or lower case where upper case means absolute position and lower case means relative position.

How to use SVG on the Web?

Here we get to the fun bit. There are a number of ways you can implement SVG on a web. So let’s start.

Using HTML

I can't fly
Using CSS

header {
     height: 150px;
     width: 150px;
     background-image: url('butterfly.svg');
}
PHP Emebed

Inline SVG


     

Inline SVG fallback


  
    ...
  



Using Object

      
Iframe embed

 

Exporting SVG for Web

First of all, draw something in Adobe Illustrator. Here I’ve drawn simple butterfly.

butterfly
When you are done, save it as SVG.


save-as-svg
When you save, it will prompt for SVG options, examine the SVG options dialog box. SVG 1.1 (it is second edition) is the best export for web.

svg-options

Now open your .SVG file and use this code in your HTML document. When we directly insert SVG markup into HTML document, it becomes inline SVG.


Preview

Browser Support

Note: SVG is not supported in IE8 and its older versions. More about SVG browser support at Can I use?

More Resources

One thought on “SVG as a Modern Web Graphics Design

Leave a Reply

Your email address will not be published. Required fields are marked *