Scalable Vector Graphics ‒ an introduction
Date: August 21, 2003
Author: Cameron McCormack
Introduction to SVG
About SVG
-
What is SVG?
- Language for specifying vector graphics
-
Why should we bother learning it?
- Vector graphics can scale without loss of quality
- Files smaller than equivalent raster images
-
What do SVG documents comprise?
- Animation and interactivity
SVG document structure
- The structure of an SVG document
- All elements in the SVG namespace
- http://www.w3.org/2000/svg
- Graphics elements within are rendered from first to last ("painter's model")
-
Grouping elements
- The <g> element can group other graphics elements together
- Used for common styling properties, transformations, ...
- The previous example using groups
-
Reusability
- Elements or groups of elements can be defined for reuse in the SVG
document by placing them in a <defs> section
- Instantiate these definitions with the <use> element
- Can instantiate any SVG fragment, not just those defined in the
current document's <defs> element
- Our example using <use> elements
Geometric objects
Basic shapes
-
Basic shapes: rect
- The <rect> element creates a rectangle
- Attributes x, y, width, height specify dimensions
- Optional attributes rx, ry specify radius of rounded corners
-
Basic shapes: circle
- The <circle> element creates a circle
- Attributes cx, cy specify the center of the circle
- Attribute r specifies the radius of the circle
-
Basic shapes: ellipse
- The <ellipse> element is like the <circle> element, but more general
- Attributes cx and cy specify the center of the ellipse
- Attributes rx and ry specify the x-radius and y-radius, respectively
-
Basic shapes: line, polyline and polygon
- The <line> element is a special case of a polyline
- Attributes x1, y1, x2, y2 specify the start and end co-ordinates of the line
- The <polyline> element defines a set of connected straight line segments
- Attribute points is a space or comma separated list of coordinates of points that make up the polyline
- The <polygon> element is the same as polyline, except it defines a closed shape
- Examples of lines, polylines and polygons
Paths
- Paths
- A path is made up of a series of commands
- moveto (M, m), lineto (L, l, H, h, V, v), closepath (Z, z), cubic Bézier (C, c, S, s), quadratic Bézier (Q, q, T, t), elliptical arc (A, a)
- Commands are written in the d attribute of the <path> element
- Each command (except closepath) takes numerical parameters
Text
-
Text
- Text can be placed in an SVG document with the <text> element
- Attributes x, y are used to specify the position of the text
- <tspan> element can be used for substrings with different formatting
- Examples of text and tspan
-
tref
- Text content can be defined in a <defs> section and referenced with
a <tref> element
- Useful if the same text is used in multiple places
- Attribute xlink:href is a URI that refers to the <text> element
that was predefined
-
Text placement
- For LOTEs different text progression directions are possible
- right to left, top to bottom
- Bidirectional text also supported for mixed-language text (e.g. English and Arabic)
- Text can be placed on a path
- Examples of text placement
-
Embedding fonts
- Fonts can be embedded in SVG documents using the <font> element
- Tools exist to convert TrueType/postscript/... fonts to SVG fonts
- Need only embed the glyphs which you need
- Example of font embedding
Styling
-
Styling
- Each graphical object has three phases of painting
- Each property is specified with presentation attributes or CSS properties, but presentation attributes
are preferred over style attributes
- fill, stroke, stroke-width, fill-opacity, ...
-
These two objects are the same:
-
Styling with CSS
- A <style> element containing CSS can be used
- Normal CSS cascading rules apply
- Example of using CSS styling
-
Important styling properties
-
CSS2/XSL properties
- Font properties: font, font-family, font-size, font-style, font-weight
- Text properties: direction, text-decoration, letter-spacing, word-spacing
- Other propertiess: cursor, display, visibility
-
SVG properties
- Paint properties: fill, fill-opacity, marker-start, marker-mid, marker-end, stroke, stroke-dasharray, stroke-opacity, stroke-width
- Text properties: baseline-shift, kerning, text-anchor, writing-mode
Transformations
-
Transformations
- Any affine transformation can be performed on a graphical object
- Translation, rotation, scaling, skews
- Transformations can be composed
- Specified in the transform attribute of any graphical element
- Example of transformations
Filters
-
Filters
- Images produced from the SVG can be filtered
- Numerous filter effects: feSpotLight, feComposite, feGaussianBlur, feTurbulance
- Filter primitives can be joined together to make complex filters
- Define filters in the <defs> section with the <filter> element
Animation and interactivity
-
Animation
- Many properties of graphics elements can be animated
- SMIL animate elements are used to specify the animation
- Animatable properties: lengths, colours, transformations, ...
- Animation specified with a start time, duration, start and end value
- SVG browser linearly interpolates values between start and end time
-
Scripting and interactivity
- ECMAScript can be used to manipulate the document
- Mouse and keyboard events can be captured
- <script> element used to include script
- Event handler attributes (onclick, onmouseout, ...) available for graphic elements
SVG in web pages
-
Using SVG in web pages
- Can use <object>, <embed> or <iframe>
- <object> would be best, but <iframe> most supported
- SVG MIME type: image/svg+xml
SVG software
-
SVG viewers
- Adobe SVG Viewer (plugin: IE for Windows and MacOS, Mozilla 1.0 for Windows and Linux)
- Corel SVG Viewer (plugin: IE for Windows)
- Batik (standalone Java-based browser)
- Mozilla CVS native SVG rendering
The future
-
The future of SVG
- SVG 1.2 working draft out
- RCC (Rendering Custom Content)
- Adobe SVG Viewer 6.0 technology preview supports these experimental features
-
My research
- Adding one-way constraints to SVG
- Expression-based attribute values
- Template-like syntax for RCC
- Develop authoring tool for SVG with constraints
Further information