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 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.
-
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.
-
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.
-
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.
