Quick recipes for SVG Wow!

Agenda

• External references
• Better integration
• Video

External references intro

• What are external references?

  
    ]]>

• When to use them?
• Why are they so useful?

External references applied

xlink:href references

• The 'animation' element from 1.2 Tiny may only reference full documents, not fragments. It's meant for animations and scripted subdocuments.
• The 'use' element can only reference fragments, and the fragments may be in external documents.
• The 'image' element can not reference fragments, and is to be used for static content.

  <use xlink:href="../media/star.svg#root"/>
  <animation xlink:href="http://tinyurl.com/yr6yxb"/>
  <image xlink:href="../media/tiger.svg"/>

Here is an example that uses the above three ways to reference external content.

External references applied

Presentation references

• These examples show external definitions of masking and clipping:

  	
    
    ]]>

• External clip
• External mask

Cross-document scripting

• SVG documents referenced by 'animation' support scripting

  	<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"/>

SVG to referenced SVG script example

Browser integration

• Making 'foreignObject' less foreign
• A foreignObject browser-in-browser
• A 'textArea' alternative

Browser integration

CSS

• CSS OM for SVG properties

  	var fill = element.style.fill;

• CSS properties that accept images works with SVG

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

• SVG backgrounds example
• SVG list-image example
• SVG banner with external CSS and script

Browser integration

HTML5 Canvas and SVG

• Using an SVG sprite in a Canvas

  	<canvas id="canvas" width="500" height="500">
  	<script>
  	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);
  	</script>

• SVG for Canvas patterns
• A spatial tiger leap - SVG as texture for 3D Canvas

Video

• Video support in Opera
• Using realtime SVG filters

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

• Using clipping
• Using masks

Video

Transformed video

• Realtime reflection effect
• Rotating video