WHY SVG?

Introduction:

Scalable Vector Graphics, popularly known as SVG is an interactive way of showing shapes specified in XML (Extensible Markup Language). It is used to define vector-based graphics and the best part about SVGs is that they don’t lose quality if zoomed and look great on any screen-size. Because of being XML specified, SVG format images are scalable in nature and can be checked, indexed, scripted, abstracted and printed with high quality, having any resolution. It is an open standard developed by the World Wide Web Consortium since 1999 and is for 2-dimensional vector graphics. The SVG format images can be created and edited with any text editor, moreover with any drawing software.

Today’s graphic era is totally pixel based system. Less pixel, less quality of image and hence can ruin the whole look of image. So to avoid blurriness of images, SVGs are used instead. SVG format images basically grant three types of graphic objects: raster graphics, vector graphics and text. Graphical objects along with PNG and JPEG raster images can be grouped, styled and transformed into formerly rendered objects. Being in XML format, SVG format is easy to develop and hence an optimal match for machine graphs and diagrams.

Versions of SVG Format:

SVG specification has been upgraded to version 1.1, since 2001 whereas the SVG Mobile Recommendation introduced 2 uncomplicated profiles of SVG 1.1, SVG Basic and SVG Tiny. A revised version called SVG Tiny 1.2 was made known, which became an autonomous recommendation and the work is still in development on SVG 2 having several new features in addition to those of the SVG 1.1 and SVG Tiny 1.2.

In the past, SVG format images were not used as much because of the shortfall of support on older versions of Internet Explorer. Plugins were required in older versions of IE to back SVG. Konqueror, the web browser, was the first to support to SVG format  in February, 2004.

SVG as W3C Recommendation:

SVG 1.0 became a W3C recommendation on September 4^th, 2001 whereas SVG 1.1 became a W3C recommendation on January 14, 2003 and SVG 1.1 (second edition) became a W3C recommendation on August 16, 2011.

Features contributing to SVG:

• SVG format images can be progressive and interactive in nature and alterations can be performed on the elements by defining them in the Synchronised Multimedia Integration Language.
• For the styling purposes, SVG can be unified with Cascading Style-sheet where the properties of elements are controlled using CSS properties like height, width, color etc.
• SVG can also be mixed with HTML by using SVG in HTML or vice-versa.
• It includes complete Document Object Model and enhances Document Object Model 4.
• SVGs can be animated using any of the 5 SVG animation elements i.e. ‘animate’, ‘set’, ‘animate motion’, ‘animate color’, ‘animate transform’ and these elements animates different forms of the shapes.
• Time span can also be specified in SVG format by defining the time limits i.e. the start of animation and duration.
• Recurrence of animation in SVG format can be done using the attributes which will keep the same animation repeating for the number of times defined by the user.

Functionalities of SVG:

• Objects or text or group of these can be masked or clipped for showing particular parts.
• Gradients / Patterns can be used to fill shapes or as outlines as well as color can be filled or as outlines to the SVG elements via stroke or fill.
• Scripting can be used to access or manage the SVG elements.
• SVG images can be animated using the animation elements being provided.
• Filter effects can be applied to the elements of SVG format.
• It can also contain hyperlinks to some other documents by X-Links or URLs can be related to SVG files.
• Metadata can also be provided by the authors about SVG content.
• SVGs can be made interactive by making them open to some events like hover, mouse click etc.

How to create a SVG?

To create a SVG in Illustrator, save all the artwork and follow the steps:

• Go To File > Save as > SVG (For CS6). Checkout the video tutorial here.

For older versions of Illustrator, Export option is provided where you can save your artwork as SVG.

To create SVG in Photoshop, Photoshop CC (latest version) provides an option of “Extract Assets” which lets you create SVG by selecting the layer need to be converted. Click here to know how.

But the size of this SVG file will be higher in size than that of the Illustrator one. Hence, it is advisable to create SVGs in Illustrator as SVG format is not supported in all versions of Photoshop.

SVG format images can also be created online but the selection of converter makes it difficult to make one and the whole process can also include the tracing of image which is not always 100% perfect match to the real image.

Online SVG Converters:

https://convertio.co/png-svg/ – In this particular one, I found it hard to convert images in to SVG format, as the SVGs created where Black & White and the Quality was low in comparison to those of being created in illustrator.

https://www.mobilefish.com/services/image2svg/image2svg.php – In this online converter, the SVG created as the end result were a bit pixelated in nature.

http://picsvg.com/ – Conversion of Images to SVG format in this online converter was better in quality as no pixelation was there. Overall working results were good in quality.

https://vectormagic.com/ – The final product in the SVG format of this converter was good enough, both in quality and size as well as convenient to use.

Comparison between Image and SVG:

When we zoom in on a raster image whether PNG or JPEG, we can clearly see the pixels where on the other hand when we zoom in on a vector image i.e. SVG, we are able to see lines or curves used. This is because, in SVG format the sharpness is always held back irrespective of the size. SVG format images can be opened up with the text editor and can be edited without any issues. And hence, SVG format is preferable for logos and icons, for better sharpness and clearer view.

Advantages of SVG:

• SVG files are entirely XML, which is both readable to human and machine.
• SVG format images are expandable, flexible, adaptable (scalable) and can be searched, indexed, compressed and scripted and are comparatively lesser in size to the respective images.
• SVGs don’t lose quality when zoomed, hence are of zoom-able nature and can be printed with high quality at any resolution.

Disadvantages of SVG:

• SVG format is backed only in the latest browsers i.e IE 9-11.
• SVG file size also keeps on broadening when there is number of small elements in the file.
• It is almost impractical to scan a small part of the graphic object.
• Images like photographs cannot be done in SVG format.

After 2011, all the major and minor web browsers provided some level of support for SVGs and now are vastly being supported and used for better two-dimensional graphics with interactivity and animation. But still it is in its growing period and has a biggest competitor named “Flash” which is also a dynamic vector-based graphics. Flash is pre-installed on most of the operating systems and is accessible to the huge range of web users which makes it more popular among the users than SVG, which is still finding its way to the users. From the above, it is clear that Flash is in lead right now, but nothing remains permanent. Only future can tell which one wins or loses or may be some other joins the candidacy too.