Scalable Vector Graphics SVG 2 d Graphics in

Scalable Vector Graphics (SVG) 2 d Graphics in XML

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

Introduction - S • 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.

Introduction - V • 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.

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.

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

SVG History 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 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 SVG 1. 1 phones 1/03 SVG Basic for PDAs 1995 -1996 | 1997 -1998 | 1999 -2000 | 2001 -2002 | 2003 -2004 | 2005 -2006 | 2007 -2008 | 2009 -2010 Finalize official URL for SVG 1. 0 and SVG 1. 0 9/01 associated DTD recommendations, editorial changes including an explicit note about the necessity to include the attribute xmlns[: prefix]="http: //www. w 3. 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. No DTD for SVG 1. 2 thus do not need to Tiny specify the DOCTYPE 12/08 for an SVG 1. 2 document, rather it is identified by the SVG namespace along with the versioning attributes

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

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

Attributes Attribute Description <angle> Angles are specified in one of two ways. As the value of a property in a stylesheet or as an SVG attribute. <anything> A basic type that is a sequence of zero or more characters in the production for a character as defined in XML 1. 0 <color> A CSS 2 compatible specification for a color in the s. RGB color space. <coordinate > A length in the user coordinate system that is the given distance form the origin of the user coordinate system along the relevant axis. <frequency> Used with aural properties. <number> units such as Hz or k. Hz <Func. IRI> Funcational notation for an IRI: <iccolor> An ICC color specification given by a name which references a ‘color-profile’ element and one or more color component values. <integer> Specified as an optional sign character followed by one or more digits <IRI> An Internationalized Resource Identifier <length> A distance measurement, given as a number along with a unit

Attributes Attribute Description <list-of-Ts> A list that consists of a separated sequence of values. <name> A string name <number> Real numbers <number-optional A pair of numbers where the second number is optional -number> <paint> The values for properties “fill” and “stroke” are specifications of the type of paint to use when filing or stroking a given graphics element <percentage> Percentage specified as a number followed by % <time> Time value followed by a time unit identifier <transform-list> Used to specify a list of coordinate system transformations. <XML-Name> An XML name

Namespace SVG Namespace: http: //www. w 3. org/2000/svg Public Identifier for SVG 1. 1: PUBLIC “-//W 3 C//DTD SVG 1. 1//EN” System Identifier for SVG 1. 1 Recommendation: http: //www. w 3. org/Graphics/SVG/1. 1/DTD/svg 11. dtd

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

Features • 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, <a. A> 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.

Data Types Data Type Description Number SVGT and SVGB support fixed point numbers with a range of -32, 767. 9999 to +32, 767. 9999 or the scientific notation equivalent Length User units are supported with the exception that ‘width’ and ‘height’ attributes on the outermost ‘SVG’ element can specify values in any of the following CSS units: in, cm, mm, pt, pc, and %. SVGB supports lengths in user coordinate space and in CSS units Coordinate SVGT and SVGB support the coordinate date type, represented with a <length> value. List of XXX (Where XXX represents a value of some type): SVGT and SVGB support the list specification. Angle SVGT only supports angles if specified with no CSS unit identifiers (which means all angles are in degrees). SVGB supports angles with CSS unit identifiers. Color SVGT and SVGB support <color> in the CSS 2 compatible specification for a color in the s. RGB color space, and system colors. Additionally, SVGB and SVGT support 16 original color keywords from XHTML and do not support X 11 colors. SVGB also allows optional support of ICC color profiles. Paint SVGB supports paint specification for fill and stroke operations, as well as linear and radial gradients. SVGT does not support the more general notation of paint specification and thus only supports solid color fills and strokes Percentage SVGB supports percentages. SVGT does not support percentage values except for the ‘width’ and ‘height’ attributes on the outermost ‘SVG’ element Transform List SVGB and SVGT support transform lists URI SVGB and SVGT support the URI data type Frequency SVGB and SVGT do not support frequency value Time SVGB and SVGT support time values, with unit identifiers (ms, s)

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-0 nly 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

Conclusion Closing comments

References http: //www. xul. fr/en-xml-svg. html http: //www. w 3. org/Graphics/SVG/ http: //www. w 3. 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-SVGHours/dp/0672322900/ref=sr_1_5? ie=UTF 8&s=books&qid=1276178520&sr=1 -5 http: //www. gca. org/papers/xmleurope 2000/papers/s 34 -03. html Not sure about how helpful this link will be http: //www. cwu. edu/~gellenbe/docs/xmltouml/xmltechnicalreport. html SVG example at w 3 schools – looks pretty good http: //www. w 3 schools. com/svg_example. asp