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
World Wide Web Consortium Graphics
Macromedia - Creator of Flash
Macromedia’s Shockwave Site
Library of Sites Using Macromedia’s Technology
Mozilla SVG Resource Page
Learning How to Code in SVG
Creating SVG
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.
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
Library of Sites Using Macromedia’s Technology
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) [[ 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: ]]
Additional Resources
Mozilla SVG Resource Page
Learning How to Code in SVG
Creating SVG
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 / SVG / GIF / JPEG / PNG[[link to Shapes.gif]] / 2 / 26 / 24 / 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.
that section]]
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
Currently SVG is still being reviewed to be included as a standard within the World Wide Web Consortium (W3C) [[
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.
1