Scalable Vector Graphics (SVG), Page 2

Gradients

Instead of typical colours for fill and stroke you can define gradients. A linearGradient element defines a linear type and radialGradient defines a radial type.

 The gradientUnits attribute has the value userSpaceOnUse that effects the dimensional attributes of the gradients setting the coordinate system to the general canvas coordinate system at the time of the gradient being applied. Otherwise the value objectBoundingBox (default) sets the coordinate system to the area of the graphics component itself.

 For the dimensional attributes of linearGradient the x1, x2, y1 and y2 attributes are numbers and zero is the default. For the dimensional attributes of radialGradient the cx, cy and r attributes are numbers and the defaults are 0.5. Negative values are not supported on the r attribute. These define the gradient path for linearGradient and the outermost gradient circle or ellipse for radialGradient.

 To specify the actual gradient colour changes you use the stop element within linearGradient or radialGradient. The offset attribute has a number that specifies the point in the linear path or how far away from the last radial point. Its default is zero.

 The actual colour and opacity of each point or stop in the gradient is handled by the stop-color and stop-opacity attributes.

<defs>
  <linearGradient id="ling1">
    <stop offset="0" stop-color="red"/>
    <stop offset="0.4" stop-color="yellow"/>
    <stop offset="0.8" stop-color="green"/>
    <stop offset="1" stop-color="blue"/>
  </linearGradient>
  
  <radialGradient id="radg1" gradientUnits="userSpaceOnUse" cx="400" cy="200" r="300">
    <stop offset="0" stop-color="red"/>
    <stop offset="0.5" stop-color="blue"/>
    <stop offset="1" stop-color="red"/>
  </radialGradient>
</defs>

<!-- ... -->

<g id="mainGroup">
  <rect fill="url(#ling1)" stroke="black" x="1" y="1" width="200" height="75"/>
  
  <rect fill="url(#radg1)" stroke="black" stroke-width="5" x="100" y="1" width="400" height="200"/>
</g>

Bringing in Raster Images

Raster images (pixelled images) such as PNG and JPEG can be included using the image element much like HTML/XHTML's img void element. The x and y attributes are zero by default and specify the top left position of the image. Dimensions are specified by width and height attributes, zero is their default. To reference the actual image you use the xlink:href attribute and you can specify the content type of the image in the type attribute.

Transparency of the whole image may be set using the opacity attribute and the aspect ratio algorithm may be set by the preserveAspectRatio attribute much like the one on the svg element.

These attributes can be altered by animation.

<image xlink:href="logo.png" type="image/png" x="5" y="5" width="50" height="50">
  <title>Iconic Logo</title>
  <desc>This is the alternative text of the raster image.</desc>
</image>

Beyond SVG Tiny, the image element can also refer to and embed other SVG image documents in addition to the raster based images.

2D Transforms

Graphical components can be transformed such as scaled, rotated, skewed (stretched) and translated using the transform attribute. The value is usually either one transform function or a space separated list of transform functions.

• Translating: specifies a new location for the origin of a new sub canvas – effectively moving new content. The translate() function takes an x,y coordinate. For instance transform="translate(125,125)" changes the origin to 125 pixels by 125 pixels from the previous origin. So graphics components that use x and y attributes will start their coordinate system from there. The second number is optional and if omitted will be zero.
• Scaling: gracefully resizes the graphics component. The scale() function takes an x,y coordinate. For instance transform="scale(2,2)" increases to twice the size or transform="scale(.5,.5)" decreases to half the size. The second number is optional and if omitted then is the same as the first.
• Rotation: rotates the graphics component. The rotate() function takes a number in degrees and an optional x,y coordinate for the center. For instance transform="rotate(-8)" rotates 8 degrees anti-clockwise or transform="rotate(18, 25,35)" rotates 18 degrees clockwise with the rotation center at 25 by 35.
• Stretching: stretches the graphics component. The skewX() function takes an angle to stretch horizontally and the skewY() function takes an angle to stretch vertically. For instance transform="skewX(45)" or transform="skewY(15)" or even transform="skewX(45) skewY(8)".

 There is a matrix() transform function with 6 values that is the core, advanced transform that will do translations, scaling, stretching and rotation but most authors use the translate(), scale(), skewX(), skewY() and rotate() functions instead.

