While you can use any kind of format for your icons, such as GIF, which is a great idea for custom animated buttons, there’s a huge advantage of using SVG.
Differences between raster and vector graphics
SVG (Scalable Vector Graphics) is an image file that, on the contrary of a JPG (And other pixel-based images), can be scaled with no loss of quality. This is because it uses vector data instead of pixels.
SVG files are defined in an XML format, where they have attributes. These attributes are read by the browser, which interprets and visualizes them.
So, the advantages are clear - lightweight, scalable and flexible file format.
Common challenges and solutions
As SVG are code rather than pixels, the output is dependent on the browser to interpret the file properly, which can create some challenges.
Common challenges include:
SVG has a bigger size inside the enrichment editor, from the actual size in design program.
SVG is not visible in Firefox browser
There is a root source for both challenges mentioned above.
When an SVG misses width and height tags, Firefox fails to understand the size of the SVG and fails to load it, while browsers like Google Chrome add a width and height by default even if not defined. Which is the reason why the SVG might have a different size that what you would’ve expected.
How can you fix it?
Fixing this is quite easy. The SVG should have a defined size by having a width and height property.
If you’re using Adobe Illustrator, SVG files will be exported by default as responsive. This will result in no width and height tags.
On the Asset Export panel:
Navigate to the exporting settings.
Under SVG, unclick responsive.
Export the SVG file