Scalable Vector Graphics (SVG)

Scalable Vector Graphics (SVG)

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 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 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 Its 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. SVG 1.1 1/03 Mobile SVG Profiles: SVG Tiny and SVG Basic standards are defined Tiny for cell phones 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]=" vg" 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 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 ElementThe 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). AttributeAttribute describes an element by giving further infor Attributes Attribute Description Angles are specified in one of two ways. As the value of a property in a stylesheet or as an SVG attribute. A basic type that is a sequence of zero or more characters in the production for a character as defined in XML 1.0 A CSS2 compatible specification for a color in the sRGB color space. A length in the user coordinate system that is the given distance form the origin of the user coordinate system along the relevant axis. Used with aural properties. units such as Hz or kHz Funcational notation for an IRI:

An ICC color specification given by a name which references a color-profile element and one or more color component values. Specified as an optional sign character followed by one or more digits An Internationalized Resource Identifier A distance measurement, given as a number along with a unit Attributes Attribute

Description A list that consists of a separated sequence of values. A string name Real numbers A pair of numbers where the second number is optional

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 specified as a number followed by %

Public Identifier for SVG 1.1: PUBLIC -//W3C//DTD SVG 1.1//EN System Identifier for SVG 1.1 Recommendation: 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


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 as an element, would refer to a different element.2. All tags must be closed. (That is, tags must follow one of the two conventions: . . . or .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 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 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) 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 Conclusion Closing comments

References Book: oks&qid=1276178520&sr=1-5 Not sure about how helpful this link will be SVG example at w3schools looks pretty good

Recently Viewed Presentations

  • The Challenge: To Create More Value in All Negotiations

    The Challenge: To Create More Value in All Negotiations

    Source: courtesy Dave Wheeler, posted at "Employees who don't feel significant rarely make significant contributions." —Mark Sanborn 2 "Little" >> "Big" "THANK YOU" CEO Doug Conant sent 30,000 handwritten 'Thank you' notes to employees during the 10 years [approx...
  • Multimedia Learning Theory - Mr. Gober

    Multimedia Learning Theory - Mr. Gober

    People learn better from a multimedia lesson when they know the names and characteristics of the main concepts. Modality Principle People learn better from graphics and narrations than from animation and on-screen text.
  • Erasmus+ International Credit Mobility Information for Visiting Students

    Erasmus+ International Credit Mobility Information for Visiting Students

    Register via your MyEd portal (Most students will have done this before they arrived) Confirm attendance. Complete any admission criteria as required by your College. 2. Opening a Bank Account in the UK.
  • THANK YOU!! - King County, Washington

    THANK YOU!! - King County, Washington

    country doctors/carolyn downs. healthpoint11,077. ... •marty burns •rebecca janeczko •sara michael •truong hoang. the exchange. health care authority. dshs. nm. health option plans. thank you for your continued support!! author: pie, daphne


    Augmentative-Alternative Communication (AAC)-Speech Generating Devices (SGD)- Low/Mid Tech-Big Mack, Step-by-Step, Cheap Talk, Tech Speak, Go Talk High Tech-Dynamic display devices-Tango, Dynavox, Spring Board, Vantage, Eye-gaze system Access-to curricular tools-hardware and software-for writing, reading, math, learning strategies- LoTTIE Kit ...
  • Workday Financials - Claremont Colleges

    Workday Financials - Claremont Colleges

    Workday Ambassador Activities. Activities revolve primarily around communication and supportand include: Forwarding Workday specific communication to colleagues and direct . reports. Talking informally with colleagues about the Workday project in a positive . manner
  • Intro Tables Clef primaire Requtes simples Requtes avances

    Intro Tables Clef primaire Requtes simples Requtes avances

  • Product Marketing - Digital Transform

    Product Marketing - Digital Transform

    Key Strategy for improving efficiencies: WebChat to complete: Social and Web to communicate the lesson learnt, change the process to remove repetition of the issue. THE SOLUTION IS DESIGNED TO EVOLVE THROUGH AGENT ENGAGEMENT.