Issues and Answers (I&A)

Vector (SVG1.1) images vs. Raster (PNG) images in HTML5

Issue Description

One of the basic "theoretical" advantages of SVG graphics on the web is being able to use one graphics file in multiple locations and multiple sizes on a web page as well as site wide with little or no loss of detail or image quality. In the example below the difference in file size between the vector and raster versions of the image is only 0.41% and the vector version is the larger of the two. Since native SVG support is limited to modern browsers and all fall short of full support of the standard the example below makes use of only the <img /> tag to display the images. If you cannot see the SVG version on your browser you probably need to upgrade to a newer version of it. The intrinsic size of the raster version of the image is 461 x 461 pixels:

SVG1.1 vs. PNG image files in HTML5

Pixel Dimensions	Vector	Raster
2 x 2
3 x 3
4 x 4
7 x 7
10 x 10
16 x 16
25 x 25
38 x 38
57 x 57
87 x 87
132 x 132
200 x 200
304 x 304
461 x 461
614 x 614
819 x 819
1092 x 1092
1456 x 1456
1942 x 1942
2590 x 2590
3453 x 3453