Quick recipes for SVG Wow!

For the SVG Open 2007 conference

Keywords: opera , svg , web applications , video

Erik Dahlström
Developer
Opera Software ASA
Waldemar Thranes gate 98
NO-0175 Oslo
Norway
ed@opera.com

Biography

Erik Dahlström is the SVG team leader at Opera Software ASA, where he's been working as a software developer since 2001. He holds an MSc degree in Computer Science and Engineering from the Institute of Technology at Linköping University (LiTH), Sweden. Since 2005 Mr Dahlström has been the primary representative of Opera Software on the W3C SVG Working Group.


Abstract


This paper describes some of the new features in the upcoming release of the Opera web browser, and shows some ways of utilizing these features when authoring SVG content.


Table of Contents


1. Introduction
2. External references
     2.1 External references intro
          2.1.1 What are external references?
          2.1.2 Knowing when to use them
          2.1.3 How is this useful?
     2.2 External references applied
          2.2.1 xlink:href references
          2.2.2 Presentation references
          2.2.3 Cross-document scripting
3. Browser Integration
     3.1 Making foreignObject less foreign
          3.1.1 A foreignObject browser-in-browser
          3.1.2 A 'textArea' contender
     3.2 CSS integration
          3.2.1 CSS OM for SVG properties
          3.2.2 CSS properties that may reference SVG content
     3.3 HTML5 Canvas with SVG
          3.3.1 SVG Tiger canvas
          3.3.2 A spatial tiger leap
4. Video
     4.1 Video support in Opera
     4.2 Videos with realtime filters
     4.3 Video playtime
     4.4 Transformed video
5. Conclusions

1. Introduction

The Opera 9 web browser offers the most complete SVG 1.1 support of any browser on the market today. Since Opera 9 many features have been added, some from 1.2 Tiny, some from 1.1 Full. The following three main areas will be covered by this paper:

2. External references

2.1 External references intro

2.1.1 What are external references?

An external reference is a reference that points to a resource that is in another file than the current one.

	<use xlink:href="some.svg#rect"/>
	<image xlink:href="http://www.clipart.com/svg/1255385923.svg"/>
	<rect fill="url(../svg/resources/fills.svg#shinyGreenGradient)"/>

Example 1: Some examples of external references

2.1.2 Knowing when to use them

Since fetching several resources over the network may be less efficient than fetching one file this has to be considered as a factor. By grouping commonly used pieces of SVG fragments into one file it's possible to minimize the number of network requests. Keeping the resource-file as small as possible while still having all the necessary bits can in some cases be a solution. For larger and more complicated external resources, like clip-art, scripted SVG:s, or other third-party SVG:s this may not be possible. However, the benefits of using external references in these cases outweighs the pain of trying to stitch SVG files together on the server side.

2.1.3 How is this useful?

Support for external references enables authors to create libraries of re-usable SVG fragments, such as clip-paths, gradients, clip-art etc; making it easier and faster to create rich interactive web applications than ever before.

2.2 External references applied

2.2.1 xlink:href references

Here are a few examples of external references used in SVG:

	<use xlink:href="../media/star.svg#root"/>
	<animation xlink:href="http://openclipart.org/people/paulliu/paulliu_a_walking_girl.svg"/>
	<image xlink:href="../media/tiger.svg"/>

Example 2: External xlink:href references

Each of these elements have different restrictions:

For static content any of them can be used, and will look the same. Here is an example that uses the above three ways to reference external content.

2.2.2 Presentation references

Some of the presentation attributes (or properties in CSS) may contain external references.

	<g mask="url(../media/maskclip.svg#mask)"	
	<g clip-path="url(../media/maskclip.svg#clip)"
	<rect fill="url(../media/maskclip.svg#background)" />

Example 3: Examples of external presentation references

The CSS convention for specifying an URL is to use the wrapper "url()" around the reference. Note that when the user agent supports CSS the property values can be specified in stylesheets, and these stylesheets can in turn be either local or external. An external stylesheet can be included using an xml-stylesheet processing instruction. Both XSL and CSS stylesheets are supported by Opera, each having its respective advantages.

These examples show external definitions of masking and clipping:

2.2.3 Cross-document scripting

Using the 'animation' element it's now possible to script across multiple SVG documents. This can be very useful for re-using components of an application.

In this example we have a banner that we want to change the text on dynamically. Using an 'animation' element to reference the banner graphic we can replace or update the text to meet our needs. Because the text is inside the referenced graphic we don't need to keep track of positions and so on, which we would have to do if we simply put the text on top of the banner graphic in the main document.

	<script>
	  function changeBannerText()
	  {
	    var a1 = document.getElementById("a1");
	    var animDoc = a1.contentDocument;
	    var line0 = animDoc.getElementById("banner");
	    var line1 = line0.firstElementChild;
	    var line2 = line1.nextElementSibling;
	  
	    line0.style.fontSize = 45;
	    line0.y.baseVal.getItem(0).value = 440;
	    line0.firstChild.data = "Video";
	    line1.textContent = "and";
	    line2.textContent = "animation";
	  }
	</script>
	<animation id="a1" xlink:href="star-embeddable.svg"/>

Example 4: Scripting across SVG documents

The result

3. Browser Integration

Making it easier to use SVG with HTML and other existing web technologies was one of the major goals we had for the next version of Opera. One of the areas we have worked on is the 'foreignObject' element in SVG, which can contain arbitrary XML markup.

3.1 Making foreignObject less foreign

Several improvements in the foreignObject support have been made, and it's now possible to include inline XHTML in SVG documents. Like in previous versions of Opera it's also possible to link to external HTML files and have them rendered in the 'foreignObject' element.

3.1.1 A foreignObject browser-in-browser

The 'foreignObject' element can be seen as SVG's equivalent of the HTML 'iframe' element. Using this feature it's easy to quickly create rich user interfaces using SVG, HTML, or a combination of the two.

This example displays any webpage you enter inside a 'foreignObject' element, and has a live updating reflection effect which we can see more of when scrolling the webpage content.

The foreignObject can be seen as a temporary canvas that is handed off to another renderer, but SVG can still apply its features on the result, for example arbitrary transformation, filter effects, clipping etc. That's why we can mirror the webpage in the example.

3.1.2 A 'textArea' contender

SVG Tiny 1.2 has a new element called 'textArea' that automatically wraps text inside a rectangle. That's an SVG feature that people have been asking for for a long time. It's good that SVG meets that demand now, even if it doesn't provide as advanced layout capabilities as that of HTML. However, this leads us to the question: why not use foreignObject instead?

Using inline HTML inside a 'foreignObject' element to create a more advanced textArea means it's possible to include images, align text, use forms, style the content with CSS and all other various features of the HTML language.

Here is a side-by-side comparison.

3.2 CSS integration

The SVG language already uses parts of CSS; which parts depend on what profile and/or version of the SVG specification we're talking about. One example is the inheritance model of presentation attributes which is defined by CSS. When it comes to integration with CSS there are a couple of points that are of interest.

3.2.1 CSS OM for SVG properties

The first thing to note is that for the next release of Opera the DOM for CSS (or CSS OM) applies to SVG's CSS properties as well as other CSS properties. This means it's possible for a script to inspect the values used by the SVG engine for rendering. It's important that since many of SVG's properties are central to the visual appearance of SVG images, e.g fill and stroke, it's possible (and easy) to get and set these values. The CSS OM is similar to the SVG 1.2 Tiny TraitAccess API in the sense that it returns computed values. Here is a simple example of how to get the base value for the fill property:

	var fill = element.style.fill;

Example 5: The shorthand notation used here returns a DOMString.

3.2.2 CSS properties that may reference SVG content

Some properties in CSS can reference images, and traditionally that meant raster images, e.g JPEG images. In the next version of Opera it's possible for SVG images to be used as well.

	.page { background-image: url(gradient.svg) }
	.list { list-image: url(marker.svg) }

Example 6: A few examples of how to use SVG images in CSS

If the background is to be tiled, then the width and height of the SVG must be specified in the SVG document, since not specifying the width and height attributes is equivalent to specifying 100%. Image tiling can be prohibited in CSS by adding the following to the CSS rule:

	background-repeat: no-repeat;

Example 7: How to prevent tiling in CSS backgrounds

