Scalable Vector Graphics (SVG)
2d Graphics in XML
Scalable Vector Graphics (SVG)
•
Introduction
•
History
•
Language
•
Features
•
•
Demonstration
Conclusion
Introduction - S
• Scalable
• Scalable Vector Graphics and the Web
Introduction - V
• Vector
Introduction - G
• Graphics
Introduction
• So what is SVG
• Why use SVG
• It’s still XML
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]="http://www.w3.org/2000/s
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
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 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
Attributes
Attribute
Description
<list-of-Ts>
A list that consists of a separated sequence of values.
<name>
A string name
<number>
Real numbers
<numberoptional-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
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
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,
<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.
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 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
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-SVGHours/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