Adobe Illustrator CS5 HTML5 Pack

Follow these steps to get started with the Illustrator CS5 HTML5 Pack:

1. If you do not have Illustrator CS5 installed, download the free trial
2. Download the Illustrator CS5 HTML5 Pack
   
3. Follow the installation instructions
4. Read the Illustrator CS5 HTML5 Pack user guide
5. Watch the HTML5 with Illustrator CS5 episode on Adobe TV
6. Start creating for HTML5 and CSS3 within Illustrator CS5.
7. Ask questions and share your feedback in the Illustrator CS5 HTML5 Pack forum

Please note that your submission of comments, ideas, feature requests and techniques on this and other Adobe maintained forums, as well as Adobe's right to use such materials, is governed by the Adobe.com Terms of Use.

Below you'll find references and links to help you participate in the Illustrator community.

Online Forum

Ask questions and discuss ideas with other Illustrator CS5 HTML5 Pack users in the Labs forums.

• Visit the Illustrator CS5 HTML5 Pack forum

Please note that your submission of comments, ideas, feature requests and techniques on this and other Adobe maintained forums, as well as Adobe's right to use such materials, is governed by the Adobe.com Terms of Use.

Adobe TV

Greg Rewis walks you through demonstrations to get you up to speed with creating SVGs for multiple devices and the web.

Watch the HTML5 with Illustrator CS5 episode on Adobe TV

Resources

If you want to learn more about releases on Labs as well as other Adobe technologies, visiting a user group or connecting with an Adobe Community Expert is a great place to start.

• Find a user group
• Find an Adobe Community Expert

• Documentation
• FAQ
• System Requirements
• Release Notes

Documentation

• Read the Illustrator CS5 HTML5 Pack user guide
• Watch the HTML5 with Illustrator CS5 episode on Adobe TV

FAQ

What is the Illustrator CS5 HTML5 Pack?

This add-on 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 Dreamweaver CS5 11.0.3 updater, these new tools allow web designers to take advantage of the latest advancements in HTML5.

Who should try the Illustrator CS5 HTML5 Pack?

Primarily web designers who use Illustrator CS5. This add-on is for users that want to try out the latest in web development technologies and learn skills to stay competitive. The technology addresses workflows where designers and developers work together to create rich interactive design (created using Illustrator CS5) for the web and introduces features to make the workflow easier.

Do I need to have Illustrator CS5 15.0.2 to use this extension?

Yes. If you haven't already, download the Illustrator CS5 15.0.2 updater.

Why not support all of the CSS3 specs?

HTML5 and CSS3 are still works in progress. While some of the specs are finished or stable, many are still under development or have no current browser support.

Where can I post issues and comments?

Please use the Illustrator CS5 HTML5 Pack forum to ask questions and post issues/comments.

Why was the functionality and features of HTML5 not part of Illustrator CS5 at ship?

During the planning and development of Illustrator CS5, future browser support for the evolving HTML5 and CSS3 specifications was uncertain, and we did not foresee any compatibility issues in the CS5 time frame. While the official specifications are still not yet complete, they are now supported to varying degrees by a number of different desktop browsers—and more importantly by most smartphones using Webkit-based browsers (e.g. iPhone, Android, Nokia WRT, Blackberry OS). Given the recent surge of interest around HTML5, a preview of Illustrator compatibility with HTML5, CSS3 SVG is being provided so that you can begin exploring their potential as quickly as possible.

Why is this being released on Adobe Labs?

Our objective is to get new functionality in the hands of web designers and developers as early as possible. Adobe continues its support for the evolving web standards and this technology release on Adobe Labs provides a platform for feedback that we can incorporate into future releases of Illustrator.

What is included in the Illustrator CS5 HTML5 Pack?

1. SVG and Canvas—Mark any of your objects as a canvas element. During export of the design to SVG, the generated SVG contains the <canvas> element for the marked objects. This generated SVG can later be used by developer to get the pixel level control on the required objects.
2. Parameterized SVG—Mark selective attributes of an object (fill/stroke color, fill/stroke opacity, stroke color) in a design as variables. When exported to SVG, this results in the generation of a parameterized SVG that can be bound to the actual values during publishing/runtime.
3. Multi-Screen SVG—Export individual Artboards as separate SVGs and a sample CSS snippets. This allows you to design for multiple screen sizes (each Artboard representing one screen). The sample CSS snippet has the media query inside it and can be used to pick the correct SVG based on the media size as represented by the Artboard size.
4. CSS enhancements / mapping appearance of objects from Design to Web—Export of certain visual appearance attributes (Fill/Stroke/Opacity/Gradients) as a CSS. The CSS generated can then be used by the developer to achieve the same appearance which the designer intended to create.

System Requirements

Illustrator CS5 15.0.2 is required. The Illustrator CS5 system requirements are available on Adobe.com. This technology is available only in English.

Release Notes

This release of the Illustrator CS5 HTML5 Pack is designed for evaluation purposes only. The software contained is not final; however, many portions of the technology are fully implemented and ready for you to try and discuss.

There are some workflows that are not yet fully supported. This technology is intended as a compatibility update and is a starting point for HTML5 support within Illustrator.

Known Issues

• The drop-down in preview html page generated during multi-svg export, doesn’t work on all browsers. In that case try to resize the browser window manually to see the correct SVG being picked.
• All fonts used in the document are embedded in all artboards irrespective of whether it is used in the artboard.
• Round-trip workflows for SVG (generated without “Preserve Illustrator Editing Capabilities” Checked)with Canvas are not supported as of now.
• Objects which cannot be converted to raster (by Object > Rasterize) cannot be exported as canvas in SVG. These would remain native SVG objects and user is not warned about the same.
• The SVG containing canvas, when opened in Opera, requires minimize/maximize once to render the canvas within it.
• If a single object split into group in SVG then parameterization is lost.
• Round-trip workflows for SVG (generated without “Preserve Illustrator Editing Capabilities” Checked)with parameterized content are not supported as of now.
• Rotation, Flip transformations applied to an object is not considered while exporting Gradient to CSS.
• For exported graphics styles in SVG, the basic properties like stroke, fill, opacity, gradients etc works fine. Other attributes like clipping-path may not produce expected results.