SVG is better than JPG & PNG

Every image format serves it own purpose, but SVG is so awesome for graphic, you could no longer ignore.

Web has been a long time flooded with bitmap image format. JPG is an image compression format created by consortium called Joint Photographic Experts Group and used its initial to create image compression format that refer to its name purposefully for photo image initially for digital camera format.

PNG derives from Portable Network Graphic, an image format that specifically used for graphic image. PNG is support transparent background while JPG/JPEG does not because of its initial purpose to serve photo image that never had transparent background. Graphic on the other hand in some cases need transparent background and PNG serve that purpose well. Also for the color space PNG support CMYK color space while JPG/JPEG does not because again it serve for photographic image that use RGB for it standard color space.

As for SVG, term derives from Scalable Vector Graphics (SVG), which is an Extensible Markup Language (XML)-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999. All major modern web browsers—including Mozilla Firefox, Internet Explorer, Google Chrome, Opera, Safari, and Microsoft Edge—have SVG rendering support.

The development of web and the needs to transfer data faster has been remarkably demanded. So then SVG was born. The image format specifically used for graphic image utilized vector image format that proven to be small in data size. This gives a lot of advantages especially in the web ecosystem where data transfer is “expensive” and need to be done as fast as it can.

In the cases of graphic and non-photographic image especially, using SVG specifically for graphic type, as the name suggests, has been proven useful. The size is small, the page load become faster and can be inlined using its own xml type script that you can just placed it inside the html script itself. This also work well for logo.

Choosing the right image format for specific design purpose proved useful as the way to optimize and quickly deliver the image to the users.