What if you don’t like programming, and made your visualization in Adobe Illustrator instead? And now you need to get it on the web. Well, the Illustrator ai2html plugin has you covered. It converts any Illustrator project into ready and responsive HTML and CSS.

Why use it? The FAQ explains:

Why not just export my Illustrator file as an image or an SVG?

Text in images and SVGs scale as you scale the image — so your 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://del.icio.us/archietse/ai2html+responsive

When Illustrator saves an 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.

Even if you don’t need responsiveness, it’s still a breeze to export your project into HTML and CSS.

 

Get it here: http://ai2html.org/

 

Examples on how it’s used in the wild:

https://www.economist.com/graphic-detail/2020/06/11/a-study-names-firms-that-buy-products-from-areas-with-deforestation

https://graphics.reuters.com/ASIA-STORM/INDIA/oakpezdqmvr/index.html

https://graphics.reuters.com/HEALTH-CORONAVIRUS/AFRICA/yzdpxoqbdvx/index.html