Yesterday, the Chrome Developer Relations team launched several new resources, including the Field Guide to Web Applications. It’s a new resource that is designed to help web developers create great web apps. We’ve heard loud and clear from users that they want more and better web apps, and we hope this new field guide will enable you to create those web apps. Our fictitious author Bert Appward guides you through topics like the properties of web applications, design fundamentals, tips for creating great experiences, and a few case studies that put best practices to use. Whether you're building your first web app or are just looking for ways to improve your existing apps, I hope you'll find the field guide useful.
We built the field guide to embody the principles and best practices that it preaches. We stepped away from the normal webpage look, and instead designed the experience around a field guide. We used many CSS3 features like box-shadow, opacity, multiple backgrounds and more to provide a rich, visual experience. To make sure that it worked offline, we used AppCache and other than some URL rewriting techniques, didn't use any server-side code. We used the HTML5 History API to maintain page state even though everything is served from a single HTML page. We've started working on a new case study about the field guide, so check back soon for that!
Pete LePage is a Developer Advocate on the Google Chrome team and works with developers to create great web applications for the Chrome Web Store. He recently helped launch the +Chrome Developers page on Google+.
By Eric Bidelman, Senior Developer Programs Engineer, Google Chrome Team
Over the past year, HTML5Rocks.com has become a top destination for developers craving to learn more about HTML5. Today, we have over 60 articles and tutorials covering the latest HTML5 tech, published by 30 contributors from around the world! We've worked hard to bring great content to the site as quickly as possible, but it's been challenging to consolidate so much information as HTML5 continues to push the web forward and evolve at an accelerated pace.
Today, we're launching an updated HTML5Rocks with better tools for finding content, including an edgy new look and "rocking" logo. As our content expands, finding things becomes more important. To address this, we've created "persona pages" with catered content in 3 different verticals (Games, Business, Mobile). If you're one of those developers, finding content relevant to you should now be a snap. We've also consolidated many of the different components (Updates, Studio, Playground) into the main site and have deeply integrated the HTML5 technology classes to bring a better identity to the content.
All in all, it's a little bit Punk and a little bit Rock and Roll.
Lastly, if you're interested in contributing to the site, it's an open source project and we'd love to have your expertise. See our contributors guide.
Eric Bidelman is a Senior Developer Programs Engineer on the Google Chrome Team and a core contributor to html5rocks.com. He is the author of the book Using the HTML5 Filesystem API.
Last week Angry Birds for Chrome was updated to use the Web Audio API for all its in-game audio for Chrome users, which means Chrome users get the full Angry Birds experience, without any plugins. The Web Audio API supports a wide variety of use cases, including the high fidelity and low latency requirements of games. Users of other supported browsers will still get sound via Flash or HTML5 audio.
How does this cross-browser audio magic work? As you may have seen or heard, Angry Birds was in no small part made possible by the cross-platform open source PlayN library. When building for the HTML platform, PlayN in turn relies heavily on Google Web Toolkit (GWT) to delivery a highly optimized web experience for users, and on gwt-voices to easily deliver a cross-browser audio experience.
The responsibility of choosing the appropriate audio API for the game's sound is (mostly) left up to gwt-voices, which chooses the audio API that will give the best experience. If you'd like to hear how other audio APIs perform, you can ask gwt-voices to try to use the Web Audio API, Flash, HTML5 Audio, or even native audio. Your mileage will vary by browser and platform and which plugins you have installed. Also, gwt-voices will select the best available fallback, if the desired audio API is not going to work at all in your environment.
Fred Sauer is a Developer Advocate at Google where most of his time is devoted to Google App Engine and Google Web Toolkit. He is the author of various GWT related open source projects including gwt-dnd (providing in browser Drag and Drop capabilities), gwt-log (an advanced logging framework) and gwt-voices (for cross browser sound support). Fred has dedicated much of his career to Java related development, with an increasing focus on HTML5.
This is the last Fridaygram of 2011, and like most everybody else, we’re in a reflective mood. It’s also the 208th post on Google Code Blog this year, which means we’ve averaged more than one post every two days, so that’s plenty of stuff for you to read. What did we write about?
Many of our 2011 posts were about the steady progress of App Engine, Cloud Storage, and other cloud topics for developers. We also published several times about commerce and in-app payments.
2011 was a stellar year for Google I/O and other developer events around the world. Some of our most popular posts provided announcements, details, and recaps of these events. And we welcomed a couple dozen guest posts during Google I/O from developers with cool stories to tell.
The two most popular Code Blog posts of the year were both launches: the Dart preview in October, and the Swiffy launch in June.
Last, and surely least, I posted 26 Fridaygrams in an attempt to amuse and enlighten you. Thank you for reading those, and thanks for dropping by and reading all the posts we’ve thrown your way this year. See you in 2012!
We launched Google Swiffy in July. Swiffy enables you to convert Flash SWF files to HTML5. One of our main aims for Swiffy is to let you continue to use Flash as a development environment, even when you’re developing animations for environments that don’t support Flash.
To speed up the development process, we’ve built the Swiffy Extension for Flash Professional. The extension enables you to convert your animation to HTML5 with one click (or keyboard shortcut). The extension is available for both Mac and Windows, and it uses Swiffy as a web service, so you’ll always get our latest and greatest conversion. Information about the conversion process is shown within Flash Professional.
You can download the Swiffy Extension from the Google Swiffy site. We hope it will streamline your workflow when you use Flash and Swiffy to produce HTML5 animations. Please let us know how well it works for you via our feedback page.
Esteban de la Canal is a Software Engineer on the Swiffy team. He also enjoys game development, particularly weird-looking snake-like games in Flash.
In June we released Swiffy, an experimental tool to convert Flash to HTML5, on Google Labs. We were thrilled with the response: in the first month, Swiffy users converted hundreds of thousands of files.
We received a lot of feedback from developers after the launch, and we learnt a lot from studying the warnings generated in the conversion process. As a result, we’ve released several improvements over the last few weeks. For example, Swiffy now supports shape tweening and drop shadow, blur and glow filters, all using SVG, CSS and JavaScript. Some of these filters can be seen in action in this Chrome ad (on a browser with SVG filter support).
We’ve also made Swiffy easier to use. You can now convert files of up to 1MB, and you’ll get a QR code to preview the output on a mobile device. We’ve also made it clear that you can host the Swiffy runtime (the JavaScript file that controls the animation) yourself if you need to.
Over the past year, the web application ecosystem has been growing at an accelerating pace. Faster browsers and powerful web platforms like HTML5 have enabled developers to switch from native code to web based apps.
That’s why the Google Chrome and Commerce teams are holding several HTML5 Web App hackathons around the United States in early August. This is a great opportunity for developers to socialize, network, and play with the latest web APIs. During the hackathons, we'll cover the end-to-end process of developing an HTML5 application, publicizing with Chrome Web Store, and finally monetizing with In-App Payments.
In true hackathon style, participants will have the opportunity to create teams and work on a project together. At the end of the day, participants will present what they have created, and vote on the best apps or games. And of course we’ll have some awesome prizes for the winners.
The event is free of charge but space is limited. For more information and to register, please visit the location-specific links below:
We’re looking forward to seeing the applications and games you build!
Mihai Ionescu is a Developer Advocate at Google helping developers build compelling applications using open web technologies. In his free time, when not skiing in the Sierras, Mihai enjoys traveling and exploring the great outdoors with his family.
Some Google projects really do start from one person hacking around. Last summer, an engineering intern named Pieter Senster joined the mobile advertising team to explore how we could display Flash animations on devices that don’t support Adobe Flash player. Pieter made such great progress that Google hired him full time and formed a team to work on the project. Swiffy was born!
Today we’re making the first version of Swiffy available on Google Labs. You can upload a SWF file, and Swiffy will produce an HTML5 version which will run in modern browsers with a high level of SVG support such as Chrome and Safari. It’s still an early version, so it won’t convert all Flash content, but it already works well on ads and animations. We have some examples of converted SWF files if you want to see it in action.
Swiffy uses a compact JSON representation of the animation, which is rendered using SVG and a bit of HTML5 and CSS3. ActionScript 2.0 is also present in the JSON object, and is interpreted in JavaScript in the browser. This representation makes the Swiffy animations almost as compact as the original SWF files.
Swiffy is a great example of how far the web platform has come. Swiffy animations benefit from the recent advancements in JavaScript execution speed and hardware accelerated 2D graphics in the browser. Viva la Web!
Update Sep. 8, 2011: links updated to reflect Swiffy's move out of Labs.
Marcel Gordon is the Product Manager for Swiffy, doing the make-up and carrying the drinks. On the weekends he dresses up as a pirate and takes his hamster for short walks.
Impact is a JavaScript game engine that uses the HTML5 Canvas and Audio elements for graphics and sound, instead of relying on any browser plugins. Impact's main focus is on classic 2D games. Examples include the Biolab Disaster Jump'n'Run game and the Z-Type Space Shooter. These games, like many other 2D games, draw sprites in front of multiple background layers.
Each background layer is drawn from a tileset, an image containing all the individual building blocks, and a tilemap, a 2D array that tells the renderer where to draw each of these tiles. Similarly, sprites are drawn from an animation sheet, an image with all the animation's frames.
This technique has proven so efficient and flexible that it was enforced in hardware on early game consoles: the Super Nintendo could not do anything other than draw tiled background maps and sprites. There was no way to directly access single pixels on the screen.
The HTML5 Canvas element is perfectly equipped for these kinds of games. Most importantly, the Canvas API's drawImage() method allows us to draw only a certain part of a tileset or animation sheet to the screen. In Impact, however, you don't have to deal with any of the Canvas API methods directly. Instead, you specify your tilemaps and animation sheets and let the engine handle the details.
This is how you'd create an animation from an animation sheet:
// Each animation frame is 16x16 pixels
var sheet = new ig.AnimationSheet( 'player.png', 16, 16 );
// This creates the "run" animation: it has 6 frames (the 2nd row
// in the image), with each one being shown for 0.07 seconds
var run = new ig.Animation( sheet, 0.07, [6,7,8,9,10,11] );
Similarly, here's the code needed to create and draw a background layer:
// Create a 2D tilemap
var map = [
[5, 3, 4],
[2, 7, 1],
[6, 0, 3]
];
// Specify a layer with a tilesize of 16px and our tilemap
var layer = new ig.BackgroundMap( 16, map, 'tileset.png' );
layer.draw();
You don't have to create these tilemaps by hand. Impact comes with a powerful level editor called Weltmeister, which makes it easy to draw background layers and position your entities (non-static objects in the game world) in your levels.
When drawing on a Canvas, the performance is mostly bounded by the number of draw calls. It is far more efficient to draw one or two very large images than to draw several hundred small ones. This means that drawing background layers tile by tile can be quite slow, especially on mobile devices.
The Impact engine therefore has a special "pre-render" mode that you can enable on background layers. This mode will first draw the tilemap into large chunks of 512x512 pixels when loading a level, and then use these chunks to fill the screen instead of drawing the layer tile by tile. With this technique, you can get good frame rates even for fast-paced games on Android and iOS devices.
Impact also handles sound, input, timing, and much more for you. It's by no means a game engine that can do everything – and it doesn't try to be one – but it's very good at the things it can do.
Dominic Szablewski is the creator of the Impact Game Engine. He recently finished his Bachelor Thesis about HTML5 Gaming and now lives the dream by selling Impact and making games.
(Updated 10 Dec 2010 -- corrected link to 3rd Place Hilversum developer Kornel Lesinski's Twitter page.)
Last month, more than 50 developers assembled in Hilversum, Netherlands, and San Francisco, California for an HTML5 game jam.
The idea of HTML5 gaming may seem unusual, but if the results from this event are anything to go by, there will be plenty more HTML5 games in the future. In just over 24 hours of coding, attendees were able to produce the seeds of great games, powered by standard web technologies. The games we saw were novel, visually appealing, and in many cases, already very playable.
HTML5 is making it easy to develop games for standard web browsers, and it also provides a way for developers to reach mobiles and tablets with a single code base. Watch for other initiatives, like Mozilla's current HTML5 gaming competition, to take HTML5 gaming to the next level.
Here’s a look at the winners from both venues. You can see a detailed list of all the entries here.
A novel 8-bit style game where you “leap” over the bad guys. A good demo of the Canvas element and a complete game with levels and scoring. Congratulations David Ganzhorn and Mike Rotondo on winning the HTML5 Game Jam in the USA.
A puzzle game where you build a fortress to protect the monkey, demonstrating a physics engine in Canvas. Congratulations Tom Hastjarjanto on winning the HTML5 Game Jam in Europe.
Second Place, San Francisco: Shell Shock
A platform shooter involving turtle-like creatures on wheels, using Canvas. By Wolff Dobson, Charles Lee, Nicolas Coderre, Dan Fessler, Sara Asher. (No online demo at present.)
Second Place, Hilversum: Snakes
A refresh on the classic “Snake” game, demonstrating multiplayer powered by NodeJS and WebSocket, and 3D transforms of the canvas element. By David Durman & Ales Sturala. (No online demo at present, but code repository available.)
A stunning 3D game inspired by the classic Syndicate series showcasing just how far we’ve come with Canvas-based graphics. Observe the collision detection and be sure to hit the “Flying Carpet” button as well as the space bar to fire! This game was also shown in the “Web or Native for Mobile Development?” session at the recent Google Developer Days conferences in Europe. Created by Kornel Lesinski, Peter van der Zee, and Edwin Martin.
A few other readily playable games you might enjoy are:
We were also honoured to have keynotes by two pioneers of web-based gaming. In Hilversum, the speaker was Tino Zijdel, creator of DHTML Lemmings back in 2004. Tino, coincidentally a Hilversum local, explained the tricks he used to make the game playable on the browsers of the day. He has subsequently written his account of the Game Jam. It’s in Dutch, so here’s an English translation. There were additional presentations from from Yu Jianrong, who covered ten tips for HTML5 Game Development and Paul Irish on HTML5.
The San Francisco keynote was given by Marcin Wichary, who gave a keynote on games and HTML5. Marcin is the creator of the Pac-Man doodle and also the first version of the popular HTML5Rocks slides. Marcin talked about his experiences in recreating Pac-Man and the timeless aspects of videogaming in modern age, shared some behind-the-scenes trivia, and shared the technology used to write the doodle and debug it.
We thank SPIL Games for hosting and co-organising the Netherlands event, and we also thank Samsung for contributing a Galaxy Tab for the Game Jam at that venue. Developers working on touch apps were able to use the Tab for testing, and we later gave the device away as a prize. Congratulations all who took part!
You can find more details about the event, including links to code repositories and further demos, at HTML5GameJam.com.
Update: Thanks for all the interest and feedback on 20 Things I Learned about Browsers and the Web! We hope to open-source the code in the coming months and will post an update when we do. Stay tuned.
Twenty years ago this month, Tim Berners-Lee published his proposal for the World Wide Web. Since then, web browsers and web programming languages have come a long way. A few of us on the Chrome team decided to write an online guide for everyday users who are curious about the basics of how browsers and the web work, and how their evolution has changed the way we work and play online. Called "20 Things I Learned about Browsers and the Web," this online guidebook is illustrated by Christoph Niemann, and built in HTML5, JavaScript and CSS3, with our friends at Fi.
In building an online book app, HTML5, JavaScript and CSS3 gave us the ability to bring to life features that hearken back to what we love about books with the best aspects of the open web: the app works everywhere, and on any device with a modern browser. Here are a few features of the book experience that we’re particularly excited about:
After the app has been visited once, you can also take the experience with you offline, thanks to the Application Cache API.
You can resume reading where you had left off as the book remembers your progress using the Local Storage API. We also mark the chapters that have previously been read by folding the top right corner of the page in the navigation.
The app utilizes the History API to provide a clutter-free URL structure that can be indexed by search engines.
The HTML5 canvas element is used to enhance the experience with transitions between the hard cover and soft pages of the book. The page flips, including all shadows and highlights, are generated procedurally through JavaScript and drawn on canvas.
The canvas element is also used to animate some of the illustrations in the book.
CSS3 features such as web fonts, animations, gradients and shadows are used to enhance the visual appeal of the app.
This illustrated guidebook is best experienced in Chrome or any up-to-date, HTML5-compliant modern browser. We hope you enjoy the read as much as we did creating it, at www.20thingsilearned.com or goo.gl/20things.
There’s an exciting new event happening December 6th dubbed the “Woodstock for Cloud Developers.” We’ll be participating at Cloudstock, an industry event taking place in San Francisco’s Moscone West, that brings together a growing developer community and some of the leading cloud technology companies (such as Google, vmware, Salesforce.com and Amazon) to learn, hack and network.
Google is a strong believer in the open technologies powering the web, such as HTML5. Cloud computing is about powering innovations on the web with platforms and services that make developers like you more efficient and allow you to concentrate on solving business problems. No longer do you have to worry about the hassle of acquiring and managing servers, disks, RAM and CPU-- it’s all accessible in the cloud.
Google will be presenting the following sessions at Cloudstock:
Introduction to Google’s Cloud Platform Technologies (Christian Schalk)
This talk will provide an in depth review of Google's Cloud Platform Technologies by first reviewing both Google App Engine and App Engine for Business followed by an introduction to Google's new cloud technologies: Google Storage, Google Prediction API and BigQuery. Throughout the presentation, in depth technical demonstrations will be given showing how to use these technologies together in an integrated manner.
Selling your Cloud App on the Google Apps Marketplace (Ryan Boyd)
This demo-focused session will review how to integrate your app with Google Apps and sell it on the Google Apps Marketplace to reach 30 million users at 3 million businesses. It will dive into the SaaSy Voice demo application, showing how technologies like OpenID-enabled Single Sign-On, OAuth and AtomPub make it easy to create great user experiences for your customers.
We have another session which will be announced shortly-- stay tuned to this blog and the GoogleCode twitter account!
This has been an exciting year for web developers, with all the new features being made possible by HTML5 and browsers getting faster by the day. One of the big surprises has been the rise of HTML5 gaming, with the open technology stack of HTML, CSS, and Javascript becoming a viable platform for games on the web. That’s why, next month, SPIL Games and Google will be running an HTML5 Game Jam event on both sides of the Atlantic, and you’re invited!
In the Netherlands, we’ll be hosting a sleepover event at the Hilversum headquarters of SPIL Games. SPIL recently converted their 47 mobile portals to work on mobile HTML5, and is running a $50,000 HTML5 games contest. Hilversum is a quick train journey from Amsterdam and the spacious premises are the perfect setting for hardcore games hacking, which means we’ll be coding HTML5 games all weekend. Participants will be able to sleep over on-site. In which case, please bring a sleeping bag, change of clothes, and don’t forget your toothbrush! We’ll also mail out a list of hotels in the Hilversum area for those who’d rather book a room instead (at your own cost).
Meanwhile, we’ll be running a parallel event at Google’s office in downtown San Francisco. We won’t quite be pulling an all-nighter like our friends in the Netherlands, but we will keep our doors open till midnight.
This will primarily be a hands-on hackathon in both locations, which runs from Saturday October 9th, 10am to Sunday October 10th, 6pm. We’ll kick off with short talks on the technology, followed by pitches from anyone with ideas on a great game. Then it will be hacking all day. We’ll pick up again on Sunday at 10am, and wrap up at 6pm with presentations and judging. There will also be chillout areas with games and diversions, and food and drinks to fuel your frenetic hacking.
The event is free of charge and places are limited. Sign Up here, and we’ll mail back with confirmations soon. We’re looking forward to see what games you can build using HTML5!
Today we’re excited to announce the band Arcade Fire’s new project “The Wilderness Downtown,” an interactive HTML5 music experience that is being showcased on Google’s Chrome Experiments site. The project was created by writer/director Chris Milk with Arcade Fire and Google.
We put everything except the proverbial kitchen sink into this project: It features HTML5 audio, video, and canvas, animated windows with JavaScript controllers, mash-ups with Google Maps and Street View APIs, and an interactive drawing tool. You can take a look at how all this works by viewing the source code.
Anyone that’s following HTML5 knows how fast things are moving! To keep you informed with all of the amazing features landing in today’s browsers, we’ve added five new articles, a heap of new resources, and a much needed RSS feed for staying tuned in. We're also revealing a new component of the site, the HTML5 Studio. It’s a collection of standalone demos that highlight hot, new HTML5 features working together.
If you'd like to contribute code, guides, or samples, we’re working on a third-party contributors guide. Please stay tuned! In the meantime, you can get in touch with us on the bug tracker or via @ChromiumDev.
By Eric Bidelman, Google Chrome Developer Relations
The term "HTML5" covers so many different topics that developers have a hard time getting up to speed on all of them. Some APIs and features are part of accepted standards, while some are still a work in progress. Additionally, there are a number of great resources out there, but most are still very hard to find. As announced on the chromium.org blog, Google is releasing a new developer resource dedicated to all that is HTML5, HTML5Rocks.com.
The site is broken up into four main sections:
Interactive Presentation The presentation everyone is talking about! An interactive slide deck written entirely in HTML5 which demonstrates many of HTML5’s features. It even includes inline examples you can tinker with.
HTML5 Playground The best way to learn this stuff is to try it out. The Playground is a sandbox area for editing and experimenting with live samples.
Tutorials We're launching the site with an initial set of nine tutorials covering a bunch of different areas. We’ll continue to add more over time based on your input.
Resources We've hand-picked some of our favorite tools, reference material, and sites; all generated by the online community. Do check them out. They’ll come in handy when developing your next web app.
We hope HTML5Rocks will help developers put HTML5 to use in the real world, today. We’d love to hear your thoughts on improving the site! Send us a tweet at @ChromiumDev or post to the Chromium HTML5 group with requests for content.
By Eric Bidelman, Google Chrome Developer Relations
Extensions -- previously available on Google Chrome for Windows on the beta channel -- and are now available to all users. Extensions enable you to provide additional functionality not just on your site, but to bring content and functionality from your site into the browser regardless of what sites the user has open. Google Chrome extensions use the same multiprocess technology that makes the browser fast and more secure, so that extensions won't crash or slow down your browser.
In addition, we're excited to introduce a number of new HTML and JavaScript APIs in Google Chrome, including the Web Storage and Web SQL Database APIs, WebSockets, and more. For more details about these APIs, read further on the Chromium Blog.
If you have questions about the extensions APIs, the extensions discussion group continues to be the best place to get answers. For the new HTML and JavaScript APIs, check out the newly created Chromium HTML5 group. And for those of you who are interested in attending Google I/O, check out the current list of Google Chrome sessions.
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. Vector graphics, as opposed to bitmap graphics like JPG, GIF, or PNG files, describe the shapes on your screen with mathematical equations rendered by your computer rather than pixels. This allows vector graphics to stay beautiful and crisp whether displayed on a 40" monitor or a small mobile device.
Just as HTML gives you simple tags such as <form> or <table> to add to your web pages, SVG gives you such graphical tags as <circle> or <rect> for a rectangle that you can drop into your web page. Working with SVG is very similar to working with HTML - you use JavaScript to animate and make things interactive, CSS (Cascading Style Sheets) to add style, etc.
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. One of the major new features of HTML 5 is the fact that you can now drop SVG tags into normal HTML, directly embedded into your page. We're excited about how this will empower developers. Here, for example, is a small code sample that embeds an SVG circle and rectangle right into an HTML 5 page:
Second, we like that SVG is composed of text and markup, just like HTML. Because it's markup, search engines have a much easier time working with SVG; server-side languages like PHP or Google App Engine can simply emit SVG just like they generate HTML; and users and developers can easily view the source just like a normal web page to learn and move things forward. It's also easy to import and export SVG into tools like the open source Inkscape drawing package or Adobe Illustrator.
Third, the compact size of SVG when combined with HTTP GZip compression can easily make the images on a page roughly an order of magnitude smaller, and when directly embedded into an HTML 5 page can decrease the latency of a page by reducing the number of fetches. Small and fast are definitely two things we like at Google, and we like that SVG helps enable both.
Fourth, SVG integrates with the rest of the web stack, including JavaScript, CSS, and the DOM (Document Object Model). Even better, developers can easily adapt the skills they already know when working with SVG.
Finally, SVG is an open standard that is vendor-neutral. It also has accessibility built in, so when screen readers start to work with SVG your content will be future-proofed with accessibility baked in. We also like that SVG is now natively supported on all modern browsers, including the iPhone.
What Are Some Places We Use SVG?
We use SVG ourselves in a range of products. In Google Docs, for example, you can insert drawings, illustrations, and diagrams using a built in drawing tool:
On all browsers we use SVG to build this user interface; on Internet Explorer we have to revert to an older technology named Vector Markup Language (VML) unfortunately.
Another example is the Google Visualization API, which lets you access multiple sources of structured data that you can display, choosing from a large selection of visualizations. Some of these visualizations (such as this one and this one) use SVG to do their drawing on all browsers except Internet Explorer.
Canvas Or SVG? Oh My!
A natural question is how SVG compares to the Canvas tag. In our opinion both are needed for the web and are suitable for different applications.
The Canvas tag can best be thought of as a scriptable image tag that you build up yourself using JavaScript. This means it is lower-level, requiring you to keep track of all objects you have placed on the canvas. This can be a benefit if you want to do a large degree of non-interactive animation, but can quickly become a burden if you need to build sophisticated user interfaces.
SVG, meanwhile, is higher-level, doing the bookkeeping necessary to keep track of where everything is, making things like mouse interaction much easier. If you don't need this interaction, however, the overhead imposed by SVG can get in the way of certain applications. Because SVG is markup, importing and exporting is much easier, including SEO and accessibility.
We believe that Canvas versus SVG is a false dichotomy. A great example of both technologies working together is the Firefox Download Tracker. This page shows real time updates across the world whenever a copy of Firefox is downloaded. SVG is used to draw the map of the world; this is an appropriate use, since we don't want thousands of lines of JavaScript for this but rather markup from a tool like Inkscape. Red circles are drawn on top of the SVG using the Canvas tag as copies are downloaded; this is perfect for Canvas as the circles are non-interactive and might number in the thousands if copies are being downloaded rapidly.
SVG In Internet Explorer and in Wikipedia
Now that you know a bit more about SVG, why we like it, and some of the places we use it, let me tell you a bit about some of the work we've been doing to support SVG lately.
In addition to hosting this years conference, we are also helping to address the fact that SVG can't be used on Internet Explorer. It's hard for developers to use new web technologies if they can't deploy them on IE. In response to this, we've been working with others in the open source community on a drop-in JavaScript library named SVG Web that brings SVG to Internet Explorer.
SVG Web cleverly uses existing facilities on Internet Explorer 6, 7, and 8 to instantly enable SVG support without the user having to download any new software or plugins. Using SVG Web plus native SVG support you can now target close to 100% of the existing installed web base, today. Before SVG Web you could only target about ~30% of web browsers with SVG.
Once dropped in SVG Web gives you partial support for SVG 1.1, SVG Animation (SMIL), Fonts, Video and Audio, DOM and style scripting through JavaScript, and more in about a 60K library. Your SVG content can be embedded directly into normal HTML 5 or through the OBJECT tag. If native SVG support is already present in the browser then that is used. No downloads or plugins are necessary other than Flash which is used for the actual rendering, so it's very easy to use and incorporate into an existing web site. Here's a quick one minute introduction to SVG Web:
SVG Web is currently in alpha and is a developer release. It's also important to note that it is a collaboration with many others in the open source community outside Google, including Rick Masters at F5 Networks and James Hight at Zavoo Labs. Google is just one participant in this open source project. Finally, a JavaScript library will never be as fast as native support; this doesn't take Internet Explorer off the hook for needing to implement SVG, but it does help developers in the here and now deploy their SVG today to get the wheel turning.
In addition to helping enable SVG on Internet Explorer, we've been working with Wikipedia. Wikipedia has an impressively large collection of SVG files that are under Creative Commons licenses. Every one of these files is available in the Wikimedia Commons; for example here is the Linux penguin Tux as SVG. We've been working with Wikipedia to enable interactive zooming and panning of these SVG files, similar to Google Maps; even better, this functionality works in Internet Explorer thanks to the SVG Web library on the sixth largest site on the web.
Today at the SVG Open show we are demoing a prototype of the Wikipedia SVG Zoom and Pan tool; deployment to the wider base of Wikipedia users will happen after the conference and an appropriate QA period. Here's a screencast showing the tool in action:
We hope you are as excited as we are about SVG and other new web technologies in the pipeline!
Last week I hosted Chris Anderson for a Google tech talk on CouchDB as part of the Web Exponents speaker series. Chris is an Apache CouchDB committer. He is co-author of the forthcoming O'Reilly book CouchDB: The Definitive Guide and a director of couch.io.
Making web applications work offline is a hot topic. Google Gears blazed the trail, and Web Storage is part of HTML5. CouchDB is a NoSQL alternative that makes it easy for web apps to run offline. This is important because even as bandwidth grows, latency is still an issue for a significant number of users, and outages or zero-bars can and do happen. CouchDB makes this a non-issue by running your application close to the user, on their device or in their browser. Chris calls this "ground computing" - a refreshing counterpoint to the oft-used "cloud computing" label. Hear more from Chris in his video and slides.
Check out other videos in the Web Exponents speaker series: