svg for designers

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 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

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 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

Samples

Speculate, Discuss, Answer Questions

Thank you

tom.hoferek@corel.com