Scalable Vector Graphics (SVG)

Release: 2010-02-27
Jump to Web Standards Articles TOC

Page 1, , Page 3

Structured Images

 Many individuals and companies wanted a way to provide a range of image features based on the experience and success of HTML and XML. After many designed and submitted proposals, the W3C created the SVG Working Group and with feedback from the community developed the Scalable Vector Graphics specification (SVG).

SVG 1.0 became a full W3C Recommendation on the 4th September 2001. It featured support for vector (line drawing) basic shapes such as rectangles, lines, circles, ellipses, ploylines and polygons. Complex shapes were defined as paths. Painting shapes with fills and outlining them with stokes like drawing or painting. Text, font definitions, metadata, gradients, masks, compositions, transparencies and filter effects were also supported. Parts of the image could be clickable as hyperlinks or could refer to internal or external resources by utilising the XLink language. Even raster (pixelled) images could be included.

Dynamic images are supported via animation inspired by the Synchronized Multimedia Integration Language (SMIL (pronounced smile)). Some presentation could be optionally applied by Cascade StyleSheets (CSS) but SVG itself supports presentational attributes inspired by CSS.

Image manipulation could be done by the SVG Document Object Model (DOM) through scripting languages such as JavaScript or even by compiled languages such as Java.

 As SVG is an XML language, rather than a binary or primarily scripted bitmap image, all parts of the image have semantic (meaningful) structure. Also the image format is download friendly, search engine friendly and accessible for those who have trouble seeing graphics.

These images can be designed in graphical applications such as Adobe Illustrator, Corel Draw, OpenOffice.org Draw and Inkscape as well as be written and edited in any XML editor or even just a text editor. SVG images can easily be embedded in other XML languages such as native XHTML or be referred to such as using HTML's object or iframe elements.

Also a subset could be supported and used in environments with limited processor speeds, limited memory, limited drive space and limited bandwidth such as mobile and embedded devices.

 To that end, not long after, the specification was slightly updated to add support for mobile profiles that officially supported various subsets of the image language. SVG 1.1 became a W3C Recommendation on the 14th January 2003.

99% of SVG 1.1 Full is exactly the same as SVG 1.0. The mobile profiles were SVG Tiny providing a small subset removing support for scripting, CSS, filter effects, gradients, masks, composites and full font definitions. This allowed basic, static and animated images in devices with very limited resources. SVG Basic was a superset of SVG Tiny allowing support for gradients, some filter effects, optional CSS, scripting and some other features for mobile and embedded devices with more resources.

 Many web browsers including Mozilla 1.8 and higher based such as Mozilla Firefox 1.5 and higher, Apple WebKit 523 and higher based such as Safari 3 and higher and Safari for iPhone and iPod Touch 2.1 and higher, various versions of Konqueror (KHTML based) all have partial support for SVG 1.1 Full. Presto 1.1 based such as Opera 8 supported SVG 1.1 Tiny and has since added support for the rest of SVG 1.1.

 After field testing the mobile profiles of SVG they found that even low resourced devices are capable of handling a little more than SVG 1.1 Tiny. So that profile has been updated as SVG 1.2 Tiny and is also a W3C Recommendation as of 22nd December 2008. This new Tiny profile is more than just a profile – it is the core of SVG 1.2 and is a superset of SVG 1.1 Tiny.

SVG 1.2 Tiny adds support for gradients, transparencies and scripting with support from the new concept of a Micro DOM. Plus it introduces support for including audio and video, improved events with the XML Events language and improved accessibility with ARIA 1.0 (Accessible Rich Internet Applications from the W3C Web Accessibility Initiative). While old HTML and XHTML that were for hypertext documents are now upgrading to HTML 5 for hypertext documents and web applications; SVG 1.2 upgrades from just images now to images and image based web applications.

Presto 1.2 and higher such as Opera 9 and higher has support for parts of SVG 1.2 Tiny.

 Features beyond SVG 1.2 Tiny are to be provided as modules to be added on top of SVG 1.2 Tiny.

 The older SVG versions had XML Doctypes for Document Type Definition (DTD) validation:

  • SVG 1.0: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
  • SVG 1.1: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  • SVG 1.1 Basic: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">
  • SVG 1.1 Tiny: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">

Due to the fact that DTD support is optional in XML and has poor types and is very restrictive in syntax, most environments including web browsers have insufficient or no support for DTD, making Doctypes useless. Documents should not hard code a reference to a validation document. So SVG 1.2 uses Relax NG Schemas for validation.

 Images in SVG form usually have the file extension .svg and SVG documents MIME Media Type is image/svg+xml.

