Scalable Vector Graphics, generally referred to as SVG images, are typically produced in drawing programs such as Inkscape. But because they're defined in XML files, and so can also be created and edited in a text editor, they have a number of advantages over other image formats: they can be searched, indexed, and scripted, and yet, like other formats, can be compressed.

SVG images can be displayed via the <img>, <embed>, and <object> elements. The <embed> tag, which allows for scripting, is deprecated in HTML4 and XHTML but allowed in HTML5, while <object> does not allow for scripting and is supported in all versions of HTML.

Shown below is an image created as a file (my_image.svg) and displayed via the <img> element. This approach greatly limits the degree of interactivity a viewer can have with it.

You can avoid this confusion about language version support and these limitations on interactivity by writing images directly to the page using SVG markup placed within the document's body. (Internet Explorer 8 does not support SVG code and requires a plug-in for viewing.) Any text it contains can be searched and indexed, and all or any part of it can be manipulated via script.

Shown below is the same image written directly to the page. Try selecting the "SVG" text in both — you'll find that only the second one allows it.

Notice that the image has been reduced in size without the jagged edges or blurriness often associated with resizing images created in other pixel-based formats. SVG images have this scalability because they're vector-based, defined mathematically by relationships between points and the paths connecting them. For this reason, the SVG format is generally not suitable for photographs that typically do not contain well-defined shapes and curves.

Scalability is particularly important for users accessing pages on devices with small or large screens.