SVG Masks, HTML5 video and Firefox 4 « Atomic Robot Design. Earlier this month, Paul Rouget, who’s a evangelist for Mozilla posted a video where he demonstrated some of the new features that are coming with Firefox 4.
And I have to say, the stuff he shows off is for the first time, a real example of how HTML5 and CSS3 can replace things like basic Flash animation. A lot of the stuff he shows off is really amazing and one that stuck out at me was around the 4 minute mark, where the text Firefox acts as a mask for a video. Now, this was definitely something that could only be accomplished in Flash, so I really wanted to know how to do it and unfortunately there was nothing out there to tell me how. After some trial and error though, I managed to figured it out, mainly because, thanks to Firefox 4, it’s not at all that hard. Here’s what what I made. SVG at Google and in Internet Explorer. At Google we're excited about new web technologies like HTML 5, CSS 3, Web Fonts, SVG, faster JavaScript, and more.
It's an exciting time to be a web developer, especially with the major advancements made in modern browsers like Firefox, Safari, Opera, and Chrome the last two years. In this blog post I want to share some of the work we've been doing with SVG in particular. Today kicks off the start of the SVG Open 2009 conference, hosted at Google this year. The SVG Open conference is an annual conference where the SVG community comes together for three-days. Other sponsors of the conference this year include Microsoft and IBM. What is SVG? SVG, or Scalable Vector Graphics, is an open web standard that makes it easy to add interactive vector graphics to your web pages. Just as HTML gives you simple tags such as Why Google is Excited About SVG We're excited about SVG for a host of reasons: First, SVG is part of the HTML 5 family of technologies. <! Produces: What Are Some Places We Use SVG? HTML5 SVG. Advertisements SVG stands for Scalable Vector Graphics and it is a language for describing 2D-graphics and graphical applications in XML and the XML is then rendered by an SVG viewer.
SVG is mostly useful for vector type diagrams like Pie charts, Two-dimensional graphs in an X,Y coordinate system etc. SVG became a W3C Recommendation 14. January 2003 and you can check latest version of SVG specification at SVG Specification. Viewing SVG Files Most of the web browsers can display SVG just like they can display PNG, GIF, and JPG. Embedding SVG in HTML5 HTML5 allows embedding SVG directly using <svg>... <svg xmlns = " ... Firefox 3.7 has also introduced a configuration option ("about:config") where you can enable HTML5 using the following steps − Type about:config in your Firefox address bar.Click the "I'll be careful, I promise! " Now your Firefox HTML5 parser should be enabled and you should be able to experiment with the following examples. HTML5 − SVG Circle Live Demo.