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.
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:
Note that you can’t just select an object and click on the newbutton 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 smallindicator 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– 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 to something more meaningful. The name seemed an obvious choice:
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.
Note that the parameter was edited so thatwas used in reference to the shape named in Illustrator. Also, the 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:
When opened in Safari (but it equally works in all major web browsers), the following correct result was produced:
Adding Phantasm CS color effects
Once the basic functionality was tested to work, including the newoption (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.
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 Safarishowed that the halftone dots remained as perfect vectors:
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.
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!