Sunday, September 12th, 2010

Adobe Announces HTML5/CSS3/SVG Pack for Illustrator

Category: Adobe, CSS, SVG

<p>Exciting news from Adobe; they’ve announced a new HTML5 Pack on Adobe Labs with support for HTML5, CSS3, and SVG:

Adobe is pleased to announce the availability of the Adobe® Illustrator® CS5 HTML5 Pack. This add-on for Illustrator CS5 15.0.1 provides initial support for HTML5 and CSS3, extends SVG capability in Illustrator CS5, and helps you easily design web and device content. In combination with the HTML5 features available in the Adobe Dreamweaver CS5 11.0.3 updater, these new tools allow web designers to take advantage of the latest advancements in HTML5.

While HTML5 and CSS3 will not be finalized for some time, and SVG support in browsers will continue to evolve, the extension provides support for a set of currently implemented features.

Some of the benefits of the HTML5 Pack:

  • Efficiently design for web and devices by exporting Illustrator Artboards for unique screen sizes using SVG and CSS3 media queries.
  • Create web widgets with Illustrator by generating dynamic vector art for data driven web work-flows.
  • Take advantage of the latest enhancements to SVG and Canvas to generate interactive web content.
  • Map artwork appearance attributes from designer to developer tools—export from the Illustrator Appearance Panel to CSS3 for streamlined styling of web pages.

Greg Rewis discusses it more in the video below:

Mordy Golding has a good description of some of the new features in this lab pack:

Parameterized SVG

You can designate certain attributes (i.e., fill, stroke, opacity) as variables right from the Appearance panel in Illustrator. When saved as SVG, developers can easily change the variable definition to “reskin” or modify the art. You can even create global variables.

Multi-screen SVG

You can create multiple artboards in Illustrator at various sizes, for example to design art for different screen sizes. You might do this to create different designs for mobile, tablet, and desktop versions of a design for example. You can then save your file as SVG and include all the different artboards. Illustrator creates an HTML file and a CSS file, along with separate SVG files for each artboard. The CSS uses media queries to detect the screen size and automatically serves up the correct SVG image.

Mark objects as canvas in SVG

You can select an object on the Illustrator artboard and then choose Object > HTML5 Canvas > Make. These elements are rasterized and included as canvas elements when saved as SVG, giving developers the ability to control the elements via JavaScript.

Export named character styles as CSS

You can define character styles in your Illustrator document, and then export those character styles as a valid CSS file. You can do this directly from the Character Styles panel.

Export artwork appearances as CSS

You can select an object in Illustrator and export valid CSS directly from the Appearance panel. Of course, if you mockup an entire page in Illustrator, you can simply select all of it and export it to a single CSS file. IDs are picked up from the Layers panel (so you want to name artwork carefully), and Illustrator can export Fill, Stroke, Opacity, and Absolute Position and Dimensions.

Include selected Graphic Styles as CSS in SVG

You can select styles from the Graphic Styles panel and choose to have them exported when you save your file as SVG. What’s really cool is that you can include styles even if they aren’t applied to your artwork. This would allow you to deliver multiple styles to a developer within a single SVG, and even programmatically swap styles.

Great work Adobe!

Related Content:

Posted by Brad Neuberg at 5:15 am
4 Comments

++++-
4.5 rating from 8 votes

4 Comments »

Comments feed TrackBack URI

It seems to me that Adobe is following Steve Jobs’ comments on developing great tools for HTML5.

Comment by lmasanti — September 13, 2010

“It seems to me that Adobe is following Steve Jobs’ comments on developing great tools for HTML5.”

Last year at Adobe’s big conference MAX, Adobe were demoing early work they had done for HTML5 support in Dreamweaver, Illustrator and even Flash, long before Steve Jobs wrote his thoughts on Flash rant. So I doubt Jobs had anything to do with it and it all have to do with the fact Adobe makes the majority of their money from tools. The better these tools are, the better support they have for a wide arrange of formats from print to web, the more money Adobe makes. Flash is just one of the tools they sell and they would be stupid (

Comment by MatthewFabb — September 13, 2010

@MatthewFabb – but, but, you’re ruining the myth that Adobe hates HTML5 and is doing everything they can to destroy it. Anyway, I too remember seeing demos of HTML5 features in various Adobe products well before Jobs started his anti-Flash/ant-Adobe nonsense. But I looked at this HTML5 pack for Illustrator and I don’t know about having to backup files manually because future updates cannot be applied unless those files are restored.

Comment by travisalmand — September 13, 2010

Illustrator has had pretty good SVG support support since 2001 with many deep features, including going as far as adding UI support for filter effects and (via the Variables palette) parameterized SVG. Good to see that Adobe is finally re-investing in this area and making Illustrator’s SVG support even better. Would be good to see SVG export out of other Adobe products, too, such as the Flash authoring tool and Photoshop.

Comment by JonFerraiolo — September 14, 2010

Leave a comment

You must be logged in to post a comment.