Happy people

What is SVG?

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.


Advantages of SVG


• 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 Shapes


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:

Rectangle
Circle
Ellipse
Line
Polyline
Polygon

Path

Text
SVG is sleek

Arcs
Quadratic Bezier Curves

Cubic Bezier Curves

We will go through each of these shapes in detail in subsequant sections.



SVG Filters


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.

feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting

feDisplacementMap

feFlood

feGaussianBlur

feImage

feMerge

feMorphology
Morphed!!!

feOffset

feSpecularLighting

feTile

feTurbulence

feDistantLight

fePointLight

feSpotLight