HTML and CSS Reference
Media Elements and SVG
In March 2010, Paul Irish wrote about spending some time with folks proficient with SVG,
and provided a web page demonstrating how to use SVG and HTML5. At Webjam8, Andreas
Bovens demonstrated the use of HTML5 media elements with SVG and SMIL. Mike Thomas
showed how to use SVG masks with video to beautiful effect. Mr. Doob demonstrated how to
combine SVG and HTML5 audio to create a 3D Waveform. Erik Dahlström created a terrific
music video based, in part, on the use of SVG patterns.
Combining HTML5 media elements and SVG is combining the best of the old and new from
the W3C. The HTML5 media elements are new, but already demonstrate robustness and ex-
tensibility. SVG has been around for over a decade and with the advent of HTML5, is now
supported in HTML as well as XHTML.
There are two ways you can combine the HTML5 media elements with SVG: using the SVG
capabilities with media elements within an HTML document, or embedding an HTML5 me-
dia element within an SVG document.
Mike Thomas's demonstration combining HTML5 video with SVG masks can be found at ht-
presentation can be seen at http://my.opera.com/ODIN/blog/2008/10/20/my-webjam-8-presentation-
Irish's demo page and video can be found at http://paulirish.com/2010/svg-filters-on-html5-video/ .
Mr. Doob's Waveform can be launched at http://www.chromeexperiments.com/detail/3d-waveform/ .
Erik Dahlström's work can be seen at the SVGWow page, http://svg-wow.org/blog/2011/03/28/
Adding an HTML5 Video to an SVG Document
Most demonstrations of using SVG and HTML5 video together are based on SVG and the
video element embedded into an HTML or XHTML document. However, Chris Double cre-
ated a nice video/SVG demonstration page where multiple videos are stacked in a web page,
and can be resized and rotated about using SVG functionality.
The real issue with using videos in SVG is that SVG is famous for being able to scale without
degrading. Video, on the other hand, does not scale. If you increase the size of the video file,
all you'll get is a blurry, pixelated picture.
Still, if you're familiar with SVG, it's fun to give HTML5 video and SVG a try.