Scalable Vector Graphics (SVG)

1. Scalable Vector Graphics (SVG) 2d Graphics in XML

2. Scalable Vector Graphics (SVG) • Introduction • What is SVG • Why use SVG • History • How did SVG come to be • Language • Elements • Attributes • Namespace • Vocabulary • Features • SVG Features • Demonstration • Conclusion

3. Introduction - S • Scalable • Scalable Vector Graphics is an XML grammar for syllable graphics that can be used as an XML namespace. • Scalable graphics allows for uniform dynamic pixel sizing for graphics. • Graphic content can be stand-alone, referenced or included inside of other SVG graphics allowing for a complex illustration to be built in parts and possibly by several different people • Scalable to allow for different display resolutions i.e. content magnification to aid people with low vision. • Scalable Vector Graphics and the Web • Scalable meaning the technology can grow to include a large number of users, files and/or application and still be efficient and effective.

4. Introduction - V • Vector • Vector graphics have geometric objects like lines and curves giving greater flexibility than raster-only formats (JPG, PNG) that store information for each and every pixel of the graphic. • In general vector formats can include raster images as well as geometric objects and combine them with vector information.

5. Introduction - G • Graphics • Most existing XML grammars represent textual information or raw data and typically provide simply rudimentary graphical capabilities which are often less capable than the HTML ‘img’ element. • SVG provides a rich, structured description of vector and mixed vector/raster graphics allowing it to be used in a stand-along function or as an XML namespace with other grammars.

6. Introduction • So what is SVG • SVG is a web format that allows content developers to create two-dimensional graphics in a standard way by using an XML grammar. • Why use SVG • Size Matters • File Size • Resizing • It’s still XML • Versatile • Static Graphics Rendering • Self-contained Applications • Server-based applications • Intuitive

7. SVG History Minor editorial changes including some rewording to improve clarity and to add an additional author. Mobile SVG Profiles: SVG Tiny and SVG Basic standards are defined – Tiny for cell phones SVG Basic for PDAs Establish design Goals for SVG and provide a set of high-level objectives for SVG, which act as the criteria by which proposed features are judged. SVG 11/98 SVG 1.1 1/03 1995-1996 | 1997-1998 |1999-2000 | 2001-2002 | 2003-2004 | 2005-2006 | 2007-2008 | 2009-2010 SVG 1.0 9/01 SVG 1.2 Tiny 12/08 No DTD for SVG 1.2 thus do not need to specify the DOCTYPE for an SVG 1.2 document, rather it is identified by the SVG namespace along with the versioning attributes Finalize official URL for SVG 1.0 and associated DTD recommendations, editorial changes including an explicit note about the necessity to include the attribute xmlns[:prefix]="http://www.w3.org/2000/svg" attribute declaration so that all SVG elements can be identified as belonging to the SVG namespace and for compliance with the "Namespaces in XML" Recommendation.

8. Language • SVG has four different DTDs • Original version of SVG, 1.0 • Full version - SVG 1.1 • Basic version – SVGB • Tiny version – SVGT • SVG documents are required to have a root element - the svg element • SVG content • Three fundamental types of graphical objects that can be used within SVG drawings: • Primitive vector shapes (lines, circles, squares, etc) • Vector text – text rendered in a mathematical font such as true type fonts. This is done using cascading style sheet attributes. • External bitmap images

9. Elements Element—The element type name can be thought of as the tag name. It determines how the tag will function and consists of one empty (also known as “closed”) tag or two enclosing tags (astart tag and an end tag).• Attribute—“Attribute” describes an element by giving further infor

10. Attributes

11. Attributes

12. Namespace SVG Namespace: http://www.w3.org/2000/svg Public Identifier for SVG 1.1: PUBLIC “-//W3C//DTD SVG 1.1//EN” System Identifier for SVG 1.1 Recommendation: http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd

13. Vocabulary As you are likely well aware, HTML is known for its tolerance for tag variation. This reality makes for an abrupt adjustment to SVG, which has a “zero tolerance” ordinance for such variation. Whereas HTML allows both upper-and lowercase characters to define its element names (such as accepting both <p> and <P> to signify a paragraph break), SVG allows no such flexibility. All SVG tags are case sensitive. Aside from keeping an XML or SVG document well formed, these documents should be v a l i d . One way to make a document valid XML is to have it adhere to a DTD ( D o c u m e n t Typ e D e f i n i t i o n ).

14. As SVG is an application of XML, the rules that hold true for XML's syntax hold true for SVG. The three most basic rules of XML and SVG syntax (to ensure well-formed documents) are as follows:1 . All tags are case sensitive. (That is, if you designate <aa> as an element, <aA> would refer to a different element.2. All tags must be closed. (That is, tags must follow one of the two conventions: <tag>. . . </tag> or <tag/>.3. All attribute values must be contained in quotations. Features

15. Data Types

16. Raster vs. Vector Graphics • All modern displays are raster-oriented • Difference between raster-only and vector graphics is where they are rasterized; vector graphics are rasterized on the client side and raster-0nly graphics are rasterized on the server. • SVG gives control over the rasterization process – to allow anti-aliased graphics • SVG provides client-siode raster filter effects so that moving to a vector format does not mean the loss of effects such as drop shadows

17. Closing comments Conclusion

18. References http://www.xul.fr/en-xml-svg.html http://www.w3.org/Graphics/SVG/ http://www.w3.org/TR/SVG/ http://www.xml.com/pub/a/2001/03/21/svg.html http://www.ibm.com/developerworks/xml/library/x-graphxmlsvg/ Book: http://www.amazon.com/Sams-Teach-Yourself-SVG-Hours/dp/0672322900/ref=sr_1_5?ie=UTF8&s=books&qid=1276178520&sr=1-5 http://www.gca.org/papers/xmleurope2000/papers/s34-03.html Not sure about how helpful this link will be http://www.cwu.edu/~gellenbe/docs/xmltouml/xmltechnicalreport.html  SVG example at w3schools – looks pretty good http://www.w3schools.com/svg/svg_example.asp