Using SVG icons In replace of Tradition PNG format

Shubham Pachauri | 29th December 2017

Although using SVG icons is not a new technology but Still, It is not popular among designers and developer. But we should use it as our primary option. let discuss some best feature of SVG format and why should we use it:

svg icons

  1. SVG is crisped in nature:

     SVG utilizes a facilitate plotting framework to plot indicates and associate them draw lines, shapes or ways. Vector designs are drawn utilizing arithmetic, which means they’re sharp and fresh, not pixelating like other picture positions, making them incredible for logos, symbols, and illustrations.SVG has various different highlights, as well – with channels, examples, angles and concealing and the ‘viewBox’ property for surrounding the scene – and they’re all can be energized. SVG is to a great degree flexible and bolstered by all programs going the distance back to IE9.

  1. Accessibility:

    SVG has labels fabricated particularly for availability, the fundamental one being the ‘<title>’ tag. The title follows alongside the ‘<desc>’ tag ought to be utilized to give fallback substance to screen perusers. The substance of these labels won’t be shown by the program however they will be presented to the programs availability API. You can (and should) likewise utilize the right  ARIA properties where pertinent, for instance, in case you’re concealing an SVG component.

  1. It can be animated Easily:

    Components inside SVG can be enlivened to make some really astonishing intuitive encounters or the activity can be utilized to add decent little touches to an interface, picture or symbol. Liveliness can be made utilizing CSS, the Web Animations API in Javascript or utilizing the SVG ‘<animate>’ tag. SVG activity is at an intriguing point being developed. Google expostulate SMIL – SVG invigorate tag – in Chrome 45 for CSS liveliness and the Web Animations API yet has since suspended the belittling.

  1. It’s interactive:

    Using Javascript we can interact with elements inside of SVG, thanks to the navigable DOM. This allows us to create interactive elements using SVG the same way we would with HTML and CSS.

We can also apply animations through Javascript using the new Web Animations API allowing both simple and complex interactions and animations to be programmed. There’s also a number of Javascript libraries we can use, which have been created to speed up SVG workflows.

About Author


Shubham Pachauri

No Comments Yet.

Leave a Comment

Name is required

Comment is required

© Copyright 2015-2024 Oodles Studio. All Rights Reserved.

Request For Proposal

Recaptcha is required.