Participant

Question

Converting .AI to HTML

Forum|Forum|6 years ago
August 9, 2019
5 replies
4755 views

I created an infographic for the company I work for, and they are wanting to make it into an email blast to send around. In order to do this, I have to convert my pdf/ai file into HTML. Is there a faster way to do this than starting from scratch and coding it all myself?

This topic has been closed for replies.

Danny Whitehead.

Legend

Jonathan's right. There's no way you're going to get reliable e-mail-ready HTML out of Illustrator. Depending on the design, it'll be better to either export the whole thing as a graphic and use that (not generally best practice), or export elements of it and rebuild in whatever you use to build email campaigns (Mailchimp etc).

Nancy OShea

Community Expert

This may interest you.

https://css-tricks.com/a-guide-on-svg-support-in-email/

As I suspected, SVG support in e-mail clients is a bit dicey. But you can use fallback JPGs for the problem ones.

Nancy O'Shea— Product User & Community Expert

JonathanArias

Legend

It won’t work. The html generated is not the same html used for email newsletter.

outlook and Gmail are super strict about the html

Nancy OShea

Community Expert

You can certainly export your infographic to SVG code from AI. See screenshot below. SVG / XML code has widespread browser support. And best of all, SVGs can be re-scaled without any loss in quality. You can't do that with raster images (JPG or PNG).

I don't know how well e-mail clients like Outlook would handle the code though. Most likely, you would need to send users a link to the online web page which you should do anyway for e-mail clients that have no HTML & CSS support.

As an example,

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Basic E-mail Template</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p><a href="https://example.com">Visit us online at https://example.com</a></p>
<div id="intro" style="background:gold; padding: 2%; text-align:center">
<h1>Heading 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis ipsam adipisci culpa hic, nulla quaerat.</p>
<h2>Scalable Vector Graphic</h2>
<!--insert SVG code here-->
<svg viewBox="0 0 160 160" width="160" height="160">
<circle cx="80" cy="80" r="50" />
<g transform=" matrix(0.866, -0.5, 0.25, 0.433, 80, 80)">
<path d="M 0,70 A 65,70 0 0,0 65,0 5,5 0 0,1 75,0 75,70 0 0,1 0,70Z" fill="#FFF">
<animatetransform attributeName="transform" type="rotate" from="360 0 0" to="0 0 0" dur="2s" repeatCount="indefinite" />
</path>
</g>
<path d="M 50,0 A 50,50 0 0,0 -50,0Z" transform="matrix(0.866, -0.5, 0.5, 0.866, 80, 80)" />
</svg>
</div>
<!--end intro--> 
<hr>
<footer>
&copy; 2019 XXYZ Website all rights reserved.
</footer>
</body>
</html>

Nancy O'Shea— Product User & Community Expert

Abambo

Community Expert

Nancy OShea forget SVG support for e-mails. Simple layout can be done with HTML but anything above simple text formatting will fail... JPEG or PNG will be the format of choice.

ABAMBO | Hard- and Software Engineer | Photographer

Kevin Stohlmeyer

Community Expert

I have not personally used this but it was mentioned on another forum post.

Its a free open source script to convert AI to HTML.

ai2html

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded