Scalable Vector Graphics (SVG)

18
Scalable Vector Graphics (SVG) 2d Graphics in XML

description

Scalable Vector Graphics (SVG). 2d 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 - PowerPoint PPT Presentation

Transcript of Scalable Vector Graphics (SVG)

Page 1: Scalable Vector Graphics (SVG)

Scalable Vector Graphics (SVG)2d Graphics in XML

Page 2: Scalable Vector Graphics (SVG)

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

Page 3: Scalable Vector Graphics (SVG)

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.

Page 4: Scalable Vector Graphics (SVG)

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.

Page 5: Scalable Vector Graphics (SVG)

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.

Page 6: Scalable Vector Graphics (SVG)

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

Page 7: Scalable Vector Graphics (SVG)

SVG History

1995-1996 | 1997-1998 | 1999-2000 | 2001-2002 | 2003-2004 | 2005-2006 | 2007-2008 | 2009-2010

SVG 11/98

SVG 1.0 9/01

SVG 1.1 1/03

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.

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.

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

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

Page 8: Scalable Vector Graphics (SVG)

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

Page 9: Scalable Vector Graphics (SVG)

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

Page 10: Scalable Vector Graphics (SVG)

AttributesAttribute 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 CSS2 compatible specification for a color in the sRGB 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 kHz

<FuncIRI> 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

Page 11: Scalable Vector Graphics (SVG)

AttributesAttribute Description

<list-of-Ts> A list that consists of a separated sequence of values.

<name> A string name

<number> Real numbers

<number-optional-number>

A pair of numbers where the second number is optional

<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

Page 12: Scalable Vector Graphics (SVG)

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

Page 13: Scalable Vector Graphics (SVG)

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

Page 14: Scalable Vector Graphics (SVG)

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

Page 15: Scalable Vector Graphics (SVG)

Data Types Data Type DescriptionNumber 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 CSS2 compatible specification for a color in the sRGB color space, and system colors. Additionally, SVGB and SVGT support 16 original color keywords from XHTML and do not support X11 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)

Page 16: Scalable Vector Graphics (SVG)

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

Page 17: Scalable Vector Graphics (SVG)

Conclusion

Closing comments

Page 18: Scalable Vector Graphics (SVG)

Referenceshttp://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 behttp://www.cwu.edu/~gellenbe/docs/xmltouml/xmltechnicalreport.html SVG example at w3schools – looks pretty goodhttp://www.w3schools.com/svg/svg_example.asp