Animation

SVG can also provide animated images using elements and attributes based on the Synchronized Multimedia Integration Language (SMIL) and extended by SVG.

 Animation based elements are usually within the graphics component that is to be animated. Using the animate element you can change the value of the target graphics component. This is done by stating the attribute name with the attributeName attribute on the animate element, stating what the value was with the from attribute and what the value is to be changed to with the to attribute.

The begin, dur attributes state when the animation is to begin and how long it takes to finish, respectively. Their value is a number and optionally followed by the letter s or the letters ms to represent seconds or milliseconds. Or a decimal number in the form Seconds.Milliseconds.

To keep the final effect of the animation for the rest of the displayed image the fill="freeze" can be applied.

<rect x="3" y="3" width="100" height="100" rx="3" ry="3">
  <animate attributeName="width" from="100" to="200" begin="2s" dur="6s" fill="freeze"/>
  <animate attributeName="height" from="100" to="300" begin="2s" dur="6s" fill="freeze"/>
  <animate attributeName="rx" from="3" to="6" begin="2s" dur="6s" fill="freeze"/>
  <animate attributeName="ry" from="3" to="8" begin="2s" dur="6s" fill="freeze"/>
</rect>

As a slightly simplified version for attributes that do not take number values and you simply want to set the new value you can use the set element which does not use the from attribute.

<text x="3" y="3" font-family="Verdana" font-size="16">
  Alter the text of a paragraph.
  <set attributeName="font-family" to="Georgia" begin="2s" dur="6s" fill="freeze"/>
</text>

Also the animateColor element can change attributes that take colour values to provide the effect of colour change over time.

<rect x="3" y="3" width="100" height="100" rx="3" ry="3" fill="#ff0000">
  <animateColor attributeName="fill" from="#ff0000" to="#0000ff" begin="2s" dur="6s" fill="freeze"/>
</rect>

Animating transforms can be done using the animateTransform element with the type attribute specifying either translate, scale, rotate, skewX or skewY.

<rect x="3" y="3" width="100" height="100" rx="3" ry="3" fill="#ff0000" transform="scale(.5, .5)">
  <animateTransform attributeName="transform" type="scale" from=".5, .5" to="2, 2" begin="2s" dur="6s" fill="freeze"/>
</rect>

Moving graphics components over time can be done using the animateMotion element with the path attribute specifying a motion path. The motion path value uses the same features as the d attribute of the path element.

<rect x="3" y="3" width="60" height="50" fill="#0000ff">
  <animateMotion path="M0,0 L225,225 320, 290 Z" begin="2s" dur="6s" fill="freeze"/>
</rect>

Alternatively motion paths could in an mpath element within an animateMotion element without the path attribute. The mpath element uses the xlink:href attribute to reference a predefined path element.

<rect x="3" y="3" width="60" height="50" fill="#0000ff">
  <animateMotion begin="2s" dur="6s" fill="freeze">
    <mpath xlink:href="idOfAPath"/>
  </animateMotion>
</rect>

By default the animation changes or replaces the value of the attribute but sometimes you may wish to increase or decrease the current value such as adding an extra radius of 20 to the existing value of the r attribute. To do this you add the additive="sum" attribute.

<circle cx="150" cy="150" r="10" stroke="blue" fill="blue">
  <animate attributeName="r" from="0" to="20" dur="20s" additive="sum"/>
</circle>

Animations can take more than one revolution by adding the repeatCount attribute with either a number of how many iterations or revolutions of the animation or the value indefinite. Also you can limit the total duration of all the iterations as a whole with the repeatDur attribute. Its value is either the seconds or milliseconds or the value indefinite.

An animation could be restarted, by default ( restart="always" ) but could be set to only restart when the animation is not active ( restart="whenNotActive" ) or never restarted ( restart="never" ).

Each iteration, the animated value would be reset before the next animation iteration begins. But the value could build upon the previous animation revolution by adding the accumulate="sum" attribute.

<circle cx="150" cy="150" r="10" stroke="blue" fill="blue">
  <animate attributeName="r" from="0" to="20" dur="20s" additive="sum" accumulate="sum" repeatCount="3"/>
</circle>

From SVG Tiny 1.2, you can discard features when they are not required any more. This is done by adding a discard element with a begin attribute all within the element that is to be discarded such as <discard begin="3s"/>. Or elsewhere with an xlink:href pointing to the id or xml:id of the element to be discarded.

Optional Styling

 SVG 1.1 Tiny did not support styling from anything but SVG itself but 1.0, 1.1, 1.1 Basic and 1.2 Tiny do support optional styling via Cascade StyleSheets (CSS). In 1.2 Tiny the CSS needs to be in an external StyleSheet and referenced by the XML StyleSheet Processing Instruction ( <?xml-stylesheet type="text/css" href="styles/imagestyling.css" title="Common Image Styles"?> ).

The class attribute (similar to the one from HTML/XHTML) takes a single keyword or a space separated list of keywords and may be used on any SVG Element to apply one or more CSS style classes. This attributes is a Core Attribute.

CSS may be used to override SVG presentational attributes or be used in place of them. This is useful when a collection of SVG images have the same styling, so all SVG images can refer to the same StyleSheet.

Presentational SVG attributes such as (but not limited to) font-family, font-size, font-weight, font-style and opacity are also defined in CSS and so can be used as either attributes in SVG and / or CSS properties. SVG presentational attributes fill, fill-rule, fill-opacity, stroke, stroke-opacity, stroke-width, stroke-linecap, solid-color, solid-opacity, etc are not in CSS. But SVG defines CSS property versions of these attributes so they can also be used in StyleSheets with SVG images.

Not all SVG UserAgents support CSS, especially SVG 1.1 Tiny UserAgents. So you can't necessarily depend on CSS styling in SVG. Most web browsers that support SVG beyond 1.1 Tiny do support CSS with SVG.

Extensible Content and Metadata

 You can embed other Markup languages such as XHTML or MathML in SVG images to provide extra semantic, structured text or math expressions. This is accomplished by using the foreignObject element.

Elements from other XML Namespaces may be used almost anywhere in an SVG image and attributes from other XML Namespaces may be used in any SVG Element.

 The metadata element can provide more complex and semantic, structured metadata than the title and desc elements, usually with vocabularies from other XML Namespaces. Typically Resource Description Framework in XML form (RDF/XML) is used with Dublin Core and others.

 Another use for the class attribute from SVG Tiny 1.2 is as a generic attribute to state a classification metadata keyword or a list of classification metadata keywords, usually used by Microformats.

 Several attributes inspired by RDF/XML are supported in SVG Tiny 1.2. These include:

• about: identify a resource by its URI or IRI or the current SVG image or graphics component by either a fragment URI or IRI or an empty string;
• rel: states the subject (similar to HTML/XHTML's rel attribute);

These attributes are also Core Attributes.

Conditional Content

A set of attributes allow the particular element it is on such as a shape, path, text, raster image, animation element or even a group to only be processed if the condition is true.

The systemLanguage attribute can specify that the element is only processed if the UserAgent is set to the particular written language code. It can have a single or comma separated list of language codes.

Checking if the SVG UserAgent supports a particular feature can be done via the requiredFeatures attribute. It takes one or a space separated list of URIs or IRIs.

The requiredExtensions attribute is like the requiredFeatures attribute but to test support for existing or experimental features beyond the current profile. This can include testing for support for other markup languages (the URI or IRI should be the vocabulary XML Namespace if it has one).

 In SVG 1.2 Tiny, the requiredFormats attribute provides the ability to process an element if the UserAgent supports the MIME Media Type or one of the MIME Media Types in the space separated list. Portable Network Graphic (PNG raster image), image/png, Joint Photographic Experts Group (JPEG raster image), image/jpeg, and SVG, image/svg+xml, must be supported by all SVG UserAgents.

Also from Tiny 1.2 is the requiredFonts attribute that checks if the UserAgent supports all the fonts mentioned in the attribute value. The value is the same as the font-family attribute / CSS property except logical fonts (such as serif, sans-serif, monospace) are not allowed.

 If any of the conditional attributes have an empty value then it automatically results to false and the element will not be processed.

 A switch element allows alternatives of an element or sub structure of elements within it such as providing text in different languages.

If the conditional attribute is not specified then it automatically results to true and the element will be processed if none of the other elements that have a conditional attribute, within switch, are not processed. This can provide a catch-all feature.

Not all elements can be altered by conditional attributes or the swtich element and so they will be processed as usual.

Defining Fonts

 The rendering of text is as important as graphics components in SVG images and so SVG has the ability to describe one or more fonts that the image's text will be using.

Definitions for each font is grouped in a font element within a defs element. It may have a horiz-origin-x attribute specifying the x axis number of the font origin. It usually has a horiz-adv-x attribute specifying the default horizontal non-negative number of units after rendering a character glyph - the 'x axis advance'. Both have zero as their defaults.

 Generally the font is described by the font-face element. You can specify the same Basic Font Formatting attributes including font-family for the font label, font-size, font-style such as italics and font-weight such as bold. Plus the font-stretch attribute / CSS property which has the values:

• normal,
• wider,
• narrower,
• ultra-condensed,
• extra-condensed,
• condensed,
• semi-condensed,
• semi-expanded,
• expanded,
• extra-expanded,
• ultra-expanded
• or inherit.

For limiting the range of characters to be defined you can add the unicode-range attribute. Its value is a capitol letter u followed by a plus sign followed by a hexadecimal unicode number then a dash and then a second hexadecimal unicode number. The default value is U+0-10FFFF.

The units-per-em attribute states how many coordinate units are used per resolution independent square. The default is 1000. Typical 10 space separated numbers for the panose information is specified in the panose-1 attribute. 10 zeros is the default panose value.

 A glyph element describes the actual character used in the font. The unicode attribute allows you to specify one or more core characters either literally or as Hexadecimal or Numbered Character Entity References representing the core characters. A unique name or label for the glyph can be specified by the glyph-name attribute. Primarily the d attribute with the same path information used with the path element's d attribute literally draws the character outline.

If the character is only to be used with certain languages then the lang attribute can be used with the specific language code. Arabic characters may need to be stated in either of the four forms: initial, medial, terminal or isolated (default). This is done by using the arabic-form attribute with either of those values.

A glyph specific horiz-adv-x attribute states a deviation from the font's default character 'x axis advance'.

 If a glyph cannot be rendered because the character has not been defined then a common fallback glyph can be defined by the missing-glyph element with the d attribute and optional horiz-adv-x attribute.

 Some pairs of characters are to be rendered more closer to each other in a font. This can be defined horizontally by using the hkern element. Its g1 and g2 attributes specify the two characters or two character ranges by their glyph name(s) (glyph element's glyph-name attribute); or the u1 and u2 specify them from the glyph unicode (glyph element's unicode attribute). The k attribute specifies the negative number of how less space there should be between the characters. Zero is the default. Glyphs to be kerned should have the same font family, size, style and weight.

<defs>
  <font id="MyCustomFont" horiz-adv-x="586">
    <font-face font-family="MyCustomFont"
      units-per-em="1000"
      panose-1="2 14 5 3 0 0 0 2 0 3"
      ascent="1002"
      descent="-198"
      alphabetic="0"/>
    <missing-glyph horiz-adv-x="861" d="M60 372Q60 449 89 517T168 635T287 715T432 744Q508 744 575 715T694 636T774 517T804 372Q804 295 775 228T694 110T576 30T432 0Q355 0 287 29T169 109T89 227T60 372ZM113 372Q113 306 138 248T206 147T308 78T432 53Q497 53 555 78T658 146T727 248T753 372Q753 438 728 497T658 600T556 671T432 697Q366 697 308 671T207 601T138 497T113 372Z"/>
    <glyph unicode=" " glyph-name="space" horiz-adv-x="300"/>
    <glyph unicode="!" glyph-name="exclam" horiz-adv-x="269" d="M52 79L135 174L216 90L130 -13L52 79ZM52 745H217Q198 607 183 471T157 185H111Q103 335 88 471T52 745Z"/>
    <glyph unicode=""" glyph-name="quotedbl" horiz-adv-x="333" d="M27 672V683L97 744L158 689L100 474L67 485L62 632Q60 671 27 672ZM175 672V683L245 744L306 689L248 474L215 485L210 632Q208 671 175 672Z"/>
    <glyph unicode="#" glyph-name="numbersign" horiz-adv-x="569" d="M13 253L25 298H121L155 422H58L72 474H169L196 576Q197 581 197 584T198 591Q198 609 177 612L180 623L299 678L245 474H376L403 576Q404 581 404 584T405 591Q405 609 384 612L387 623L506 678L451 474H541L527 422H438L404 298H494L482 253H392L362 140Q360 134 360 130Q360 117 365 111T388 104L384 90L323 57L277 101L317 253H186L156 140Q154 134 154 130Q154 117 159 111T182 104L178 90L117 57L69 101L110 253H13ZM198 298H329L362 422H231L198 298Z"/>
  </font>
</defs>

 Alternatively if the SVG Font is in a separate SVG document then you just simply need to have within the font element: a font-face element with a font-family attribute and a font-face-src child element with a font-face-uri child element. The font-face-uri element needs an xlink:href attribute to point to the id or xml:id attribute of the font element in the separate SVG document.

<defs>
  <font id="MyExtFont">
    <font-face font-family="MyCustomFont">
      <font-face-src>
        <font-face-uri xlink:href="fonts/myextfont.svg#MyCustomFont"/>
      </font-face-src>
    </font-face>
  </font>
</defs>

Multimedia

 From SVG 1.2 Tiny you can embed audio with the audio element and audio-video content with the video element. Referring to the audio or video is done by the xlink:href attribute. The type attribute may be used with a MIME Media Type to provide a hint of the audio or video format.

Many of the timing attributes including restart, repeatCount, dur and repeatDur are the same as the ones for animated components. Managing audio level is done using the audio-level attribute / CSS property. Its value is 1.0 by default, higher increases the volume, lower decreases it and 0 ( zero ) silences the audio.

For the video element the x and y attributes will position the video and width and height attributes define the dimensions of the video.

<audio xlink:href="media/audionotes.m4a" type="audio/m4a"/>

 

<video xlink:href="media/tutorial.mp4" type="video/mp4" x="30" y="14" width="160" height="140"/>

 

 In SVG Tiny 1.2 the animation element allows you to refer to SVG animated vector graphics and text in external SVG documents and create a synchronised media presentation with the current SVG image's audio, video, image, text, vector graphics and animation.

Main attributes used are xlink:href to refer to the external SVG document, x and y for positioning, width and height for dimensions.

<g id="pres33">
  <video xlink:href="media/tutorial.mp4" type="video/mp4" x="30" y="14" width="160" height="140"/>
  <animation xlink:href="designs.svg#g3" begin="0s" dur="10s" repeatCount="3"/>
</g>

 

 Content, not just audio, video and images, may be prefetched by the prefetch element. The xlink:href attribute points to the resource and mediaTime attribute takes a seconds, milliseconds value of how much resource time to prefetch.

A mediaSize attribute takes a number value for the size in bytes of the audio, video, image, font or even markup to be prefetched. Prefetching a resource that is a particular character encoding such as UTF-8 can be specified using the mediaCharacterEncoding attribute. Bandwidth can be limited during the prefetch by the bandwidth attribute with a number value in bits per second.

<defs>
  <prefetch xlink:href="images/pic01.png"/>
  <prefetch xlink:href="media/tutorial.mp4" mediaTime="3s"/>
  <prefetch xlink:href="images/designs.svg" mediaCharacterEncoding="UTF-8"/>
</defs>

Scripting

 SVG images can also be dynamic by using scripts or compiled programming objects with the script element. Compiled Programming Objects, such as Java Applets are referred to using the xlink:href attribute.

Mainly it would be scripts such as Ecmascripts or JavaScripts that are used. They can be (within a CDATA Section,) within the script element or it is best referred to using the xlink:href attribute as an external script. The type attribute's value for JavaScripts and Ecmascripts in SVG is application/ecmascript. Before SVG 1.2, you also need the xml:space="preserve" attribute.

SVG does support a collection of events attributes that can be used on declarative animation in 1.1 Tiny otherwise most visible elements. These are similar to the HTML / XHTML events attributes such as onclick, onresize, onmousedown and onkeyup.

<script type="application/ecmascript" xlink:href="scripts/doit.es" xml:space="preserve"/>
<rect x="50" y="50" width="100" height="100" onclick="doit(evt);" fill="#ffff00" stroke="#000000"/>

 SVG 1.2 Tiny does not support using the hard coded events attributes such as onclick or onkeyup or others but introduces the use of XML Events.

Tiny 1.2 includes the handler element with the ev:event attribute specifying the event such as click, mousedown, resize, keyup and others. This attribute is the event attribute bound to the XML Events XML Namespace ( http://www.w3.org/2001/xml-events ) by typically the prefix ev:. What would be the value of the hard coded event attribute id the element content of the handler element. Or the contests of a script element could be the contents of the handler element.

In this case the handler is within the 'observer', the element that will look or listen for the event such as a click or resize or other.

In this case the handler is within the 'observer', the element that will look or listen for the event such as a circle or text listening for a click or resize or other.

 Alternatively the handler element can be separate from a specific 'observer' and id or xml:id the handler and one or more elements that you want the particular scripting in the handler element to be applied to. Then use XML Events' ev:listener element for each 'observer' element (but not within the 'observer' element). This element has the observer attribute that takes an id / xml:id value, an event attribute that takes the event (click, resize, keyup, etc) and a handler attribute that takes a URI or IRI fragment to an id / xml:id value of the handler element.

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" width="400" height="600" viewBox="0 0 400 600">
  <g id="g1">
    <circle id="circ1" cx="125" cy="120" r="10" fill="#ffff00"/>
    <circle id="circ2" cx="250" cy="120" r="10" fill="#0000ff"/>
    <text x="150" y="300">
      Click either circle to expand it.
    </text>
  </g>
  <ev:listener observer="crc1" event="click" handler="#doit1"/>
  <ev:listener observer="crc2" event="click" handler="#doit1"/>
  <handler id="doit1" type="application/ecmascript" xlink:href="scripts/doit.es"/>
</svg>

Symbols

 When defining content in the defs element to be used and reused with the use element, you can wrap individual or multiple content within a symbol element to provide extra structure and semantics as a content template to be used and reused. It is like an SVG group but the symbol element itself will not be rendered at the point of use, only the symbol element's contents will be.

Plus the viewBox and preserveAspectRatio attributes may be used on a symbol element to make the contents scale to fit the area at the point of use.