Hello everyone. On DEV, I’d like to write down the feedback received from a senior developer during a code review of React. This post marks the memorable first edition.
In actual development environments, the use of SVG is recommended over PNG.
When developing website as my portfolio, I often used png as image files. However, my mentor told me to avoid using png file and recommend me to use svg. According to her, when zooming up, the quality of PNG image deteriorates. On the her office, SVG is more recommended over PNG. The feedback prompted me to conduct research on SVG and PNG.
Pros and Cons of SVG
Pros
It’s possible to resize images without losing quality or pixelation.
The file size is kept to a minimum and optimized
There are optimization tools available to make handling easier, and by utilizing these, it’s possible to further increase the loading speed of the website.
SVG supports animation unlike PNG
Cons
Old browser might not support SVG.
Creating and editing requires special programs, makes the difficulty of the task.
There is a risk of overuse many SVG images, which could burden on the device.
While SVG has its pros and cons but in many case, it’s preferable to use SVG over PNG. In particular, SVG should be used for decorative images, logos, icons, graphs, diagrams, and other simple images on websites.
