What is a svg icon?

SVG icons are a great way to display your content in an attractive way. There are many different ways to use them on the web, but here I’ll go over what they are and how you can add them to your website!

What is SVG used for?

SVG is a vector image format that helps developers create high-quality graphics. SVG images can be scaled to any size without losing quality; they’re also easy to edit, which makes them extremely versatile.
Because of these qualities, SVG has become the go-to format for icons, logos, illustrations and animations—in fact, it’s been used on the web since 1999! In addition to being universally accessible across browsers as well as mobile devices (including Android), SVG files are often smaller than PNGs or JPEGs because they require less data to process.

Why do we use SVG icons?

• SVG is a vector graphic file format. It’s like an image that can scale to any size without losing image quality.
• SVG uses scalable, XML-based coding to store shape and animation data in one file. So we don’t need multiple images for different resolutions or device sizes!
• Since the code is scalable, you can edit it in any text editor and change its size or color at any time without affecting the quality of your design work.
• You can also animate SVGs using CSS property animations instead of creating separate Flash files — this will save precious time during web development!

How use SVG icons?

SVG can be used in almost any application. SVG icons are supported by modern browsers, alerting users that the images are vector graphics and can therefore be scaled to any size without losing quality.
SVG icons can be used on all devices, from mobile phones to desktop computers, from televisions to tablets and smart watches. SVG icons look good at every screen resolution: low-density screens (like those of classic smartphones) as well as high-density screens (such as retina displays), including very small screens such as those of smartwatches.
The use of SVG allows you to create your own custom fonts; if you have a font with good kerning / spacing between letters and numbers (i.e., not Comic Sans MS), it will look great in an SVG icon!

Should I use SVG or icon?

The main advantage of SVG is that it is resolution independent. This means that the image won’t lose quality when you scale it up or down, which makes it a great choice for logos, icons and illustrations.
SVG is supported by all major browsers and offers many advantages over icon fonts:

• You can easily change the color of an SVG using CSS (using fill and stroke properties), whereas this isn’t possible with icon fonts.
• SVGs can be animated, which is another reason why they are useful for logos.

Conclusion

SVG icons are more flexible and can be scaled up or down without losing quality. Also, they can be used with any font and color you like. This makes them a great choice if you are looking for universal accessibility on your website or application. However, if you have less complex needs or want to save time when creating new icons, then icon fonts might be better suited for you!