Ai2html – Converts your Illustrator document into HTML and CSS
ai2html.orgI don't currently have access to an install of Illustrator but I'd be very interested to see some sample output.
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.
If you look at the bottom of the ai2html site, you can see it was made and owned by the NY Times.
Right - so it mainly seems to be "text labels to html - everything else to a .png"?
Maybe a silly question, but why not just export the illustrator file (when inside Illustrator) as SVG?
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.
Scripting
Isn't that precisely what SVG lets you do?
No I mean turning .ai files into html & css files without human intervention
https://www.youtube.com/watch?v=Xkj5oWt-G4o
Simple demo.
Though it does similar things and shares the name, that's not the same tool.