SVG:

SCALABLE VECTOR GRAPHICS

WHAT IS SVG?

SVG stands for Scalable Vector Graphics

SVG is used to define vector-based graphics
for the Web
SVG defines the graphics in XML format
A dynamic new graphics standard released by the W3C
in 2001
WHAT IS SVG? (CONTD.)

SVG graphics do NOT lose any quality if they are

zoomed or resized
Every element and every attribute in SVG files
can be animated
SVG is a World Wide Web Consortium (W3C)
recommendation
SVG integrates with other W3C standards such
as the DOM
WHY DO WE NEED SVG?
Limited capabilities of bitmaps:
Bitmaps can lose considerable resolution when resized
A high quality bitmap will also come with a large file size
However, because of widespread browser support, the vast
majority of graphics on the Internet today are bitmaps
WHY DO WE NEED SVG? (CONT.)
Limited capabilities of vectors:
Graphics based on mathematical formulas, making vectors
unable to support photographic-quality images
Never received widespread browser support
However, unlike bitmaps, vectors do not lose image quality
when resized
HISTORY OF SVG

Mid-1990s: Adobe, Microsoft, and Macromedia began to

develop new web graphic standards
New standard would have to:
Be resolution independent
Maintain quality on different size screens
Maintain a small file size
Receive widespread browser support
Support photographic-quality images
HISTORY OF SVG (CONT.)

September 2001: SVG became a formal W3C

recommendation
Late 2001: Adobe claimed it had ownership and royalty rights
on SVG
January 2002: The Internet community protested Adobes
claim, and Adobe abandoned the issue
January 2003: SVG 1.1 released by W3C
CURRENT SVG TOOLS
Development
Viewing
Text Editor
Browser support:
Adobe Illustrator 10
Mozilla, Amaya
Corel Draw 11
Promised future
Jasc WebDraw support by IE and
Netscape
InkScape
SVG Viewers from:
Adobe
Corel
IBM
Apache
SVG, THE LANGUAGE

Text based
Based on XML
Compatible with current web technologies:
XML, HTML, DHTML, CSS, JavaScript, Java, VB,
PNG, GIF, JPG, ASP, JSP and others
ADVANTAGES OF SVG

SVG files can be read and modified by a large range of tools (e.g.
notepad).
SVG files are smaller and more compressible than JPEG and GIF
images.
SVG images are scalable .
SVG images can be printed with high quality at any resolution .
SVG images are zoom able. Any part of the image can be zoomed
without degradation.
Text in SVG is selectable and searchable (excellent for making maps).
SVG works with Java technology.
SVG is an open standard.
SVG files are pure XML.
ADVANTAGES OF SVG (CONT.)

Text-based: easy to code and edit

Open source: royalty-free, license-free
Written in XML: the future of IT
Official standard from the W3C
Accessibility: scalability & screen readers
Searching: based on text, accessible by XML-aware
search engines
Can be updated from a database
Browser support either natively or through a viewer
ADVANTAGES OF SVG (CONT.)
Can be exported from geographic information systems
(GIS) software
Supports animation and interactivity
Supports filters, transformations, clipping, and masks
Supports transparency
Can be edited in popular drawing programs such as
Adobe Illustrator and Corel Draw
VEKTOR VS. GRAFIK BITMAPPED

Raster image Vector image

100%
100%
200%
200%
SVG FOUNDATIONS IN XML
An SVG is written in XML 1.0 syntax in a text editor, or
generated by a drawing program
SVG abides by XMLs strict coding rules
SVG contains elements and attributes, as does XML
SVG COORDINATE SYSTEM
SVG is based on mathematical formulas, like traditional vector
graphics
SVG elements are placed on the X and Y axis
EXAMPLE SVG CODE
Example:
<rect x=10 y=10 width=20 height=20/>
Produces 20x20 rectangle at position (10, 10)
Similarly:
<circle cx=10 cy=10 r=20/>
Produces a D=40 circle centered at (10, 10)
XML CODE FOR A SIMPLE SVG

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010909//EN"
"http://www.w3c.org/TR/2001/REC-SVG-
20010904/DTD/svg10.dtd">
<svg width="600" height="400">
<rect x="1" y="1" width="598" height="398"
style="fill:#00FF00"/>
<text x="210" y="25" style="fill:#FFFFFF; stroke:none;
font-family:Arial, sans-serif; font-size:22">
Hello World!
</text>
</svg>
ADVANCED CAPABILITIES OF SVG

Paths: used to draw 2D elements of any shape or

