SVG stands for Scalable Vector Graphics. SVG is used to draw graphics using a XML (Extensible Markup Language) based syntax.
SVG is useful in drawing images such as graphs, icons and other design diagrams. It may not be suitable for drawing and storing photos and videos. However, it is possible to embed bitmap images in an SVG image.
The word scalable in SVG means that SVG images can be scaled up or down in size without loss of quality. This is achieved by storing images as commands and numbers instead of pixels.
• SVG images can be created and edited with any text editor.
• It is possible to modify SVG images in the browser using JavaScript.
• SVG images are scalable.
• SVG images do not lose quality if they are zoomed in.
• SVG drawings can be interactive and can include animation.
• SVG is an open standard.
• SVG images are indexable and searchable.
SVG images are made up of multiple elements. Each element corresponds to a basic shape and shapes have various attributes
that can define their size and position.
SVG provides a number of basic shapes. These are as follows:
We will go through each of these shapes in detail in subsequant sections.
SVG has its own rich set of filter effects to manipulate pictures. Filter effects allow developers to apply one or more of these filters to an image.
Below is a quick snapshot of these filter effects. Click on the filter to read more about its usage and options.