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 <rect <rect <rect </svg> x="0.5cm" y="0.5cm" width="2cm" height="1cm"/> x="0.5cm" y="2cm" width="1cm" height="1.5cm"/> x="3cm" y="0.5cm" width="1.5cm" height="2cm"/> x="3.5cm" y="3cm" width="1cm" height="0.5cm"/> 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 stroke=“red” stroke-width=“2”/> 100,160” Polygon Basic attributes of <polygon>: List of points <polygon points=“350,75 277,301 303,215 379,161 231,161 469,161 397,215 423,301 321,161” fill=“yellow” stroke=“red” stroke-width=“2”/> 350,250 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 Skew - transform=“scale(2.5)” 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