Adobe Illustrator CS5 HTML5 Pack Improves SVG and CSS3 Creation

Adobe announced today the immediate availability of the Adobe Illustrator CS5 HTML5 Pack, an extension of Illustrator CS5 designed to make it easier to output SVG graphics and CSS3 styles for use with HTML5 web layouts. This is surprising news despite Dreamweaver’s own HTML5 Pack, introduced last summer—Illustrator has never been considered a vital tool for web designers. However, the strategy behind the Illustrator CS5 HTML5 Pack suggests it might eventually be as important as Photoshop to web designers.

SVG (Scalable Vector Graphics) has been around for over 10 years but has been seldom used by web designers. HTML5 allows designers to embed SVG graphics in documents and not rely on pixel-based bitmap graphics for web design. SVG graphics look sharp and clear no matter the browser’s zoom settings and can be modified with JavaScript or HTML5’s canvas element. The HTML5 specification is not yet implemented by all browsers and SVG is not supported by Internet Explorer, so consider the HTML5 Pack a forward-thinking addition to Illustrator.

The Illustrator CS5 HTML5 Pack does four major functions:

  • Export artboards as SVG graphics and include CSS3 media queries
  • Create widgets with dynamic vector art that can be manipulated by data sources
  • Implement SVG graphics and HTML5 canvas to create interactive art
  • Export character styles and object appearances as CSS3 styles

The first function is particularly important because it plays into Adobe’s strategy of helping designers deploy to multiple devices. The idea is to create artboards for various devices—computers, tables, mobile phones and TV—and output SVG graphics and a CSS file that serves up the right graphics depending on the user’s window size.

Visit www.adobe.com/go/illustrator_html5 to download the HTML5 Pack and view demos, forums, the press release and download a trial of Illustrator CS5. The HTML5 Pack requires the most recent update of Illustrator (CS5 15.0.1) so be sure to use the Help > Updates… command in Illustrator if you don’t have the most recent version of CS5. Also note that this is not a public beta but is instead a “compatibility update” that isn’t final. I expect it will be rolled into an Illustrator dot-update the way Dreamweaver’s HTML5 Pack was added to its 11.0.3 update a couple weeks ago.