When working on the web, there are two types of image formats that you can use:
- Raster Graphics: They are made up of pixels. The more pixels you have the higher the resolution you get.
- Vector Graphics: They use mathematical equations to create a two dimensional image. The graphics data is described by mathematical formula.
Vector graphics can be drawn by writing code to create them. Programs such as Inkscape and Illustrator also use them in their default formats.
Take for example the map of Africa shown above. It is a composite shape made up of individual paths that each represents a country. With this knowledge, we can apply a transformation to the individual countries to any size. Provided we do the transformations uniformly, we can size or resize the image without distortion.
The SVG Specification
Below is a basic skeleton of an SVG document. xlmns specifies the namespace for the document.
<svg xmlns="http://www.w3.org/2000/svg"> </svg>
To draw a circle, we specify the properties of the circle in the document. So our document becomes:
<svg xmlns="http://www.w3.org/2000/svg"> <circle cx="40" cy="40" r="30" stroke="#000" stroke-width="1" fill="#FFF" /> </svg>
Saving the above in a circle.svg document and viewing in a browser will draw the circle shown below:
Scalable Vector Graphics (SVG) do not lose their resolution regardless of how they are resized.
You can add hyperlinks and animation to SVG by styling and scripting. SVG has a navigable DOM which allows for the creation of interactive elements.
SVG is made up of XML text files. As a result, you can add keyword descriptions and links making content more recognisable for search engines.
Adding SVG to Your Web Pages
Using the Image Tag
An SVG document can be embedded in the image tag like a regular image in HTML. An example is shown below:
<img src="circle.svg" alt="A simple circle" width="100" height="100" />
The disadvantage of this method is that the SVG will not be interactive.
Using the Object Tag
This is the best option if you intend to make the SVG interactive. The code to do so is shown below:
<object type="image/svg+xml" data="circle.svg"></object>
Using inline SVG
In this method, the code to generate the svg is placed between the body tags of the web pages.
On the Can I Use website, most modern browsers have great support for SVG with the exception of Internet Explorer.
RaphaelJS is a vector graphics library which is used to draw objects in the browser. It enables SVG support for IE8 and below.
Oh yes, since it’s pure SVG, it works in almost any browser –
IE6+, Chrome, Firefox, Safari, Opera, Android, etc.
Snap.svg was developed by the creator of the RaphaelJS library. Unlike RaphaelJS which supports IE8 and below, Snap.svg was designed for modern browsers and therefore supports the newest SVG features like masking, clipping, patterns, full gradients, groups, and more.
In the world of front end web development, there are a plethora of tools that are used to create interactive web applications. This tools involve working with HTML5, CSS3, SVG and WebGL.
The main advantage of SVG is that it allows you create graphics without the loss of resolution when they are resized. This might not seem like much to you but in a world of responsive design, it represents a big opportunity.