.png)
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:
| 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 | | |