svg for designers n.
Skip this Video
Loading SlideShow in 5 Seconds..
SVG for Designers PowerPoint Presentation
Download Presentation
SVG for Designers

Loading in 2 Seconds...

play fullscreen
1 / 29

SVG for Designers - PowerPoint PPT Presentation

  • Uploaded on

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

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'SVG for Designers' - raziya

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript


Introduce SVG

Illustrate its capabilities

Demonstrate SVG in action

Speculate, discuss, answer questions

what is svg

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

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

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

Important Benefits

Vector graphics

XML based

Text implementation

important benefits vector graphics

Important Benefits - Vector Graphics

Text based descriptions of geometric objects

Small file size


*Integrate raster images

*Quality of display

*Raster like filter effects

important benefits xml based

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

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

What SVG Looks Like

<?xml version="1.0" standalone=”yes"?>

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


<svg width="5cm" height="4cm” xmlns="">

<desc>Four separate rectangles


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

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

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

Graphical Objects

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


  • 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

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

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


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


  • 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

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


  • 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

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



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

Rotate - transform=“rotate(30)”

Scale - transform=“scale(2.5)”

Skew - transform=“skewX(30)”




  • Animation is time based not frame based
  • Achieved by:
    • Using SVG animation elements based on SMIL
    • Scripting
  • SVG animation is powerful
animation elements

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

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

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

thank you

Thank you