Contents
<aside> đź’ˇ All the code shown in this tutorial lives in this git repo branch **https://github.com/pkd2512/codeschool-webdev/tree/ai2html-test**
</aside>
Responsive images are good, however, they are still – images, which is fine for most cases when the images do not have text that needs to be read to make sense of the content.
However, the moment you add images with text, it gets complicated. The text gets blurry, too small on phones and too large on bigger screens.
Why not SVG? Well, text in SVGs also scale as you scale the image.
We will use a library called ai2html , an open-source script for Adobe Illustrator that converts your Illustrator documents into html and css.
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.
For example, in this piece, the static data charts are actually made in Illustrator and then exported to HTML and CSS for a native web experience across screens.