1 / 29

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?. S calable V ector G raphics SVG 1.0 is a Web standard Vector graphic shapes, raster images, text

raziya
Download Presentation

SVG for Designers

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. SVG for Designers Tom Hoferek

  2. Objectives Introduce SVG Illustrate its capabilities Demonstrate SVG in action Speculate, discuss, answer questions

  3. What is SVG? Scalable Vector Graphics SVG 1.0 is a Web standard Vector graphic shapes, raster images, text Dynamic and interactive graphics

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

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

  6. Important Benefits Vector graphics XML based Text implementation

  7. Important Benefits - Vector Graphics Text based descriptions of geometric objects Small file size Scalable *Integrate raster images *Quality of display *Raster like filter effects

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

  9. Important Benefits - Text Implementation • Preserves both graphical appearance and ‘text’ • Prevent font substitution and workarounds • Searchable, selectable text • Embed font information

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

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

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

  13. Graphical Objects • Vector objects: • rectangle, circle, ellipse, line, polyline, • polygon, path • Raster images • Text

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

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

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

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

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

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

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

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

  22. Transformations Translate - transform=“translate(20,100)” Rotate - transform=“rotate(30)” Scale - transform=“scale(2.5)” Skew - transform=“skewX(30)” transform=“skewy(30)”

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

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

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

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

  27. Samples

  28. Speculate, Discuss, Answer Questions

  29. Thank you tom.hoferek@corel.com

More Related