Vector Images - SVG Format

Note: This demonstration does not work with outdated browsers: Internet Explorer 8 or lower.

The two circles below appear to be identical at first glance, but one takes 6.5 times longer to download:

circle

Additionally, the "lighter" image has infinte resolution (will appear to have sharp edges at any resolution), and the "heavier" image will pixelate (look blurry) if you increase the image size. Let's zoom in:

circle

The code to create a blue circle with a black border, using a vector is very simple (128 characters with spaces):

<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="125" cy="125" r="105" fill="#203080" stroke="#000" stroke-width="8">
</svg>

In contrast, the code required to create a .png bitmap image of the same object is complex and several times larger: 5,932 characters.

To create a 100 pixel by 100 pixel square, a vector image essentially tells the device (computer, smartphone):

"Make a square, 100 pixels high, and color everything inside blue"

A bitmap image tells the device:

We are going to have an image 100px high by 100px wide.
Color the first pixel blue.
Now move right one pixel, and color it blue.
Now move right one more pixel, and color it blue.
Now move right one more pixel, and color it blue.
Now move right one more pixel, and color it blue...

(96 times more)

Now start on the second row of pixels.
Color the first pixel blue.
Now move right one pixel, and color it blue.

(and 9,897 more coloring instructions!!!!!)

The vector image can always scale up and down perfectly, because it is a geometric shape. A circle or a triangle is still a circle or a triangle, no matter how large or small it gets.