SVG Tiny

 SVG images are XML documents and so it is best to have an XML Declaration at the top stating the XML version and usually stating the UTF-8 character encoding.

Images structured by SVG are drawn and painted on the canvas created by SVG's Document Element: the svg element.

Element Name: svg.

Category: Document Element, Root Element, WebCanvas Element.

Content Model: Zero or more a, animate, animateColor, animateMotion, animateTransform, animation, audio, circle, defs, desc, discard, ellipse, font, font-face, foreignObject, g, handler, image, line, linearGradient, ev:listener, metadata, path, polygon, polyline, prefetch, radialGradient, rect, script, set, solidColor, switch, text, textArea, title, use, video elements.

Attributes: baseProfile, contentScriptType, contentStyleType,, height, preserveAspectRatio, version, width, viewBox, zoomAndPan, Core Attributes.

Element In SVG: 1.0, 1.1 Tiny, 1.1 Basic, 1.1 Full, 1.2 Tiny.

 To identify that the main elements and attributes are from the SVG vocabulary you declare the SVG XML Namespace using the special namespace attribute usually in the Document Element: <svg xmlns="http://www.w3.org/2000/svg"></svg>.

SVG itself is a compound language making use of not just the SVG vocabulary but also at least the XLink vocabulary. But the SVG vocabulary is usually declared as the default.

But if SVG is included in another XML language (such as native XHTML) then that language usually would be the default vocabulary and so SVG would need to be prefixed in order to uniquely identify that an element or attribute is from the SVG vocabulary rather than of the other vocabulary. For instance XHTML, SVG and SMIL all have an element called a, used for hyperlinking. The typical prefix for SVG is svg as:

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xml:lang="en" dir="ltr">
  <head>
    <title>XHTML webpage with an SVG image</title>
  </head>
  <body>
    <h1>XHTML webpage with an SVG image</h1>
    <p>
    <  Here is an image
    <  <svg:svg><!-- SVG image content --></svg:svg>
    </p>
  </body>
</html>
Figure 1: An SVG image embedded in an XHTML webpage

Sometimes as all the SVG code is kept within the svg element and so would be like an SVG island within the sea of XHTML or another XML language then you may want to have the SVG Namespace within the svg element and so you will not need to prefix the elements or attributes.

 For identifying the version of SVG as a hint to the SVG User Agent such as a viewer or player or editor you can use the version attribute on the svg element. In version 1.0 the value had to be 1.0 and in version 1.1 it had to be 1.1. But in SVG 1.2 Tiny it is preferred to be 1.2 but may be 1.0 or 1.1.

The baseProfile attribute (since version 1.1) can be a hint as well, for identifying which profile features the image expects the User Agent to at least support. Its value may be full to expect everything in the SVG world, basic to expect SVG 1.1 Basic features at least, preferably tiny to only expect the core feature support. Or it could be none or your own profile name. If the attribute is omitted (not used) then it is equivalent to the baseProfile="none".

These two attributes are only hints in practical SVG implementations as most SVG environments have a single interpretation and just updates support for more and more features and processing in newer User Agent versions.

As SVG images are to be scalable, so they can be resized without distorting the image, the viewBox attribute provides the image coordinate dimensions in the canvas that will help with placing and transforming and animating graphical components of the image. The value is a space separated list of four numbers: x and y numbers for the start (such as the top left in left-to-right character and top-to-bottom paragraph writing systems) then the width and height numbers.

Actual width and height attributes may also be used stating the physical dimensions of the canvas. Their values are a number and optionally followed by a unit such as px (pixels), % (percentages) or cm (centimetres).

In SVG Tiny only the width and height attributes of the svg element can have value units. All other appropriate attributes can only have the values.

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" viewBox="0 0 400 400">
  <rect x="2" y="2" width="200" height="200" fill="blue" stroke="black"/>
</svg>
Figure 2: A simple SVG image

 Image's aspect ratio can be handled using the preserveAspectRatio attribute. This attribute's value is a string containing the x and y axis positioning of the image on the canvas: xMinYMin puts the image directly top left; xMidYMid puts the image center stage; xMaxYMax puts it bottom right. A mixture can be stated such as xMidYMax puts the image center bottom, xMinYMax puts it left bottom. Other values are xMidYMin, xMaxYMin, xMinYMid and xMaxYMid.

