SVG for Designers
Tom Hoferek
Objectives
Introduce SVG
Illustrate its capabilities
Demonstrate SVG in action
Speculate, discuss, answer questions
What is SVG?
Scalable Vector Graphics
SVG 1.0 is a Web standard
Vector graphic shapes, raster images, text
Dynamic and interactive graphics
Working with SVG
Creating it:
Authoring tools are rudimentary
CorelDRAW and others export to SVG
Text/code editors
Viewing it:
Web browser with SVG plug-in
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
Important Benefits
Vector graphics
XML based
Text implementation
Important Benefits - Vector Graphics
Text based descriptions of geometric objects
Small file size
Scalable
*Integrate raster images
*Quality of display
*Raster like filter effects
Important Benefits - XML Based
XML is open standard for structured data exchange
has wide and reliable implementation
makes data available to other open standard
technologies
XML + SVG = data driven graphics, aka Smart Graphics
Animation native and through scripting
Interactive and dynamic
Important Benefits - Text Implementation
Preserves both graphical appearance and ‘text’
Prevent font substitution and workarounds
Searchable, selectable text
Embed font information
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
<rect
<rect
<rect
</svg>
x="0.5cm" y="0.5cm" width="2cm" height="1cm"/>
x="0.5cm" y="2cm" width="1cm" height="1.5cm"/>
x="3cm" y="0.5cm" width="1.5cm" height="2cm"/>
x="3.5cm" y="3cm" width="1cm" height="0.5cm"/>
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
Basic Structural Components
‘svg’ element is the main container
The ‘g’ element (group) is a container for other elements
The ‘defs’ element is a container for referenced
elements
‘symbol’ element is a reusable graphic
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
stroke=“red” stroke-width=“2”/>
100,160”
Polygon
Basic attributes of <polygon>:
List of points
<polygon points=“350,75
277,301
303,215
379,161
231,161
469,161
397,215
423,301
321,161”
fill=“yellow” stroke=“red” stroke-width=“2”/>
350,250
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 Skew -
transform=“scale(2.5)”
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
Samples
Speculate, Discuss, Answer Questions
Thank you
tom.hoferek@corel.com