via deliciousbrains.com => original post link
SVG images have advantages that should make them an essential part of any developer’s toolkit. While they share a few similarities with JPG, PNG, and WebP image types, SVGs have very different DNA. In this article, we’ll highlight the characteristics that help set them apart from other image types, such as scalability, small file sizes, and SEO-friendly metadata structure. We’ll also show you how to style your SVGs using CSS instead of a graphics program, and highlight why SVGs are effectively “future proof” thanks to indefinite scaling.
SVG images work very well when the image itself is relatively simple. They’re often used as logos, buttons, icons, and nav bars, roles for which they are ideally suited. They’re not ideal for images with a lot of detail, such as photographs. For those, it’s usually best to stick with PNG or WebP files.
Most image files–including PNG, WebP, JPG, and TIFF–are bitmap based. Also known as a raster image, this means they consist of a set amount of pixels. This doesn’t present any problem when scaling an image down, but the trouble quickly shows up if you try to increase the size. You’re presented with jagged lines, blurry artifacts, and a pixelated mess.