|
|
|
|
|
|
|
Citation Software Inc.
Specialists in variable-data publishing since 1986
|
|
|
|
www.CitationSoftware.com info@CitationSoftware.com 508-436-2543
|
|
|
|
|
|
|
|
|
|
|
*
|
Click here to 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"?>
<svg>
<rect x="150" y="25" width="100" height="50" style="fill:blue" />
<circle cx="240" cy="175" r="50" style="fill:red" />
</svg>
(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
</svg>
"matches" or "balances" the second line of the file, which says
<svg>
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 www.adobe.com/svg/overview/svg.html.
If you'd like to learn more about XML, go to www.CitationSoftware.com/faqXML.htm.
|
|
|
|
Copyright © 2008 Citation Software Inc.
info@CitationSoftware.com
508-436-2543
www.CitationSoftware.com
|
|
