blue bar

Home  |  Resources SiteMap  

blue bar
    SVG Overview > Explaining SVG

Print Version       Previous       Next       

Explaining the name: SVG

Scalable

To be scalable, it means the capability to increase or decrease uniformly.

In terms of graphics, SVG is not being limited to a single, fixed unit.

  • SVG can be scalable to different display resolutions and color spaces without distortion.
  • The same SVG graphic can be placed at different sizes on the same page, and re-used at different sizes on different pages.
  • SVG graphics can be magnified to see fine detail, or to aid those with low vision.

In terms of a Web technology, SVG graphics can be referenced or included inside other SVG graphics, allowing a complex illustration to be built up in parts, perhaps by several people.


Vector

Vector graphics are images generated from mathematical descriptions that determine the position, length, and direction in which lines are drawn.

For example, a two-dimensional point is stored as (x, y). Lines are stored as a series of point pairs. Each pair of points represents a straight line segment, for example, (x1, y1) and (x2, y2) indicating a line from (x1, y1) to (x2, y2).

                               
                   A point                                 A line                                  An area

All vector objects are created as a structured assembly of drawing primitives such as lines, curves, polygons and text.

For example, a bicycle tire in a vector graphic is made up of a mathematical definition of a circle drawn with a certain radius, set at a specific location, and filled with a specific color. You can move, resize, or change the color of the tire without losing the quality of the graphic. Remember that the vector principal is one of mathematics, not pixel. The image is redrawn based on its mathematical data, scaled as indicated.

SVG is a vector graphic format. Therefore, graphics in SVG are resolution-independent, scalable and created through text-based commands that are formatted to comply with XML specifications.


Graphics

SVG introduces high quality and powerful graphics for visual communication in the Internet world. An SVG graphic can be either static or the result of an on-demand transformation. SVG even retains text usefulness because it remains selectable and searchable. Graphics in SVG can be characterized as:

  • Data-driven graphics -

    Because SVG is XML-based, SVG graphics can easily be created "on the fly" by any scripting language (Javascript, Perl, or Java) with data from any source from a relational database to an ASCII file, so images can dynamically update with real-time data. A weather map or a stock market graph (from stock market data) done in SVG are good examples of this capability.

  • Interactive graphics -

    SVG graphics can easily be animated, made interactive, and styled with CSS and XSL stylesheets. SVG is compatible to other XML standards such as DOM (Document Object Model), SMIL (Synchronized Multimedia Integration Language) and many others. These attributes take SVG's capabilities beyond the scope of any previously existing graphic standard.

Previous       Next       

   
 

About the Tutorial

 

SVG Overview

  Introduction
  Origins of SVG
 

Explaining SVG

  SVG Viewer & Browser
 

Why Another Graphic Format

  Quiz
  SVG Applications
 

SVG Concepts

 

Basic Drawing

 

Painting & Effects

 

Dynamic SVG