SVG: An XML approach to graphics, part 1
Overview
The Scalable Vector Graphics (SVG) standard is currently a work-in-progress
from the World Wide Web Consortium (W3C) for describing two-dimensional graphic
objects. SVGs are going to be one of the "next big things" in the
online world because they incorporate both content and XML in a graphics format.
This week's tip is the first of a two-part series that examines what SVGs are, a
little about how they tick, and some places you can look to find more
information.
What is an SVG?
A Scalable Vector Graphic is a new file format for describing graphics images
using XML. A scalable vector format is different from a bitmap, or raster,
graphic format. With a bitmap image, the file contains a series of bits that
when rendered according to a particular color palette, display the desired
image. The bits in the file create a map of what the image looks like. With a
vector image, the file contains instructions on how to draw the image rather
than what it looks like. By following the instructions, the image is rendered.
The advantage of vector images is that they can be scaled into much larger (or
smaller) sizes without any loss of image quality. The reason is that when a
bitmap image is enlarged, there will be missing pieces. The missing pieces must
be filled in order to make the image look complete. There are a variety of
algorithms that will interpolate the missing pieces; however, depending on the
image, the interpolations will most likely introduce distortions into the image.
With a vector, this doesn't occur because the drawing instructions remain the
same. Only the parameters that describe the size of the image are adjusted.
Content-based
Among the major features of the SVG format is the ability to isolate content.
In a typical JPEG or GIF image, the entire graphic is stored as an image or
snapshot of what the image looks like. With an SVG image, any content (such as
text data) can be stored and rendered appropriately. This allows you to not only
store and render the content, but also manipulate and search for content.
Imagine for a moment a GIF-based chart. To modify the chart to incorporate new
data you would need to render a new image. With SVG, it's possible to manipulate
the underlying XML to include the new or modified data so that the next time the
image is viewed the data is current.
Animation
Another key feature of SVGs is the ability to include animation. Unlike other
static graphic formats, SVG provides the facilities for manipulating the SVG
document via scripts and thus the capability to provide animation. The basic
concepts of animation in an SVG include the ability to manipulate a scalar
property or a vector object over a period of time. Manipulations include size,
position, color, and other attributes.
Summary
So far we've talked about some of the basics of SVG images. This is just the
first part of our two-part series covering SVG. Next week we'll look at some of
the XML behind SVGs, some additional features, and some online resources where
you can get more information about Scalable Vector Graphics.
SVG: An XML approach to graphics, part 2
Welcome to the second part of our series on Scalable Vector Graphics (SVGs).
Last week, we talked about some of the features of SVGs, including their
content-based approach as well as their ability to include sophisticated
animation. This week, we'll look at some more features of SVGs and some actual
XML for SVGs. Finally, we'll point you at some online resources where you can
get more information and tools for SVGs.
Easy creation with XSLT
Because SVGs are really just XML documents, they can be easily created using
XML tools. One particularly useful tool is XML Stylesheet Translations (XSLT).
Using XSLT, you can create an "image template" that is the basis for
several other images and then translate an existing XML document using the
template to create new images based on the XML data. This approach allows you to
create extremely dynamic images with very little work.
Query-enabled
Another feature of SVGs is that they are query-enabled. This means that you
can perform queries against the SVG document as you would any other XML
document. Using this technology, you can retrieve any data stored in the
document for use elsewhere.
Actual SVG data
Now let's look at some actual SVG data. Listing 1 shows a snippet from
an SVG document that draws a small black square. The <path> element
defines a very simple path object, which actually does the job of drawing the
shape. The "d" parameter provides the data to the SVG processor that
tells it how to draw the particular image. In this case, it performs a move (M),
three line-tos (L), and a closepath (Z).
Listing 1: Sample SVG snippet
<svg height="30" width="30">
<path style="stroke:black;
stroke-width:2;
fill:black" d="M 5 5 L 20 5 L 20 20 L 5 20 Z"/>
</svg>
Resources
Now that you have some idea of what makes up an SVG document, you should
visit some of the following sites for more information. Some of these resources
have information; others have downloadable tools you can use to start working
with SVG documents today.
World Wide Web Consortium
The W3C is the standards body that is currently reviewing the SVG
specification and is the same organization that will publish the final
"official" specification. Its Web site contains all the details of the
SVG specification as well as information about the working group that is
creating the SVG standard. You can visit the W3C online here.
Adobe
Adobe, a leading software developer in the graphics market, is strongly
backing the SVG effort. Adobe already has tools available for both creating and
viewing SVG documents. It even has a Web-browser plug-in for viewing SVG
graphics. You can visit Adobe online here.
Sun Microsystems
Sun Microsystems, a leading UNIX vendor, is also providing support for SVG
graphics. It has available an SVG generator as well as a slideshow toolkit. Its
developer site provides great information for developers regarding creation of
SVG documents. You can visit Sun's SVG information here.
Summary
This concludes our two-part series on SVGs. We've shown you a few of the
features of SVGs as well as some sample XML code. Finally, we've pointed you to
some online resources where you can learn more about this exciting new
technology.