T7L5
Vector Graphics
Introduction
This lesson is designed to expose you to the concept of Vector Graphic Technology and
its use on the Internet today. By the end of this lesson you should be able to:




Define what a vector graphic is.
Define the limitation and benefits of vector graphics
Define what scalable vector graphics are.
State the role vector graphics may play on the Internet in the future.
Several graphic formats have been dominating the internet since its inception. Primarily
GIFs (Graphic Interchange Format) and JPEGs (Joint Photographic Experts Group) have
dominated the scene. Fairly recently a format has begun to take hold that will evolve into
a major contender over the next few years. This module will familiarize you Vector
Graphics and its successor - Scalable Vector Graphics.
To begin, study these sections:




Definition of a Vector Graphic
What The Limitations And Benefits Of Vector Graphics Are
Definition of a Scalable Vector Graphic (SVG).
The Future of Vector Graphics and Scalable Vector Graphics.
Additional Resources
Webopedia Vector Graphics
http://webopedia.internet.com/TERM/v/vector_graphics.html
World Wide Web Consortium Graphics
http://www.w3.org/Graphics/
Macromedia - Creator of Flash
http://www.macromedia.com
Macromedia’s Shockwave Site
http://www.shockwave.com/
1
T7L5
Library of Sites Using Macromedia’s Technology
http://www.macromedia.com/solutions/educator/
Mozilla SVG Resource Page
http://www.mozilla.org/projects/svg/
Learning How to Code in SVG
http://webdeveloper.com/design/design_svg_example.html
Creating SVG
http://wdvl.internet.com/Authoring/Languages/XML/SVG/DoingIt/index.html
2
T7L5
Definition of a Vector Graphic
Vector Graphics are basically another type of graphic that can be included on your
website. Much like JPEGs and GIFs they come in many shapes and sizes, but what sets
them apart is how they are assembled.
Remember that JPEGs and GIFs are pixels of varying colors, that when assembled make
up your graphic. When you decide to resize either of these two graphic formats you tend
to get a result that is less than desirable.
[[show picture of individual pixels in a GIF image]]
A Vector Graphic differs from these two formats in that it doesn’t rely upon plotting
pixels but instead uses a series of lines of varying lengths, thickness, and colors. These
lines are rendered thru a series of commands or mathematical statements that, when saved
in the vector graphic file format, produce a file size that is much smaller. Vector graphics
also retain their original look when resized. In essence, the file is actually saving the
geometrical formula versus the GIF or JPEG, which must remember each individual
pixels information.
3
T7L5
Limitations and Benefits of Vector Graphics
We have already noted that some of the benefits of a Vector Graphic are:


ability to be resized and stretched with no distortion to the image
small file size
There is an additional benefit to using Vector Graphics, and that is their ability to grow
and shrink as the browser window is resized. This allows the developer to not have to
worry about recreating various sizes of the same graphic to fit within a variation of
different sized viewing areas.
With all relatively things new, a standard must be adopted and tools created. That is
where the limitation of this powerful graphic format comes into effect. Currently Vector
Graphics are only supported in the latest 4.x and 5.x browsers. Browsers of a earlier
version are required to download and install the appropriate plug-in in order to view the
files containing vector graphics.
Also, it is quite difficult to depict some images, such as a photo-realistic human face,
with vector graphics. Vector graphics excel when simple shapes are required, but fall
behind when a great amount of fine detail is required.
Macromedia’s Shockwave for Flash software is an example of software using vector
graphic technology to produce files of small sizes containing animation and sound.
Additional Resources
Macromedia’s Shockwave Site
http://www.shockwave.com/
Library of Sites Using Macromedia’s Technology
http://www.macromedia.com/solutions/educator/
4
T7L5
Scalable Vector Graphics (SVG)
With advent of Extensible Markup Language (XML) certain benefits in other areas are
being discovered. Since XML gives us the ability to define standard ways of doing things
on clients that, up until now, have only been possible on servers, we can define a
language that renders a two dimensional graphic on our web pages.
SVG is the language that allows us to render such graphics within the architecture of
XML. SVG allows for three types of graphic objects:



vector graphic shapes (e.g., paths consisting of straight lines and curves)
images
text
Scalable Vector Graphics can be dynamic and interactive by applying various scripting
commands resident in the Document Object Model (DOM). The DOM is part of the
browser's internal hierarchical organization of elements in a document. These commands,
when assembled, would allow the developer to apply many of the effects seen on various
websites today (i.e. mouseovers, where the image changes shape when the mouse hovers
over the graphic).
Currently SVG is still being reviewed to be included as a standard within the World Wide
Web Consortium (W3C) [[http://www.w3c.org]] but it is very likely it will become a
standard in the near future. However, today there are a number of viewers available to
view SVGs and several software packages are being updated to export to SVG. [[link to
viewers and tools: http://www.w3.org/Graphics/SVG/SVG-Implementations ]]
Additional Resources
Mozilla SVG Resource Page
http://www.mozilla.org/projects/svg/
Learning How to Code in SVG
http://webdeveloper.com/design/design_svg_example.html
Creating SVG
http://wdvl.internet.com/Authoring/Languages/XML/SVG/DoingIt/index.html
5
T7L5
The Future of Vector Graphics and Scalable Vector
Graphics
All along, we have been talking about one of the major benefits of vector graphics, and in
particular SVG - file size. The chart below displays the differences in files sizes BY Kb:
File
[[link to
Shapes.gif]]
SVG
2
GIF
26
JPEG
24
PNG
21
As you can see there are some significant differences. These differences should be very
beneficial to the web development community.
At the time of this posting no standards have been formalized for either graphic
technology. Throughout this lesson, it was hinted that the W3C was due to adopt the
standard that would allow various groups to embrace it.
Several major software companies, including Macromedia and Corel, have adopted
vector graphics and have built entire tool sets around it. Macromedia’s Director,
Shockwave, and Flash files all take advantage of vector graphics strengths, in particular
their ability to maintain small file sizes.
6
T7L5
that section]]
7
T7L5
Vector Graphics Summary
This lesson is designed for you to gain some basic information about vector graphics.
When you are finished with the lesson, you should be able to do the following:




Define what a vector graphic is.
Define the limitation and benefits of vector graphics
Define what scalable vector graphics are.
State the role it may play on the Internet in the future.
A short summary of these topics is listed below. If you do not understand these things,
you should review the lesson at least once. If you are still having difficulty, you should
consider other sources of information that compliment this lesson, such as textbooks,
tutors, and instructors.
Definition of a Vector Graphic


Vector Graphics are basically another type of graphic that can be included on
your web site.
A Vector Graphic uses mathematical formulas to define a series of lines of
varying lengths, thickness, and colors.
Limitations and Benefits of Vector Graphics
Benefits



Their ability to be resized and stretched with no distortion to the image.
Small file size.
Their ability to grow and shrink as the browser window is resized.
Limitations



Standards still being set.
Can't depict complex shapes, like a photo-realistic human face, well.
Early browsers need plug-ins to view these formats.
Scalable Vector Graphics (SVG)
SVG is the language that allows us to render such graphics within the architecture of
XML. SVG allows for three types of graphic objects:



vector graphic shapes (e.g., paths consisting of straight lines and curves)
images
text
8
T7L5
Currently SVG is still being reviewed to be included as a standard within the World Wide
Web Consortium (W3C) [[http://www.w3c.org]].
The Future of Vector Graphics and Scalable Vector Graphics


If limited bandwidth continues to be a concern for web delivery, vector graphics
will play an increasingly important part in the delivery of images via the web.
Today, MacroMedia Flash is one of the most widely-used vector graphics
packages available.
9