The 'preserveAspectRatio' attribute also affects how the SVG will look. If full 100% by 100% coverage of the area is desired then one must specify preserveAspectRatio="none", or simply not use a viewBox at all and instead use percentage units for the SVG content.

3.3 HTML5 Canvas with SVG

Canvas is a part of the HTML5 specification, and it consists of a canvas element and a DOM API for drawing vector graphics (using javascript) on the area defined by the canvas element. It's not a graphics format, but it is related to SVG (in the sense that it is vector graphics). For more information on the canvas API see the HTML5 specification.

The canvas API allows drawing images to the canvas. One use-case for this is to draw sprites for a game. Now what if we wanted to use SVG images for the sprites? We can then make sprites instances of varying sizes and they would still look good. It makes sense that these two technologies integrate so that it becomes possible.

The demos I'm about to show are experimental, but provide a peek of the possibilites that lay ahead.

3.3.1 SVG Tiger canvas

This example shows how to draw an SVG on the canvas. First we have the 'canvas' element that specifies the area on which we can draw:

	<canvas id="canvas" width="500" height="500">

Example 8: A 'canvas' element example

Then we use some javascript to draw an image on this canvas:

	canvas = document.getElementById("canvas");
	context = canvas.getContext("2d");
	context.clearRect(0,0,500,500);
	image = new Image();
	image.src = "tiger.svg";
	context.drawImage(image,0,0,200,200);

Example 9: How to draw an image using the canvas API

As you see above it's possible to specify the destination rectangle for the image. This means that the SVG can be rendered to meet the desired dimensions. Using an SVG for a canvas pattern is also possible.

Example: SVG as an image format for canvas.

3.3.2 A spatial tiger leap

The HTML5 specification hints at a 3D canvas context, but doesn't specify it. This demo may therefore be considered a tech preview.

Since SVG can be used for the 2D canvas there is no reason why it can't be used for 3D canvas, at least for 2D surfaces. One such case is of course 2D textures, and as an experiment this feature was added.

Example: SVG as a texture for a 3d canvas

4. Video

4.1 Video support in Opera

One of the major new features in SVG 1.2 Tiny is video. This build of Opera includes Ogg Theora and Vorbis support.

Ogg, Theora and Vorbis are all free and open-source. Ogg is a multimedia container format, similar to MPEG, and is commonly used to contain a Theora video stream or a Vorbis audio stream.

Having the same format available on most or all of the platforms Opera ships on would be beneficial for authoring. Opera is available on a wide range of platforms, from mobile phones to set-top boxes, and of course all major desktop operating systems.

	<video xlink:href="video.ogg" width="100" height="100"/>

Example 10: An example of how to include a video in an SVG

The above example would display the video in the SVG document, and would align the video in the 100x100 viewport that the 'video' element establishes.

4.2 Videos with realtime filters

The video decoding and drawing is not so computationally intense, which means there is some room left for adding a twist to the equation. Since Opera 9 we have had support for SVG 1.1 filters. Filters can be used for a number of different effects, such as gaussian blur, color transformations, lighting etc. SVG filters can be applied to any SVG element and of course the 'video' element is no exception.

	<video xlink:href="../media/7train_arriving.ogg" filter="url(#grayscale)"/>

Example 11: An example of how to use SVG 1.1 filters together with a 'video' element

See the final result

4.3 Video playtime

Clipping and masking from SVG 1.1 in analogy with filters apply to 'video' as well, and they also provide for ways to create some nice effects.

In this example a clip-path follows the mouse. By moving the mouse around it's possible to see the video which is clipped by the clip-path. This gives the illusion of a layer with a gradient on top of the video.

Here's another example but with a mask instead.

Using a mask to do a realtime video reflection effect is also within reach.

4.4 Transformed video

The default behavior for video in SVG Tiny 1.2 is that it is affected by transforms. Not all viewers may have that capability, and it's allowed for viewers to fallback to showing the video without transformations. The next version of Opera supports transformed video, meaning that if we want, we can scale, rotate and skew the video.

Here is an example of a rotating video.

5. Conclusions

In this paper, I've presented some of the coming features of the next version of Opera. Some conclusions:

XHTML rendition made possible by SchemaSoft's Document Interpreter™ technology.