Scalable Vector Graphics Overview

by John December

SVG graphic capture First introduced as a public draft in 1999 and as a recommendation (SVG 1.0) in 2001 by the World Wide Web Consortium1, 2, the Scalable Vector Graphics (SVG) serve an important role for presenting graphics on the Web as well as in offline and mobile devices.

The Purpose of Scalable Vector Graphics

The overall purpose of SVG is to be a language for the representation of shapes. Specifically, SVG is a language, defined by XML, used to create vector graphics for display on computer systems.

SVG graphics can include geometric forms--such as lines, points, polygons, curves, circles--as well as text and embedded digital images. These graphics can be displayed, transformed, shaded, textured, animated, and made interactive. SVG is an open standard, which means that its specification is publicly available (at W3C) and many SVG freeware and commercial software tools are available from a wide variety of developers and vendors. SVG graphics are vector graphics defining shapes such as points, lines, curves, and polygons. This is in contrast to raster graphics, such as those used in a digital photograph, which are based on a large set of individual pixels. SVG graphics are represented in data files that are plain text which is readable by humans and easily edited using a simple text editor.

SVG graphics can be used to create maps, cartoons, diagrams of all kinds, games, and learning tools. Anything that involves static or animated shapes can be done with SVG.

How Scalable Vector Graphics Works

You can create a data file that contains SVG elements describing graphics such as lines, polygons, text, or images. For example, create a file called hello.svg that contains this text:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg xmlns="http://www.w3.org/2000/svg" 
 xmlns:xlink="http://www.w3.org/1999/xlink" 
 width='300px' height='300px'>

<title>Small SVG example</title>

<circle cx='120' cy='150' r='60' style='fill: gold;'>
 <animate attributeName='r' from='2' to='80' begin='0' 
 dur='3' repeatCount='indefinite' /></circle>

<polyline points='120 30, 25 150, 290 150' 
 stroke-width='4' stroke='brown' style='fill: none;' />

<polygon points='210 100, 210 200, 270 150' 
 style='fill: lawngreen;' /> 
   
<text x='60' y='250' fill='blue'>Hello, World!</text>

</svg>

If you have a SVG-enabled browser or if you install a SVG viewer like this one from Adobe, you can open the file you created or view this SVG demo embedded in an HTML file like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <meta http-equiv = "Content-Type" content = "text/html; charset=iso-8859-1"> 
      <title>
         Simple SVG Demo
      </title>
   </head>
   <body>
      <object type="image/svg+xml" data="hello.svg" width="300" height="300"></object>
   </body>
</html>

When you have the SVG graphics displayed in your browser, push down the right mouse button and select "View Source" to see the underlying SVG code.

If you don't have an SVG-enabled browser or did not install a SVG viewer, you won't see the SVG graphics.

The Potential of Scalable Vector Graphics

SVG has great potential as a standard language for vector graphics. Unlike Flash technology which does many of the same things as SVG, SVG's status as an open W3C standard means that it will enjoy widespread support as an integral part of Web graphics. Many different developers will support SVG since it won't be under the control of a single company. It is expected that SVG viewing capability will be built into new Web browsers and that SVG use will continue to expand for many mobile devices such as telephones and handheld computers.

References

  1. World Wide Web Consortium, "W3C Scalable Vector Graphics (SVG) News History," https://www.w3.org/Graphics/SVG/History
  2. World Wide Web Consortium, "Scalable Vector Graphics (SVG) Specification," https://www.w3.org/TR/SVG/

Additional Information

W3C Scalable Vector Graphics
This is the primary source of information for SVG specifications and development. It also contains links to SVG tools such as viewers, converters, and editors, as well as mailing lists and news on the most current SVG developments.
SVGeneral
A well-organized set of information with links to examples that illustrates the potential and promise of SVG. Presented by Inbay Ltd, a London-based software company.
SVG -- Learning By Coding
An extensive collection of examples of SVG that illustrate many different features put together by Dr. Thomas Meinike. Great for learning by example.
Explore SVG: Links to Scalable Vector Graphics Examples and Resources.
Links to advanced examples and many resources.
search Search · star Market
2023-06-19 · John December · Terms © johndecember.com