Scaler Vector Graphics

            SVG stands for Scalable Vector Graphics. SVG basically defines vector-based graphics in XML format. It is its feature that SVG graphics do not lose any quality if they are zoomed or resized. Every element and each attribute in SVG files can be animated. SVG is a W3C recommendation it integrates with other W3C standards such as the DOM and XSL.

Now a days, the main internet browsers support SVG:

Internet Explorer 9+

Firefox 4+

Safari 4+

Opera 9.5+

Chrome 4+

SVGs are declared using XML (eXtensible Markup Language), which uses tags like HTML.


Basic shapes: straight lines, circles, ellipses, polygons and rectangles with or without rounded corners.

Text: on straight or curved paths in any route or direction.

Painting: it fill ups and sketch out using solid colors, patterns, transparency, gradients, and markers line terminators such as arrow heads.

Color: Fill and stroke properties defined using standard 3 or 6-digit hex or rgb values.

Clipping, masking and compositing: it is using constituents to outline regions which can be painted.

Filters: effects applied to all elements within a container, e.g. blurring, color adjustments, lighting etc.

Linking: Hyperlinks to other documents.

Interactivity: joining event handlers using JavaScript.

Fonts: in an SVG file text glyphs is defined which can be used as a standard font.

Metadata: titles, subjects, creators, descriptions and other properties about the SVG image.


Vector graphics are scalable

The main advantage of vector graphics is the possibility to scale them to whatever size we wish without losing quality. This is major the reason why they are perfect for designing company logos and other designs that are most often resized. Every designer should give attention in assuring a high-quality scalability to their work.

Easy to create

Creating and designing simple graphics with XML is quite simple. But want if we want to craft more complex graphics? There are loads of user friendly vector graphics editors that could be used to create SVG graphics, like Adobe Illustrator, Macromedia Freehand, Corel Draw.

Easy to edit

SVG are easy to edit, which is a great benefit over rasterized graphics. If we want to make changes to our vector graphics, all we need is a text editor, or even easier, utilize a vector graphic editing tool.

Smaller file sizes

Having a smaller file size makes transferring and loading graphics much quicker on the web.


Complex development

SVG code which is structured XML, can be pretty lengthy and complex, hard to troubleshoot for errors.

Performance issues

In case of over-used and complex animations the WebKit engine could be noticeably slower.

Share this post

We are always here to help. If you have a query Send Now