SVG: Scalable Vector Graphics

Scalable Vector Graphics (SVG) are an XML-based markup language for describing two-dimensional based vector graphics.

As such, it's a text-based, open Web standard for describing images that can be rendered cleanly at any size and are designed specifically to work well with other web standards including CSS, DOM, JavaScript, and SMIL. SVG is, essentially, to graphics what HTML is to text.

SVG images and their related behaviors are defined in XML text files, which means they can be searched, indexed, scripted, and compressed. Additionally, this means they can be created and edited with any text editor or with drawing software.

Compared to classic bitmapped image formats such as JPEG or PNG, SVG-format vector images can be rendered at any size without loss of quality and can be easily localized by updating the text within them, without the need of a graphical editor to do so. With proper libraries, SVG files can even be localized on-the-fly.

SVG has been developed by the World Wide Web Consortium (W3C) since 1999.

See also, SVG Tutorial.

Example svg format:

<svg xmlns="http://www.w3.org/2000/svg" width="175" height="138" viewBox="0 0 175 138">
    <g>
        <g id="Page-1">
            <g id="scatter">
                <path id="Shape" d="M173.53,129.2a4.64,4.64,0,0,0-3.26-1.35H9.2V4.6A4.6,4.6,0,0,0,0,4.6V132.46a4.6,4.6,0,0,0,4.6,4.6H170.27a4.64,4.64,0,0,0,3.26-1.35,4.62,4.62,0,0,0,0-6.51Z" style="fill: #5067a2" />
            </g>
        </g>
    </g>
    <g>
        <path d="M45.07,11.49a9.21,9.21,0,1,1-9.2,9.2,9.19,9.19,0,0,1,9.2-9.2Z" style="fill: #5067a2" />
        <path d="M96.7,11.49a9.21,9.21,0,1,1-9.2,9.2,9.19,9.19,0,0,1,9.2-9.2Z" style="fill: #5067a2" />
        <rect x="51.09" y="18.28" width="41.57" height="6.11" style="fill: #5067a2" />
        <path d="M70.89,36.69a9.21,9.21,0,1,1-9.21,9.2,9.2,9.2,0,0,1,9.21-9.2Z" style="fill: #5067a2" />
        <path d="M144.22,36.69a9.21,9.21,0,1,1-9.2,9.2,9.19,9.19,0,0,1,9.2-9.2Z" style="fill: #5067a2" />
        <path d="M36.85,61.65a9.21,9.21,0,1,1-9.2,9.2,9.19,9.19,0,0,1,9.2-9.2Z" style="fill: #5067a2" />
        <path d="M88.48,61.65a9.21,9.21,0,1,1-9.2,9.2,9.19,9.19,0,0,1,9.2-9.2Z" style="fill: #5067a2" />
        <rect x="42.87" y="68.44" width="41.57" height="6.11" style="fill: #5067a2" />
        <path d="M80.09,85.19a9.2,9.2,0,1,1-9.2,9.2,9.19,9.19,0,0,1,9.2-9.2Z" style="fill: #5067a2" />
        <path d="M131.72,85.19a9.2,9.2,0,1,1-9.2,9.2,9.19,9.19,0,0,1,9.2-9.2Z" style="fill: #5067a2" />
        <rect x="86.11" y="91.98" width="41.57" height="6.11" style="fill: #5067a2" />
        <path d="M25.29,105.36a9.21,9.21,0,1,1-9.2,9.2,9.19,9.19,0,0,1,9.2-9.2Z" style="fill: #5067a2" />
        <path d="M90.76,105.36a9.21,9.21,0,1,1-9.21,9.2,9.21,9.21,0,0,1,9.21-9.2Z" style="fill: #5067a2" />
        <rect x="31.56" y="112.15" width="52.88" height="6.11" style="fill: #5067a2" />
        <rect x="76.15" y="42.43" width="66.63" height="6.72" style="fill: #5067a2" />
    </g>
</svg>