SVG code/elements can be generated and manipulated on the server (using any language) or browser (using CSS and JavaScript).the image can scale to any size without losing quality.SVG backgrounds are transparent by default.the SVG above uses fewer than 150 bytes, which is considerably smaller than an equivalent PNG or JPG.These are the benefits of vectors over bitmaps: In this example, an 800 × 600 area starting at position 0,0 has a yellow circle with a red border and a 250 unit radius drawn in the center: Points, lines, curves, paths, ellipses, rectangles, text, etc. Compression is applied to reduce the file size: PNG and GIF use ZIP-like lossless compression, while JPG is lossy and removes less noticeable details (WebP can use either method).īitmaps are ideal for photographs and more complex images, but definition is lost as images are enlarged.

Each pixel requires four bytes for red, green, blue and transparency, so the resulting file is 40,000 bytes (plus a little more for metadata). A 100 × 100 PNG image requires 10,000 pixels. Bitmap image formats such as WebP, PNG, JPG, and GIF define the color of individual pixels.

Svg file size reducer