Plus the zoomAndPan attribute allows you to disable ( zoomAndPan="disable" ) or enable zooming ( zoomAndPan="magnify" ). User Agents that support zooming should provide an interface to zoom in and out of the image as well as to pan around the zoomed in image.

Core Attributes

 A collection of attributes can be used on any SVG Element.

Providing a unique identifier for an SVG Element is the id attribute. This attribute has been in SVG since version 1.0.

A unique identifier for any XML Element, no matter which XML Vocabulary it is from, is the xml:id attribute. For instance if an SVG image was within an XHTML fragment, within an Atom Feed, an id attribute from Atom would provide uniqueness for Atom, id from XHTML would provide uniqueness for XHTML and id from SVG would provide uniqueness for SVG. The xml:id attribute would provide uniqueness for the whole XML document, spanning all three of the XML Vocabularies Atom, XHTML and SVG. This attribute has been supported in SVG since version 1.2. You cannot use both id and xml:id on the same element as you can only have one ID type attribute on an element. For backwards compatibility use SVG's id attribute when possible. Opera is the only browser to support xml:id in SVG.

Assisting in processing relative links, the xml:base attribute has been in SVG since version 1.0 and can be on any XML Element.

To state the written language of textual information in element content and attribute values such as labels and metadata, the xml:lang attribute can be used on any XML Element. It has been in SVG since version 1.0.

The xml:space attribute can help with specifying if extra spaces, tabs and other whitespace characters are to be preserved for textual content at the XML parser (processor) level. It can be used on any XML Element and has been in SVG since version 1.0.

For more on the xml: prefixed attributes, see the XML: a standard, extensible data format Article.

To help with accessibility of SVG images, the role attribute allows you to define a specific role for the element. Plus the various role specific aria- prefixed attributes and the global ARIA attributes can be used on any SVG Element. These attributes are natively supported by SVG since version 1.2. At least the role attribute can be animated. For more on ARIA (Accessible Rich Internet Applications) see the ARIA accessibly enhancing webpages and web applications Article.

More core attributes from SVG Tiny 1.2 will be mentioned in more detail later but these include the class, about, rel attributes.

Values

 Values of various attributes maybe numerical:

  • Integer: a whole number such as 36 and 4;
  • Number: a floating point or decimal number such as 2.6 and 38.2398;
  • List of numbers: two or more numbers, each separated by a space and or a comma such as 3 48 10 22 and 10, 88, 5, 2, 26, 101;
  • An x number and optional y number: either two numbers separated by a space with the first number for the x axis (horizontal) and the second number for the y axis (vertical). Or just one number representing both x and y axis as the same number. Such as 3 8 and 4;

Groups

Element Name: g.

Category: Grouping.

Content Model: Zero or more a, animate, animateColor, animateMotion, animateTransform, animation, audio, circle, defs, desc, discard, ellipse, font, font-face, foreignObject, g, handler, image, line, linearGradient, ev:listener, metadata, path, polygon, polyline, prefetch, radialGradient, rect, script, set, solidColor, switch, text, textArea, title, use, video elements.

Attributes: Conditional Attributes, Core Attributes.

Element In SVG: 1.0, 1.1 Tiny, 1.1 Basic, 1.1 Full, 1.2 Tiny.

 You can group one or more image components to help add semantic (meaningful) structure to the image. This is simply done by using the g element. Groups can also be nested to provide an unlimited depth of sub-groups.

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="400" height="400" viewBox="0 0 400 400">
  <g id="mainGroup">
    <rect x="2" y="2" width="200" height="200" fill="blue" stroke="black"/>
 </g>
</svg>
Figure 3: An group in an image

Title and Descriptions

Element Name: title.

Category: Metadata, Heading.

Content Model: Plain Text.

Attributes: Conditional Attributes, Core Attributes.

Element In SVG: 1.0, 1.1 Tiny, 1.1 Basic, 1.1 Full, 1.2 Tiny.

 

Element Name: desc.

Category: Metadata, Description.

Content Model: Plain Text.

Attributes: Conditional Attributes, Core Attributes.

Element In SVG: 1.0, 1.1 Tiny, 1.1 Basic, 1.1 Full, 1.2 Tiny.

 You can give the entire image, a group or sub-group of graphics components or even individual graphics components a heading and description via the title and desc elements. For the entire image, the title and desc elements would be direct children, and before any other content, of the svg element. The title element would most likely be displayed in the titlebar of a web browser if the SVG image is a standalone image loaded into a web browser (just like the title element within the head element within the html element of an XHTML or HTML document).

 For groups or sub-groups the title and desc elements would be direct children, and before any other content, of the g element. They could also be direct children, and before any other content, of individual graphics components.

