SVG (Scalable Vector Graphics) is a vector graphic file format based on XML. SVG can be used for static graphics and animations. SVGs are popularly used instead of JPEG, GIF, and PNG images for icons, logos, cartoons, and other graphics.
Technical SVG Facts:
- Scalability: SVGs are (in theory) infinitely scalable. You can make them as big or as small as you want, without compromising quality.
- File size: SVGs, are on average much smaller than GIF, JPEG, PNG, even at high resolutions.
- Animations: just like GIFs, SVG support animations, but with much more flexibility and incomparably higher quality.
- Codable: SVGs can be manipulated directly with HTML, CSS, and JavaScript.
- Graphics only: SVG is a vector-graphic format. Unlike PNG, JPEG, and GIF, they cannot be used for photography.
The biggest SVG takeaway:
If your current graphics (not pictures ) are JPG, PNG, or GIF then you should replace it with SVG. You get smaller file sizes and higher quality.
Using SVG in place of most other formats will massively reduce the overall page load on your website, and therefore the user experience. It will reduce your server/file hosting bill as well.
What’s not to like?
