Intuitive Tools for Digital Artists

Adobe Illustrator CS5 HTML5 Pack testing

HTML5 for Adobe Illustrator title

If you follow the developments of Adobe Illustrator, you will have undoubtably come across Adobe’s relatively recent unusual gesture of providing additional functionality between major Creative Suite releases. Even though released under the “Adobe Labs” title (think Google and their seemingly eternal “Beta” releases) we can’t think of a similar precedence to Adobe’s release of the Adobe Illustrator CS5 HTML5 Pack. Adobe has to be commended for taking this step.

Astute Graphics aren’t web development experts but have sufficient knowledge to conduct some initial experiments with the new pack. Of particular interest, especially considering that we are going through our own internal testing cycle (hence the current rolling tumbleweed on this blog!) was the new pack’s interaction with Phantasm CS’ live Effect color adjustments.

Installation and defining test artwork

First, we downloaded the pack from http://labs.adobe.com/technologies/illustrator_html5/ and installed as per the instructions given, which does require backing up some Illustrator system files. Backing up is highly recommended as, remember, this is only provided as an Adobe Lab experiment.

The pack is more than an enhanced Save As… SVG option. It allows you to define elements of the artwork as being variable and accessible via HTML and Javascript. It’s not in the remit of this article to cover the full interactivity on offer, but we shall be concentrating on producing a simple change to an element’s color as per the main example provided by Adobe. And then we shall see what effect Phantasm CS live Effects have on the process.

Opening the Astute Graphics vector logo in Illustrator CS5 and following the brief instructions provided (a dedicated user forum may be found here if you need more help), the orange color was toggled to be a “variable” via the new Appearance panel button:

Toggling variability in Appearance panel

Note that you can’t just select an object and click on the new Toggle Variability button in the Appearance panel – you first need to click/highlight one of the Stroke or Fill attributes before the button becomes available.

Confirmation of the new attribute is provided with a small (X) indicator next to the color square (see above screenshot).

A second step which is necessary to make is to name the object, in this case the orange filled rounded shape, via the Layers panel. By expanding the overall layer view in which the object is placed – in this example, the default Layer 1 – the objects within the layer can be seen, selected and modified. By double-clicking on correct path, made simpler in this example by its patently orange thumbnail, it can be renamed from the default <Path> to something more meaningful. The name orange seemed an obvious choice:

Naming the shape

Export as SVG and initial test

Before exporting as an SVG file, the artwork was first saved in its native Illustrator format for future reference. All new SVG-specific attributes such as Variability are stored within the file.

Next, the File » Save As… menu was called upon again, this time opting for SVG as the format. Following the example procedure provided by Adobe (there are quite a few options in the SVG export menu), an SVG file resulted along with a Javascript file named Param.js. This Javascript file allows for the interaction with the artwork and doesn’t need to be adjusted for basic functionality.

A simple HTML file was then created in the same folder which references the Javascript file in the <head> section. The <object> tag was then inserted linking to the SVG file, along with the following <param> tag:

<param name="orange_FillColor" value="#123456" />

Note that the parameter was edited so that orange was used in reference to the shape named in Illustrator. Also, the value was set to a new blue color which should be used in place of the original’s orange color.

This resulted in the following overall code:

Code

When opened in Safari (but it equally works in all major web browsers), the following correct result was produced:

Result

It was now very easy to change referenced objects within the artwork to any desired color by simply changing the hex value within the HTML, or by using Javascript which also gives access to greater dynamic possibilities.

Adding Phantasm CS color effects

Once the basic functionality was tested to work, including the new Object » HTML5 Canvas » Make option (which effectively rasterised chosen objects when exported as SVG), the objects with variability and HTML 5 Canvas attributes had Phantasm CS live effects applied such as Hue/Saturation, Curves, Brightness/Contrast, etc.

The result was that objects with these effects were correctly exported in the intended color as defined by Phantasm CS. However, variability was lost due to the addition of a live Effect. This was a logical outcome as to maintain the dynamic nature of the color change would have required all the color adjustment tools being replicated in Javascript.

Therefore if you wish to make color adjustments in Illustrator with the intention of later exporting as SVG whilst maintaining any variability, ensure that you use the equivalent Phantasm CS Filter color tools. This will ensure a permanent change to the colors in the Illustrator artwork, just like making an adjustment via the standard Illustrator tools.

However, there was one final experiment to explore the benefits of the vector nature of the open SVG format. With the same basic logo, a Halftone effect was applied to the “ag” letters as a live Effect. This was then exported as an SVG file. Zooming into the artwork in Safari View » Zoom In / Out showed that the halftone dots remained as perfect vectors:

Vector Halftone export as SVG

Footnote

The new HTML5 SVG pack for Illustrator does what it says on the tin, and very nicely. It appears to be well integrated into Illustrator and there will surely be many developments based on this by web developers who can better access/explore the possibilities of SVG.

SVG has been around for many years and never really took off like Flash. It offers the same vector-based advantages and perhaps now is the time for it to start shining with the advances made in HTML5 and Javascript.

One concern we found was the SVG file size; the simple original AG logo demonstrated first resulted in a 106Kb SVG file size, plus a further 8Kb for the Param.js Javascript (which admittedly could be shared between SVG artwork). However, Illustrator also provided an SVG Compressed save option, which was not explored in this test, but is likely to overcome that issue.

If you have experimented with Phantasm CS used in artwork output to SVG, we’d like to hear from you and learn about any findings you made!

Written by admin

admin

Direct from the Astute Graphics Hereford HQ!

Comments (05)

  1. Pingback: Astute Graphics Blog : Adobe Illustrator CS5 HTML5 Pack testing » Web Coding Unravelled

  2. Pingback: HTML all you need to know» Blog Archive » Astute Graphics Blog : Adobe Illustrator CS5 HTML5 Pack testing

  3. Pingback: Tweets that mention Astute Graphics Blog : Adobe Illustrator CS5 HTML5 Pack testing -- Topsy.com

  4. Pingback: Astute Graphics Blog : Adobe Illustrator CS5 HTML5 Pack testing | bigcgnews.com :: Computer Graphic Update news

Leave a Reply