The title and desc elements would not be rendered by default but do provide descriptive material that could be available as tooltips and information panes or are alternative content for environments that cannot render graphics and could be spoken aloud by Screen Readers.

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="400" height="400" viewBox="0 0 400 400" xml:lang="en">
  <title>Basic Image</title>
  <desc>An example of a basic SVG Image featuring a rectangle shape.</desc>
  <g id="mainGroup">
    <rect x="2" y="2" width="200" height="200" fill="blue" stroke="black">
      <title>Example of a square</title>
      <desc>A black outlined, blue square, 200 by 200</desc>
    </rect>
  </g>
</svg>
Figure 4: An example of titles and descriptions in images

Stroke, Fill, Colour and Opacity

Graphics components are drawn or painted on the SVG canvas. A set of attributes allows you to specify how the outline of the graphics component is drawn or painted via the collection of stroke attributes.

The colour of the outline of a graphics component is specified by the stroke attribute. Its value is either none (default), inherit or one of these forms:

  • a three digit hexadecimal ( #000 ),
  • a six digit hexadecimal ( #000000 ),
  • a whole number or integer rgb function ( rgb(0, 0, 0) ),
  • a decimal or floating number rgb function ( rgb(0.0%, 0.0%, 0.0%) ),
  • or a colour keyword ( black ).

Colour keywords in SVG Tiny are limited to the sixteen 'HTML/XHTML Colour Keywords' but UserAgents may support the rest of the 'SVG Colour Keywords'.

Changing the size of the outline is done via the stroke-width attribute with inherit or a number length value. A value of zero ( stroke-width="0" ) will not render the outline. The default value is 1. Negative values are not supported.

Ends of lines can be capped using the stroke-linecap attribute. A normal line would have no cap ( stroke-linecap="butt" ). Or a line may have a square cap ( stroke-linecap="square" ) or a rounded cap ( stroke-linecap="round" ). A value of inherit can be used instead.

Corners of graphics components may be slightly altered using the stroke-linejoin attribute. By default corners are a miter (normal pointy corner) and can be specified with stroke-linejoin="miter". For rounded corners you can use stroke-linejoin="round" or for the outer part of the corner to be flat you can use stroke-linejoin="bevel". A value of inherit may be used instead.

When a corner is a miter, you could extend the point beyond the corner using a floating value on the stroke-miterlimit attribute. If the value is is too low based on the angle of the corner then the corner would convert into a bevelled corner. The default is 4. A value of inherit may be used instead. Negative values are not supported.

Outlines or strokes may be a sequence of dashes and gaps rather than a solid line. The use of dashes and gaps and the size of each dash and gap can be specified by the stroke-dasharray attribute. A value of none (default) will provide a solid line instead of dashes and gaps. Otherwise the value is one or more numbers separated by spaces or commas with or without spaces, tabs, new lines before or after the comma. If the value has an odd amount of numbers then the whole value will be duplicated to create an even set of numbers. Such as stroke-dasharray="3, 2, 4" would become stroke-dasharray="3, 2, 4, 3, 2, 4". A value of inherit may be used instead.

Dashes in a dashed outline can start away from the actual start of the outline by using the stroke-dashoffset attribute. Zero ( stroke-dashoffset="0" ) is the default and negative values may be used. A value of inherit could be used instead.

The inside of the graphics component can be painted using the fill attribute. Its value is the same as the stroke attribute: none or inherit or any of the colour formats. Otherwise the default value is black.

In complex shapes it might not be obvious which parts of the inside of the graphics component that is to be painted or filled. An algorithm can be specified by the fill-rule attribute using either the nonzero value (default) or the oddeven value. Instead the inherit value may be used.

Both the outline and the inside of (or the stroke and fill of) the graphics component can have varying degrees of transparency via the set of opacity attributes. The value of opacity based attributes is 0.0 for full transparency through to 1.0 (default) for fully opaque or no transparency. A value of inherit may be used instead.

The opacity attribute is for full graphics component transparency. In SVG 1.2 Tiny the opacity attribute can only be used on the image element (see later) and the inherit value is equivalent to the default value.

For outline and inside specific transparencies you can use (even in SVG 1.2 Tiny) stroke-opacity and fill-opacity attributes which have the same values as opacity.

Opacity based attributes were not supported in SVG 1.1 Tiny and were in 1.0, 1.1 Basic and Full but are now as standard in SVG 1.2 Tiny.

Element Name: solidColor.

Category: Color.

Content Model: Zero or more animate, animateColor, animateMotion, animateTransform, desc, discard, handler, metadata, set, switch, title elements.

Attributes: Core Attributes.

Element In SVG: 1.0, 1.1 Tiny, 1.1 Basic, 1.1 Full, 1.2 Tiny.

 A solid colour, optionally with opacity, that can be referenced and used for the fill or stroke of one or more graphics components and text can be done using the solidColor element within a defs element (see later). The attributes are an id or xml:id, solid-color, has a colour value, and solid-opacity takes an opacity value as: <solidColor id="mySolidColour" solid-color="#0000ff" solid-opacity="0.4"/>.

Then a graphics component or text can reuse this by referring to it by the url() function in for instance the fill attribute: fill="url(#mySolidColour)".

All these attributes can be altered by animation.

Basic Shapes

SVG provides a collection of basic shapes to easily construct typical graphics components.

Rectangles

Element Name: rect.

Category: Basic Shape.

Content Model: Zero or more animate, animateColor, animateMotion, animateTransform, desc, discard, handler, metadata, set, switch, title elements.

Attributes: height, rx, ry, transform, width, x, y, Conditional Attributes, Core Attributes.

Element In SVG: 1.0, 1.1 Tiny, 1.1 Basic, 1.1 Full, 1.2 Tiny.

Rectangles and squares are defined using the rect element with the number values for x and y attributes specifying the location of the top left (or before start) of the rectangle and the width and height attributes specifying the dimensions of the rectangle. Zero ( x="0" or y="0" ) is the default of these attributes. If either width or height is zero ( width="0" or height="0" ) then the rectangle is not rendered.

To provide rounded corners for rectangles and squares you use numbered values for the rx and ry attributes. If one of them is not specified then that unspecified attribute has the same value as the one that is specified. If the rx value is greater than the width of the rectangle then the value will become half of the rectangle's width. Similar for the ry value and the height of the rectangle.

These attributes can be altered by animation.

<rect x="2" y="2" width="200" height="200" fill="none" stroke="black"/>
<rect x="2" y="203" width="200" height="150" rx="10" ry="10" fill="blue" stroke="red" fill-opacity="0.75"/>
Figure 5: An example of a square and a round cornered rectangle

Lines

Element Name: line.

Category: Basic Shape.

Content Model: Zero or more animate, animateColor, animateMotion, animateTransform, desc, discard, handler, metadata, set, switch, title elements.

Attributes: transform, x1, x2, y1, y2, Conditional Attributes, Core Attributes.

Element In SVG: 1.0, 1.1 Tiny, 1.1 Basic, 1.1 Full, 1.2 Tiny.

Lines are drawn with the line element with numbered values for x1 and y1 stating the start of the line and x2 and y2 stating the end of the line. Zero is the default of these attributes. These attributes can be altered by animation. Lines do not have an inside and so do not use any of the fill based attributes.

<line x1="2" y1="2" x2="150" y2="150"/>
Figure 6: A diagonal line

Circles

Element Name: circle.

Category: Basic Shape.

Content Model: Zero or more animate, animateColor, animateMotion, animateTransform, desc, discard, handler, metadata, set, switch, title elements.

Attributes: cx, cy, r, transform, Conditional Attributes, Core Attributes.

Element In SVG: 1.0, 1.1 Tiny, 1.1 Basic, 1.1 Full, 1.2 Tiny.

Circles can be set using the circle element with the center via the cx and cy attributes and its radius via the r attribute. All these attributes have zero as their default and the circle will not render if the r attribute is zero ( r="0" ). Negative values are not supported for the r attribute. These attributes can be altered by animation.

<circle cx="150" cy="150" r="50" fill="#0000ff" stroke="#000000" stroke-width="2"/>
Figure 7: A black outlined, blue circle

Ellipses

Element Name: ellipse.

Category: Basic Shape.

Content Model: Zero or more animate, animateColor, animateMotion, animateTransform, desc, discard, handler, metadata, set, switch, title elements.

Attributes: cx, cy, rx, ry, transform, Conditional Attributes, Core Attributes.

Element In SVG: 1.0, 1.1 Tiny, 1.1 Basic, 1.1 Full, 1.2 Tiny.

Ellipses are created via the ellipse element with cx and cy as the center and rx and ry as the radius. All these attributes have zero as their default and the ellipse will not be rendered if either the rx or ry attributes are zero. These attributes can be altered by animation.

<ellipse cx="150" cy="150" rx="60" ry="40" fill="none" stroke="blue"/>
Figure 8: An ellipse

Polygons

Element Name: polygon.

Category: Basic Shape.

Content Model: Zero or more animate, animateColor, animateMotion, animateTransform, desc, discard, handler, metadata, set, switch, title elements.

Attributes: points, transform, Conditional Attributes, Core Attributes.

Element In SVG: 1.0, 1.1 Tiny, 1.1 Basic, 1.1 Full, 1.2 Tiny.

Polygons are usually closed shapes and are defined via the polygon element with the points attribute. The value of the points attribute can be an empty value ( points="" ) (default) which will not render the polygon. Or the points value is a space, tab, new line separated sequence of a comma separated pair of integer or floating point numbers as a coordinate point. Animation can alter the points attribute.

<polygon fill="yellow" stroke="blue" points="129,75 148,161 238,161 166,215 192,301 119,250 46,301 72,215 0,161 90,161"/>
Figure 9: A polygon of a star

Polylines

Element Name: polyline.

Category: Basic Shape.

Content Model: Zero or more animate, animateColor, animateMotion, animateTransform, desc, discard, handler, metadata, set, switch, title elements.

Attributes: points, transform, Conditional Attributes, Core Attributes.

Element In SVG: 1.0, 1.1 Tiny, 1.1 Basic, 1.1 Full, 1.2 Tiny.

Polylines are usually open shapes (the start and end of the shape do not meet) and are defined via the polyline element with the points attribute. The value of the points attribute is the same as the one for the polygon element.

<polyline fill="none" stroke="blue" points="0,395 20,395 20,320 50,320 50,295 80,395 80,250 120,250 120,395 130,395 130,347 160,347 160,395 190,295 190,109 214,109 214,395 250,395"/>
Figure 10: A polyline of a basic cityscape

Paths

Element Name: path.

Category: Complex Shape.

Content Model: Zero or more animate, animateColor, animateMotion, animateTransform, desc, discard, handler, metadata, set, switch, title elements.

Attributes: d, pathLength, transform, Conditional Attributes, Core Attributes.

Element In SVG: 1.0, 1.1 Tiny, 1.1 Basic, 1.1 Full, 1.2 Tiny.

More complex shapes can be drawn and painted using the path element. The pathLength attribute and its number value may limit the length of the path and effects the coordinate and stroke calculations.

 The d attribute can be the empty string (default) or a string of space, tab, new line separated letter commands and coordinate numbers. Each letter command is followed by some numbers as a coordinate. Coordinates that are after letter commands that are uppercase are absolute coordinates and those that are after lowercase letter commands are relative coordinates from the previous point in the path. If two or more commands and their coordinates are the same command in a row such as multiple lines then you can omit the second and so duplicate command letters.

The following letter commands are:

  • Moveto: M or m. Moves the virtual pen or pencil to a point without drawing a line or curve. The coordinates are a pair of numbers as the x and y of the point. A relative moveto at the start of a path will be handled as an absolute moveto. If there are multiple moveto points in a row then only the first pair is considered the moveto and the rest are considered lineto commands.
  • Standard Lineto: L or l. Moves the virtual pen or pencil to a point and draws a line. The coordinates are a pair of numbers as the x and y of the point. If there are multiple lineto points in a row then a polyline is drawn
  • Horizontal Lineto: H or h. Moves the virtual pen or pencil to a point and draws a horizontal line. The coordinate is a single number as the x of the point.
  • Vertical Lineto: V or v. Moves the virtual pen or pencil to a point and draws a vertical line. The coordinate is a single number as the y of the point.
  • Cubic Bézier Curveto: C or c. Draws a Cubic Bézier Curve. The first coordinates are a pair of numbers as the x and y of the start of the curve after a line, the second pair is the end of the curve and the third pair is the end of the line after the curve. If there are multiple Cubic Bézier Curve points in a row then a polybézier is drawn.
  • Smooth Cubic Bézier Curveto: S or s. Draws a Smooth Cubic Bézier Curve. The first coordinates are a pair of numbers as the x and y of the end of the curve and the second pair is the end of the line after the curve. If there are multiple Smooth Cubic Bézier Curve points in a row then a polybézier is drawn.
  • Quadratic Bézier Curveto: Q or q. Draws a Quadratic Bézier Curve. The first coordinates are a pair of numbers as the x and y of the control point of the curve and the second pair is the end of the curve. If there are multiple Quadratic Bézier Curve points in a row then a polybézier is drawn.
  • Smooth Quadratic Bézier Curveto: T or t. Draws a Smooth Quadratic Bézier Curve. The coordinates are a pair of numbers as the x and y of the end of the curve. If there are multiple Smooth Quadratic Bézier Curve points in a row then a polybézier is drawn.
  • Closepath: Z or z. Draws a line from the last point to the first point. There are no coordinates for the closepath.

A path may be made up of multiple subpaths each ending with the closepath letter command.

Both the d and pathLength attributes can be altered by animation.

<path fill="blue" stroke="black" d="M100,200 C100,100 250,100 250,200 S400,300 400,200"/>
Figure 11: A path of a curve

Text

Element Name: text.

Category: Text.

Content Model: Zero or more plain text, a, animate, animateColor, animateMotion, animateTransform, desc, discard, handler, metadata, set, switch, title, tspan elements.

Attributes: editable, rotate, transform, x, y, Basic Font Formatting Attributes, Conditional Attributes, Core Attributes.

Element In SVG: 1.0, 1.1 Tiny, 1.1 Basic, 1.1 Full, 1.2 Tiny.

 

Element Name: textArea.

Category: Text.

Content Model: Zero or more plain text, a, animate, animateColor, animateMotion, animateTransform, desc, discard, handler, metadata, set, switch, tbreak, title, tspan elements.

Attributes: editable, height, transform, width, x, y, Basic Font Formatting Attributes, Conditional Attributes, Core Attributes.

Element In SVG: 1.2 Tiny.

 

Element Name: tspan.

Category: Text.

Content Model: Matches the content model of its parent element.

Attributes: Basic Font Formatting Attributes, Conditional Attributes, Core Attributes.

Element In SVG: 1.0, 1.1 Basic, 1.1 Full, 1.2 Tiny.

 

Element Name: tbreak.

Category: Text.

Content Model: Empty.

Attributes: Conditional Attributes, Core Attributes.

Element In SVG: 1.2 Tiny.

Single line text to provide such information as labels for a chart or text in a flow diagram can be added via the text element. The x and y attributes state the absolute position of the top left of the first character of the text. The rotate attribute allows the text to be rotated but this may be processor intensive and slow the rendering of the image or may not be supported by all text fonts.

 Multiple values separated by commas or spaces may be specified in the x, y and rotate attributes to apply the top left position and rotation specific to the first character, the second character, the third character and so on.

 Since SVG 1.2 Tiny, text lines may be editable with the editable="simple" attribute or not editable with editable="none".

These attributes can be altered by animation.

<text x="100" y="100" xml:lang="en">
  This is a text line in an SVG image.
</text>
Figure 12: Simple text

New in SVG 1.2 Tiny, the text may be in a textArea element which allows text to flow on multiple lines. The x, y and editable attributes are the same as the ones for the text element. Dimension is provided by the width and height attributes. These could be a number or the value auto. If both are auto then textArea acts like the text element.

A line break may be enforced within the textArea element using the tbreak Empty Element.

Spans of text within text or textArea elements may have different presentations compared to the rest of the text by wrapping those particular text within tspan elements.

Basic Font Formatting Attributes

Basic Font Formatting Attributes can be used on the text, textArea and tspan elements. These attributes are font-family, font-size, font-style, font-weight and font-variant and have the same values as the CSS font properties.

All the mentioned attributes for text based elements can be altered by animation.

<textArea x="20" y="20" width="150" height="150" font-family="Verdana" font-size="16" fill="black">
  This graph shows the steady increase in
  in <tspan fill="blue">SVG</tspan> adoption.<tbreak/>
  Most web browsers support<tbreak/>
  some main features of <tspan fill="blue">SVG</tspan>.
</textArea>
Figure 13: A multiple line text label with font formatting and line breaks

Element Name: a.

Category: Hyperlink.

Content Model: Matches the content model of its parent element.

Attributes: target, transform, XLink Attributes, Conditional Attributes, Core Attributes.

Element In SVG: 1.0, 1.1 Tiny, 1.1 Basic, 1.1 Full, 1.2 Tiny.

Parts of an SVG image may be clickable to send the user to a new web destination via Hyperlinks or links using the a element.

 The main Hyperlinking attributes are from the XLink XML Vocabulary. These attributes are bound to the XLink Namespace ( http://www.w3.org/1999/xlink ), usually prefixed with xlink: and includes these attributes:

  • xlink:href for specifying the URI or IRI of the destination of a link or source of a resource being referred to for embedding such as images, audio or video. xlink:href can be altered by animation;
  • xlink:type providing the type of Hyperlinking ( xlink:type="simple" );
  • xlink:title for an advisory text label of the link or resource;
  • xlink:actuate is for backwards compatibility with SVG 1.0 and 1.1 and states if the resource is loaded by the user activating the link ( xlink:actuate="onRequest" ) or loading it automatically ( xlink:actuate="onLoad" );
  • xlink:show is for backwards compatibility with SVG 1.0 and 1.1 and states in which browsing context the destination or resource will load: replace loads in the current context, new in a new tab or window, embed loads the resource inline with the content like HTML/XHTML's img void element embeds images for instance, none disables loading of the destination or resource and other accesses any UserAgent specific loading algorithm that is different to the previous values;
  • xlink:role provides a URI or IRI to a resource that describes the role of the resource or destination of the xlink:href;
  • xlink:arcrole provides a URI or IRI to a resource that describes the adaptive role of the resource or destination of the xlink:href depending on the context;

Plus the target attribute loads the destination or resource in the current context whatever that may be ( target="_self" or target="_replace" ), loads in a parent context ( target="_parent" ), loads in the whole tab or window ( target="_top" ), in a new tab or window ( target="_blank" ) or a specific named tab or window ( target="whateverName" ). This attribute can be altered by animation.

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" baseProfile="tiny" width="400" height="400" viewBox="0 0 400 400" xml:lang="en">
  <title>Basic Image with a link</title>
  <desc>An example of a basic SVG Image featuring a hyperlinked rectangle shape.</desc>
  <g id="mainGroup">
    <a xlink:href="http://www.w3.org/">
      <rect x="2" y="2" width="200" height="200" fill="none" stroke="black">
        <title>Example of a clickable square</title>
        <desc>A black, outlined square, 200 by 200 that will take you to the W3C home webpage when you activate the link.</desc>
      </rect>
    </a>
  </g>
</svg>
Figure 14: An example of linkable rectangles

Define and Reuse

Element Name: defs.

Category: Reuse, Define.

Content Model: Zero or more a, animate, animateColor, animateMotion, animateTransform, animation, audio, circle, defs, desc, discard, ellipse, font, font-face, foreignObject, g, handler, image, line, linearGradient, ev:listener, metadata, path, polygon, polyline, prefetch, radialGradient, rect, script, set, solidColor, switch, text, textArea, title, use, video elements.

Attributes: Core Attributes.

Element In SVG: 1.0, 1.1 Tiny, 1.1 Basic, 1.1 Full, 1.2 Tiny.

 

Element Name: use.

Category: Reuse.

Content Model: Zero or more animate, animateColor, animateMotion, animateTransform, desc, discard, handler, metadata, set, switch, title elements.

Attributes: transform, x, y, XLink Attributes, Conditional Attributes, Core Attributes.

Element In SVG: 1.0, 1.1 Tiny, 1.1 Basic, 1.1 Full, 1.2 Tiny.

You can define a single copy of one or more graphics components in a defs element to be used and reused later in the SVG image using the use element or a url() function within an attribute such as fill.

 A definition ( defs element ) is best placed closer to the top of the SVG image. Any graphics components defined in the defs element should have an id or xml:id attribute to uniquely identify the component when referencing it.

References are done either by the use element with the xlink:href attribute with a fragment URI or IRI value such as referencing a rectangle or other shape to be used and possibly duplicated in another position on the canvas. The x and y attributes could specify the different locations of the reused component.

<defs>
  <rect id="rect1" width="50" height="50" stroke="black"/>
</defs>

<!-- ... -->

<g id="mainGroup">
  <use xlink:href="#rect1" fill="blue" x="1" y="1"/>
  <use xlink:href="#rect1" fill="green" x="52" y="3"/>
  <use xlink:href="#rect1" fill="yellow" x="105" y="5"/>
</g>
Figure 15: Reusing graphics components

Or references are made from the url() function in an attribute such as the fill attribute referencing a gradient.

Page 1, , Jump to Page 3

Copyright ©2010 Legend Scrolls and Peter Davison.
Icons from the Oxygen Icon Theme, LGPL, and PNG version of icons in the Oxygen Icon Theme from kde-look.org, GPL.
All rights reserved.