Ai2html – Converts your Illustrator document into HTML and CSS

by pie • 11 years ago

43 11 11 years ago

andybak2• 11 years ago

I don't currently have access to an install of Illustrator but I'd be very interested to see some sample output.

justinph• 11 years ago

It's a little buried on the ai2html site, but there is a whole host of things listed here: https://delicious.com/archietse/ai2html

It's a pretty impressive tool, and clearly the NYT uses the hell out of it.

samtp• 11 years ago

If you look at the bottom of the ai2html site, you can see it was made and owned by the NY Times.

andybak2• 11 years ago

Right - so it mainly seems to be "text labels to html - everything else to a .png"?

pcurve• 11 years ago

https://www.youtube.com/watch?v=Xkj5oWt-G4o

Simple demo.

dwtkns• 11 years ago

Though it does similar things and shares the name, that's not the same tool.

abdias• 11 years ago

Maybe a silly question, but why not just export the illustrator file (when inside Illustrator) as SVG?

SixSigma2• 11 years ago

Scripting

shiggerino• 11 years ago

Isn't that precisely what SVG lets you do?

archietse• 11 years ago

Two main reasons:

1) SVG text scales as you scale the the SVG object so the text becomes unreadable pretty quickly as the artwork scales down, or looks hilariously large as it scales up. By rendering the text as html, we can scale the "graphic" up and down, but keep the text readable at the same font-size and line-height. This is important because we are trying to reduce the number of versions of the artwork that we have to create in order to accommodate viewports that range from mobile phones up to giant desktop monitors. An example of this is here: http://nyti.ms/1CQdkwq Change your window size when you view the page and you'll see the artwork scale but the text stays the same size. More examples here: https://delicious.com/archietse/ai2html,responsive

2) When Illustrator saves the SVG, every line of text is broken into separate SVG elements which makes editing the text very difficult. By having the text rendered in HTML, it is much easier for editors to go into the CMS and make edits without having to wade through a tangle of SVG code.

Ai2html – Converts your Illustrator document into HTML and CSS

Related Stories