Hot on the heels of an HTML5 pack for Dreamweaver, comes an HTML5 pack for Illustrator…
…however Illustrator has been able to output its work to the web for a while, particularly using SVG, so I thought I would do a little experiment and see how Illustrator outputs to SVG.
When you create some artwork you now have several choices in getting that artwork onto a web page. You can…
File > Export > canvas (html)
File > Export > png
File > Export > swf
File > Export > jpg
Also new is a free plugin called Ai2Canvas which gives us the the first export option above
However, there are in effect only two options - export to a pixel-based structure, or export to a vector-based structure. And it is the latter that I am investigating here.
If you use the new Export > canvas (html), you get the following example…
canvas output example
…and the result is a pixel-based shape - just zoom in and watch the pixels appear. What about when you Save As?
Here you can output as SVG - this being a vector result. This is what I wanted to explore, Illustrator and SVG, an example of getting your vectors onto the web.
svg save as dialog
…click on Show SVG Code. A text file will open up and you just copy the numbers between the quotes in the path element( <path d=" " /> )…
Since this is vector, it will work on any device, mobile, desktop, iPhone, iPad, etc.
My next examples will be about how to make this interactive and also to explore exactly what the Illustrator HTML5 pack does.