SVG stands for Scalable Vector Graphics that was developed in collaboration with World Wide Web Consortium (W3C). This is an XML based vector image format for 2D graphics that are supported for interactivity and animation. SVG was earlier less used but with times thing are changing and now Animate SVG are used in high rate due to its flexibility n efficiency. It is user-friendly too.
Table of Contents
SVG can be animated in three ways.
Animate with CSS: SVG can be targeted and can be styled with CSS.
Animate with JavaScript: With JavaScript, one can have access to things like- request Animation Frame so one can animate just by way of rapidly changing property values
Animating with SMIL: There is a syntax that is built into the SVG.
Advantage of Scalable Vector Graphics (SVG)
Easy to create
Simple graphics can be created with XML and they are quite easy. Corel Draw, Adobe Illustrator etc. are user-friendly vector graphics editors are used forcreating SVG graphics.
Easy to edit
SVG is easy to edit as it represents a huge advantage over converted graphics. Changing basic attributes like the color and outlines can be done easily.
Smaller File Size
If one has a smaller file size then it becomes easy for transferring and loading the graphics on the web. Even if the huge imageis made it can be converted into a small image.
Ideal for details
As vectors use lines, it becomes easy to create very detailed graphics. They are quite clearer as comparer and easier to understand.
File size based on complexity
Vector images are quite small in size. In these graphics, the size is not based on size or color depth but on how intricate the lines are and how complicated the points are.
Few disadvantages
- Complex development- SVG code which is structured XML can become quite lengthy and complex and because of this, it may be difficult to troubleshoot errors.
- Performance issues- in case of overuse or complex animation, it may become slower as compared.
- Not fully supported by older browsers- Internet Explorer 8 and lower version may not work aptly. There are still some good workarounds for extending browser support like Rapheal.
Some practical uses of SVG
- Graphs – SVG’s strength is basic vector shapes as it works very well for creating graphs. It is great for creating static graphs from given numbers and it is also well suited for ‘live’ graphs.
- Road Map – as roadmaps are built of hard lines and exact shapes. These shapes are represented easily with vector graphics and can zoom into the map for further detail.
- Logos – Most logos are vector-based graphics. So no need to compromise with the quality even if it is resized.
- Simple Games – SVG could be a great alternative for simple games that require less character animation and more information display.