svg for designers

29
SVG for Designers Tom Hoferek

Upload: raziya

Post on 21-Jan-2016

37 views

Category:

Documents


0 download

DESCRIPTION

SVG for Designers. Tom Hoferek. Objectives. Introduce SVG Illustrate its capabilities Demonstrate SVG in action Speculate, discuss, answer questions. What is SVG?. S calable V ector G raphics SVG 1.0 is a Web standard Vector graphic shapes, raster images, text - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: SVG for Designers

SVG for Designers

Tom Hoferek

Page 2: SVG for Designers

Objectives

Introduce SVG

Illustrate its capabilities

Demonstrate SVG in action

Speculate, discuss, answer questions

Page 3: SVG for Designers

What is SVG?

Scalable Vector Graphics

SVG 1.0 is a Web standard

Vector graphic shapes, raster images, text

Dynamic and interactive graphics

Page 4: SVG for Designers

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

Page 5: SVG for Designers

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

Page 6: SVG for Designers

Important Benefits

Vector graphics

XML based

Text implementation

Page 7: SVG for Designers

Important Benefits - Vector Graphics

Text based descriptions of geometric objects

Small file size

Scalable

*Integrate raster images

*Quality of display

*Raster like filter effects

Page 8: SVG for Designers

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

Page 9: SVG for Designers

Important Benefits - Text Implementation

Preserves both graphical appearance and ‘text’

Prevent font substitution and workarounds

Searchable, selectable text

Embed font information

Page 10: SVG for Designers

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>

Page 11: SVG for Designers

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

Page 12: SVG for Designers

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

Page 13: SVG for Designers

Graphical Objects

Vector objects:

rectangle, circle, ellipse, line, polyline,

polygon, path

Raster images

Text

Page 14: SVG for Designers

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

Page 15: SVG for Designers

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

Page 16: SVG for Designers

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

Page 17: SVG for Designers

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

Page 18: SVG for Designers

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

Page 19: SVG for Designers

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

Page 20: SVG for Designers

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>

Page 21: SVG for Designers

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

Page 22: SVG for Designers

Transformations

Translate - transform=“translate(20,100)”

Rotate - transform=“rotate(30)”

Scale - transform=“scale(2.5)”

Skew - transform=“skewX(30)”

transform=“skewy(30)”

Page 23: SVG for Designers

Animation

Animation is time based not frame based

Achieved by:

Using SVG animation elements based on SMIL

Scripting

SVG animation is powerful

Page 24: SVG for Designers

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

Page 25: SVG for Designers

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

Page 26: SVG for Designers

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

Page 27: SVG for Designers

Samples

Page 28: SVG for Designers

Speculate, Discuss, Answer Questions

Page 29: SVG for Designers

Thank you

[email protected]