Government buyers
click here
 • Products & Services     • Buy software 
 • Downloads     • Support 
 • Customer testimonials     • FAQ 
 • Free newsletter     • Press 
 • Mailpiece-design site     • Links 
 • News archives     • Contact 
   • About     • Home 
MYTHS and facts about
variable-data printing
& publishing
♦♦♦ Sign up for our
free newsletter


Citation Software Inc.
 Specialists in variable-data publishing since 1986

                 Follow CitationSW on Twitter                 
              Click to use wizard
             Use our Wizard to find the right product for your requirements and budget!

    Make $50 by sending a customer to us
♦ Sign up for our free newsletter ♦

QUESTION: What is SVG, and how does it work?

ANSWER: SVG stands for "Scalable Vector Graphics." It is a graphics language that is based on XML (Extensible Markup Language).

You might be thinking, "Ho, hum. Another graphics language. What's the big deal?"

Well, the fact is that SVG is a VERY big deal, for several reasons. The main reasons are:
  • SVG is easy to understand.
  • SVG can make Web pages load faster and look better.
SVG technology is fairly new, and it isn't yet in widespread use.

Before we go into detail about what we've just said, let's take a little side trip to see SVG in action.

What Does SVG Look Like?

Here is an SVG file that describes a blue rectangle and a red circle.

    <?xml version="1.0"?>
    <rect x="150" y="25" width="100" height="50" style="fill:blue" />
    <circle cx="240" cy="175" r="50" style="fill:red" />

(To avoid any possible risk of confusion, we'll point out that the SVG code above is not actually a file ? it's part of this Web page. It illustrates what an SVG file might look like, so we are referring to it as an SVG file.)

The first line of the file functions as a clue to a computer system that might be processing the file. It tells the computer system that this file contains XML information that conforms to Version 1.0 of the XML specification. (Remember, we said that SVG is based on XML. In fact ? technically ? SVG is XML, but we won't take the time to explain that concept here.)

The second line of the file says that this file contains a particular XML language: SVG.

The third line of the file describes the blue rectangle. The "x" and "y" values give the position of the upper left corner of the rectangle, the "width" and "height" values give the width and height (duh!), and the "style" information says that the rectangle is blue. The units of measurement are officially 1/72 inch, but on a particular computer monitor, the actually dimensions might vary depending on the size of the monitor and its resolution.

The fourth line of the file describes the red circle. "cx" and "cy" specify where the center of the circle is located, and "r" specifies the circle's radius.

The last line of the file, which says


"matches" or "balances" the second line of the file, which says


This concept of "matching" or "balancing" is fundamental to all XML-based languages.

How Does SVG Work?

To see the objects described in an SVG file, your computer must have software that can understand the SVG code and render the objects described in the SVG code. Some day in the not-too-distant future, most Web browsers will probably have such software built into them. Today, however, only a few Web browsers are able to understand SVG code.

To find out if your Web browser is capable of displaying SVG files, click on this link, which is a link to an SVG file that contains the SVG code shown above. If your browser is capable of displaying SVG files, you'll see a blue rectangle with a red circle underneath it. If your browser doesn't display the rectangle and the circle, you might want to download the free Adobe? SVG Viewer, which is a plug-in that a Web browser uses to render SVG.

Now that you know a little bit about what SVG looks like and how it works, we'll get back to the task of explaining why SVG is so great!

The KISS Principle - Redefined

Everybody knows that the "KISS" in "KISS Principle" stands for "Keep It Simple, Stupid!"

In honor of SVG, let's assign a different meaning to the "KISS." We'll say that it means, "Keep It Simple and Small."

Because SVG — as you've already seen — is simple.

And you are about to see that SVG is small, too.

And then Ed (McMahon) asked, "How small is it, Johnny?"

SVG descriptions of objects are VERY small, compared to bitmap-format descriptions of those same objects. SVG is a vector format, not a bitmap format; and vector-format descriptions of objects are almost always a lot smaller than bitmap-format descriptions of those same objects. This is a very important concept to understand, and it's the reason why we said earlier that Web pages will load faster with SVG technology. This will (hopefully) become clearer as you read the paragraphs below.

The fact of the matter is that - on the Web today - almost all graphics are contained in bitmap-format files. The two most-often-used formats for graphics on the Web are .GIF and .JPG, which are both bitmap formats. Usually, .GIF files are used for geometric shapes such as lines, rectangles, and circles while .JPG files are used for photographs.

The reason that bitmap formats are used for Web graphics is simple: most Web browsers understand bitmap formats but they don't understand vector formats.

The fact that Web browsers don't understand vectors is a problem for Web designers today. Why? Because it takes a long time to download bitmap graphics from a Web site to a Web browser. If graphics could be described in a vector format, it would take less time to download graphic descriptions because the graphic descriptions would be much smaller. Web designers spend a lot of time and effort trying to minimize the sizes of the graphics in their Web pages so that their site visitors won't lose patience while waiting for the graphics to download and navigate to a different site.

It is for this reason that several high-tech companies have been hard at work developing a Web standard for vector graphics. That standard is SVG, and some of the companies that have been working on it are Adobe Systems, Quark, Corel, Hewlett-Packard, and IBM.

Now let's get back to the question of "How small is it?"

The SVG code above is contained in a file that has 157 bytes. If we used a .GIF file to represent the same blue rectangle and red circle, the .GIF file would probably have at least 1500 bytes. So you can see that the SVG file is dramatically smaller than the .GIF file.

Once Web browsers are improved so that we can rely on them to handle SVG files properly, Web designers will start using SVG files in their pages instead of bitmap files. Web pages in general will be much smaller than they are today (because the graphics files will be much smaller), and because the Web pages will be smaller they will load into our browsers quickly.

Pretty Pictures

SVG will also make it possible to improve the appearance of Web pages. That's because SVG graphics tend to look sharper and crisper on the screen than bitmap graphics.

For more information —

We've only touched upon some basic SVG concepts. To learn more about SVG, go to

If you'd like to learn more about XML, go to


Let our Wizard help you find the right product!

• Products & Services   • Buy software   • Downloads   • Support
• Mailpiece-design site   • Our customers    • Company information   • Links
• Free newsletter   • FAQ   • Case studies   • Contact us
• News archives   • Press   • Customer testimonials   • Home


Copyright © 2001-2021 Citation Software Inc.
print on demand