Scalable Vector Graphics
Overview
Scalable Vector Graphics (SVG) is a language for describing two-dimensional graphics and graphical applications in XML. It enables Web developers, designers, and users to move beyond the limitations of HTML and create robust visual content and interactivity through a simple declarative programming model.
SVG is suitable for Web applications based on data-driven, interactive, personalized graphics from real-time data sources such as e-commerce systems and corporate databases. Developers can customize SVG for many audiences, cultures, and demographics, no matter how the user interacts with the data.
Industry applications of SVG include mobile authoring, print based on XML page description including variable data printing, Web applications, and Geographic Information System (GIS) mapping.
SVG was introduced as an open standard by the World Wide Web Consortium (W3C) in 1999 for publishing animation and for interactive applications using vector graphics on the Web. In 2004, a vast majority of the mobile phone industry chose SVG as the basis for its graphics platform. For technical details, visit the W3C.
Features of SVG
Small file size
On average, SVG files are smaller than other Web graphic formats, such as JPEG and GIF, and are quick to download.
Display independence
SVG images are always crisp onscreen and print at the resolution of your printer, whether it's 300 dots per inch (dpi), 600 dpi, or higher. You never get jagged edges due to pixel enlargement or anti-aliasing.
Superior color control
SVG offers a palette of 16 million colors and supports ICC color profiles, sRGB, gradients, and masking.
Interactivity and intelligence
Since SVG is XML-based, it offers unparalleled dynamic interactivity. SVG images can respond to user actions with highlighting, tool tips, special effects, audio, and animation.
Zooming
Users can magnify an image up to 1,600% without sacrificing sharpness, detail, or clarity. Text stays text in SVG, images remains editable (within the source code) and, more importantly, SVG is searchable (unlike in raster and binary counterparts). There are no font or layout limitations, and users always see the image the same way you do.
Text-based files
An SVG file is text-based, not binary. It is a "human readable" format much like HTML. Even a beginner can look at SVG source code and immediately make sense of the descriptive content relative to the graphic representation.
The code of this SVG file looks like this:
... code deleted ...
<rect id=”Rectangular_shape” fill=”#FF9900” width=”85.302” height=”44.092”/>
<ellipse id=”Elliptical_shape” fill=”#FFFF3E” cx=”42.651” cy=”22.046” rx=”35.447” ry=”16.426”/>
<text transform=”matrix(1 0 0 1 16.2104 32.2134)” font-family=”ÅfMyriad-RomanÅf” font-size=”31.2342”>SVG</text>
... code deleted ...
The three objects that make up this example are readily identifiable. There is one rectangle <rect>, one ellipse <ellipse>, and a text <text> element. The positioning and styling properties are easily readable, and you can easily modify them with a simple text-editing application. For example, you could change the fill color of the ellipse by simply changing the color value in the fill description.
