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 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> Four separate rectangles

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 picaspc

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 : 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 and : 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 : 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 : List of points <polyline points=“60,60 60,100 100,100 100,160” stroke=“red” stroke-width=“2”/>

17. Polygon Basic attributes of : 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 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 : 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 : X and Y positions of start Font family and font size Fill and stroke Hello

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