Illustrator and SVG, getting your vectors onto the web

0800 156 0777

Illustrator and SVG, getting your vectors onto the web

Hot on the heels of an HTML5 pack for Dreamweaver, comes an HTML5 pack for Illustrator…

http://labs.adobe.com/technologies/illustrator_html5/

…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…            

illustrator export

illustrator export

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

canvas output example

 

Notice the html, you get a canvas element but the actual shape is created via JavaScript…

 

canvas javascript example

canvas javascript example

 

…and the result is a pixel-based shape - just zoom in and watch the pixels appear. What about when you Save As?

 

save as

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.

So what do we actually get? Well, if you make up your own web page, and then use JavaScript to write the SVG commands onto the page, you will get a vector shape - for this example I use Raphaël, a lovely JavaScript library for drawing on your web page. I am also using JQuery. So here is the HTML…

 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example</title>
</head>
<body>
<div id="container">
<header>
<h1>Interactive button</h1>
</header>
<div id="button">    </div>
</div>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  <script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')</script>
<script src="js/raphael-min.js"></script>
<script src="js/button.js"></script>
</body>
</html>
 
The JavaScript file, button.js, will hold the requisite commands for creating our svg object, and the actual svg numbers will come from Illustrator. Here is the JavaScript…
 
function Button(domID, width, height)
{
var self = this;
var icon;
self.init = function()
{
self.paper = Raphael(domID, width, height);
self.setupIcon();
}
self.setupIcon = function()
{
icon = self.paper.path(" … "); //svg numbers from Illustrator go here between the quotes
icon.attr({
"scale": 2
});
icon.attr({
"fill": "#00ff00"
});
icon.attr({
"cursor": "hand"
});
}
self.init();
}
var button;
jQuery(function()
{
button = new Button('button', 1000, 300);
});
 
Put this all together and this is what you get…
 

svg example

svg example

 
The beauty of this, is that it is a vector shape, so if you enlarge the image it will still look nice and crisp. To get the actual SVG numbers from Illustrator go to Save As > SVG. From the resulting dialog…
 

svg save as dialog

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="   " /> )…

 

svg numbers

svg numbers

 

I found that to get it working I also had to strip out all the carriage returns and some odd control characters to make sure that there was just a string of pure numbers. Once I did that I just copied the numbers into the JavaScript file (noted above).

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.