size by defining points
Transformations: allow rotation and scaling of an
object
Clipping and Masking: provide the ability to modify
an objects fill effect
Filters: provide effects such as drop shadows
(associated with bitmaps)
Animation/Interactivity: can be accomplished with
SVG tags, or with external script files
SVG EXAMPLES
1. SVG vs. bitmap: scaling & image quality
2. Interactivity and text-Based searching
3. SVG support for photographic-quality images through
embedded bitmaps
WHAT SVG LOOKS LIKE
<?xml version="1.0" standalone=yes"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="5cm" height="4cm xmlns="http://www.w3.org/2000/svg">

<desc>Four separate rectangles

</desc>

<rect x="0.5cm" y="0.5cm" width="2cm" height="1cm"/>

<rect x="0.5cm" y="2cm" width="1cm" height="1.5cm"/>
<rect x="3cm" y="0.5cm" width="1.5cm" height="2cm"/>
<rect x="3.5cm" y="3cm" width="1cm" height="0.5cm"/>

</svg>
SVG COORDINATE SYSTEMS

SVG documents have their origin at the top left

Supported units of measure: pixels px
percent %
millimeters mm
centimeters cm
inches in
ems em
x height ex
points pt
picas pc
GRAPHICAL OBJECTS

Vector objects:
rectangle, circle, ellipse, line, polyline,
polygon, path
Raster images
Text
RECTANGLE

Basic attributes of <rect>:

X and Y positions of top left corner
Width and height
Corner roundness - x radius, y radius

<rect x=60 y=60 width=100 height=100 rx=10 ry=10

fill=orange stroke=navy stroke-width=2/>
CIRCLE AND ELLIPSE

Basic attributes of <circle> and <ellipse>:

X and Y positions of centre
Radius (circle)
X radius and Y radius (ellipse)

<circle cx=60 cy=60 r=20

fill=orange stroke=navy stroke-width=2/>
LINE AND POLYLINE

Basic attributes of <line>:

X and Y positions of start point and end point

<line x1=60 y1=60 x2=100 y2=60

stroke=red stroke-width=2/>

Basic attributes of <polyline>:

List of points
<polyline points=60,60 60,100 100,100 100,160
stroke=red stroke-width=2/>
POLYGON

Basic attributes of <polygon>:

List of points

<polygon points=350,75 379,161 469,161 397,215 423,301 350,250

277,301 303,215 231,161 321,161
fill=yellow stroke=red stroke-width=2/>
PATH

A path can be used to define just about any graphic object

It is more than a line or polyline, it can contain curves
It can define the outline of a shape
Basic attributes of <path>:
Path data
<path d=M 60 60 L 60 100 L 100 100 z
stroke=red stroke-width=2/>
RASTER IMAGES

Incorporated in a SVG graphic by linking to the file

Basic attributes of <image>:
X and Y positions of top left corner
Width and height
Link to image file

<image x=100 y=100 width=60 height=195

xlink:href=myimage.png />
TEXT

Basic attributes of <text>:

X and Y positions of start
Font family and font size
Fill and stroke

<text x=100 y=30 font-family=Verdana font-size=40 fill=red>

Hello
</text>
VISUAL PROPERTIES

Colour and opacity of fills and strokes

Stroke thickness, end caps, join type and dash size
Font family, size, style, stretch, variant and weight
TRANSFORMATIONS

Translate - transform=translate(20,100)

Rotate - transform=rotate(30)

Scale - transform=scale(2.5)

Skew - transform=skewX(30)
transform=skewy(30)
ANIMATION

Animation is time based not frame based

Achieved by:
Using SVG animation elements based on SMIL
Scripting
SVG animation is powerful
ANIMATION ELEMENTS

animate - change values of numeric properties over time

set - assign values to non numeric properties
animateColor - modify color values over time
animateTransform - modify transform values over time
animateMotion - move an element along a path
CONTROLLING ANIMATION

Start at a specified time or upon an event

Specify a duration
End at a specified time or upon an event
Specify what happens at the end
Keypoints and keytimes allow precise control
SOME OTHER STUFF

Linear and radial gradients can be applied to fills and strokes

Patterns can be defined and applied to fills and strokes
Clipping and masking elements exist
16 filter effects primitives
THE FUTURE OF SVG

Becoming widely known in the industry

Gaining support from more and more development and
viewing products
Seen as having great potential in mobile and wireless
devices
Potential as web graphics standard will depend on
widespread browser support
WEB RESOURCES

http://www.w3.org/TR/SVG/