The Art of AppleScript

The Illustrated DOM

Drawing Hypertext with Adobe Illustrator

Use Adobe Illustrator and AppleScript Mac Automation Scripting to create a custom menu command for Illustrator that generates an HTML document with CSS level 3 + SVG stylesheet from the current artboard in one quick and easy step.

Example Products

The Artwork Master

Start with an artwork master in native Adobe format: PDF with Illustrator editing or Adobe Illustrator format. This file represents all of the work you do within the Adobe environment, encapsulated in a way that maintains full fidelity and is likely to be usable in Illustrator and viewable on every computing device for many years to come.

Metadata Matters

A document is more than just an illustration. There is also important metadata like the title, description, author, and copyright notice. This is true both for Illustrator documents and hypertext documents. We’ll connect the dots and export our Illustrator document’s metadata along with its illustration and both will be included in the final HTML document. Therefore, it is essential that our Illustrator documents actually have metadata.

To add metadata to your Illustrator document, choose File → File Info from Illustrator’s menus and fill-in the following Basic metadata fields:

Including this metadata enables us to go from Illustrator to a complete live Web document in one step.

HTML with Inline SVG

Rather than export our Illustrator document as a standalone SVG document, we are going to export it as graphics-rich hypertext: HTML with inline SVG. This will give us all of the advantages of hypertext: rendering with full fidelity in any browser, adding a stylesheet or scripting easily using widely-known techniques, and editing with HTML authoring tools.

To convert an illustration into exactly the hypertext document that we want — in one step — we have to talk to Illustrator in AppleScript.

Talking to Illustrator

If you Run the following AppleScript on a Mac with Adobe Illustrator installed, Illustrator will answer. This conversation is the core of AppleScript Mac Automation Scripting.

tell application "Adobe Illustrator" display notification "message received" with title (the name as text) subtitle (my name as text) end tell

Custom Illustrator Menu Commands

To create a custom Illustrator menu command, create a new AppleScript in Script Editor, and save it as “Export Hypertext” and in Illustrator’s script folder.

To run your AppleScript from within Illustrator, launch Script Menu, which is built into every Mac.

Develop the Conversation

In order to convert an illustration into a hypertext document, a minimum set of steps are required. Figuring out what those steps are is a process that is similar to working interactively with Illustrator, choosing command after command from the menus, until you have put 5 or 10 steps together into one action.

A basic to-do list for the task at hand would look like this:

1) use the current document as the source illustration 2) get the name of the source folder that contains the source illustration 3) export files to ~/Output/ but put them in a subfolder named for the source folder 4) build an HTML document from the source illustration 5) specify a pathname for the HTML file we’re making 6) put the HTML into a text file and Save it 7) notify when the hypertext export is complete

Rewriting the to-do list in AppleScript makes it functional:

tell application "Adobe Illustrator" activate if document 1 exists then (* use the current document as the source illustration *) set theSourceIllustration to the current document (* get the name of the source folder that contains the source illustration *) tell application "Finder" to set theSourceFolderName to the name of the container of theSourceIllustration (* export files to ~/Output/ but put them in a subfolder named for the source folder *) set theOutputFolderPath to prepOutputFolder("Output", theSourceFolderName) of me (* build an HTML document from the source illustration *) set theHTMLFileContents to buildHypertextFrom(theSourceIllustration) of me (* specify a pathname for the HTML file we’re making *) set theHTMLFilePath to theOutputFolderPath & "index.html" (* put the HTML into a text file and Save it *) makeTextFile(theHTMLFilePath, theHTMLFileContents) of me (* notify when the hypertext export is complete *) tell application "Finder" to open folder theOutputFolderPath set theNotificationMessage to "hypertext built" else set theNotificationMessage to "please open a document" end if display notification theNotificationMessage with title (the name as text) subtitle (my name as text) end tell (* include buildHypertextFrom, makeTextFile, and prepOutputFolder subroutines here *)

The Meat of the Workflow

A handful of reusable subroutines will provide Illustrator with the recipes it needs to cook up hypertext. Assisting in the preparations: Bare Bones Editor, known for its expertise with text files, and available in a free or paid version. Substitute your own text editor as required.

You may want to write your own hypertext export subroutines, or you may want to use my subroutines under MIT License. Paste the following code block at the end of an AppleScript in Script Editor to make the subroutines available within that AppleScript.

on buildHypertextFrom(theSourceIllustration) tell application "Adobe Illustrator" set theSourceXMPString to the XMP string of theSourceIllustration tell application "System Events" set theSourceXMPXML to make new XML data with properties {name:"theSourceXMPXML", text:theSourceXMPString} tell theSourceXMPXML's XML element "x:xmpmeta"'s XML element "rdf:RDF"'s XML element "rdf:Description" set theTitleXML to the first XML element whose name is "dc:title" set theTitleValue to theTitleXML's XML element "rdf:Alt"'s XML element "rdf:li"'s value set theCreatorXML to the first XML element whose name is "dc:creator" set theCreatorValue to theCreatorXML's XML element "rdf:Seq"'s XML element "rdf:li"'s value set theDescriptionXML to the first XML element whose name is "dc:description" set theDescriptionValue to theDescriptionXML's XML element "rdf:Alt"'s XML element "rdf:li"'s value set theRightsXML to the first XML element whose name is "dc:rights" set theRightsValue to theRightsXML's XML element "rdf:Alt"'s XML element "rdf:li"'s value end tell end tell set theHTMLTitle to theTitleValue set theHTMLName to makeLowerCaseNoSpaces(theHTMLTitle) of me set theHTMLAuthor to theCreatorValue set theHTMLDescription to theDescriptionValue set theCopyrightNotice to theRightsValue set theHTMLFileContents to "<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"utf-8\"> <title>" & theHTMLTitle & "</title> <meta name=\"description\" content=\"" & theHTMLDescription & "\"> <meta name=\"author\" content=\"" & theHTMLAuthor & "\"> <meta name=\"application-name\" content=\"" & theHTMLTitle & "\"> <meta name=\"apple-mobile-web-app-title\" content=\"" & theHTMLTitle & "\"> <meta name=\"viewport\" content=\"width=device-width, user-scalable=yes, initial-scale=1.0\"> </head> <body id=\"" & theHTMLName & "\" class=\"application typography navigation animation " & theHTMLName & "\"> <header> <h1>" & theHTMLTitle & "</h1> </header> <main> <div id=\"theArtworkContainer\"> <svg id=\"the" & theHTMLTitle & "ArtworkGraphic\" version=\"1.1\" xmlns=\"\" xmlns:xlink=\"\" x=\"0\" y=\"0\" width=\"768\" height=\"768\" viewBox=\"0, 0, 768, 768\" aria-labelledby=\"the" & theHTMLTitle & "ArtworkTitle the" & theHTMLTitle & "ArtworkDescription\" role=\"application\"> <title id=\"the" & theHTMLTitle & "ArtworkTitle\">" & theHTMLTitle & "</title> <desc id=\"the" & theHTMLTitle & "ArtworkDescription\"></desc> </svg> </div> </main> <footer> <p><small class=\"copyright\">" & theCopyrightNotice & "</small></p> </footer> </body> </html>" & return end tell return theHTMLFileContents end buildHypertextFrom on makeTextFile(theTextFilePath, theTextFileContents) tell application "BBEdit" activate set theTextFile to make new document with properties {encoding:"Unicode (UTF-8)", text:theTextFileContents} set the line breaks of the front document to Unix select insertion point 1 of the contents of the front document save the front document to file theTextFilePath end tell return end makeTextFile on makeLowerCaseNoSpaces(theSourceText) tell application "BBEdit" set theNoSpacesText to replace " " using "" searchingString theSourceText set theLowerCaseNoSpacesText to theNoSpacesText change case making lower case end tell return theLowerCaseNoSpacesText end makeLowerCaseNoSpaces on prepOutputFolder(theOutputFolderName, theSubFolderName) tell application "Finder" set theHomeFolderPath to the path to the home folder as text set theHomeFolder to theHomeFolderPath as alias set theOutputFolderPath to theHomeFolderPath & theOutputFolderName & ":" if not (exists folder theOutputFolderPath) then set theOutputFolder to make new folder at theHomeFolder with properties {name:theOutputFolderName} else set theOutputFolder to theOutputFolderPath as alias end if if theSubFolderName is not equal to "" then set theSubFolderPath to theHomeFolderPath & theOutputFolderName & ":" & theSubFolderName & ":" if not (exists folder theSubFolderPath) then set theSubFolder to make new folder at theOutputFolder with properties {name:theSubFolderName} else set theSubFolder to theSubFolderPath as alias end if set theTargetFolderPath to theSubFolderPath else set theTargetFolderPath to theOutputFolderPath end if end tell return theTargetFolderPath end prepOutputFolder

Example Scripts

AppleScripts made from the example code on this page.

Code Reuse

The blocks of example code on this page and the attached example scripts are open source software that everyone can use and modify and customize for their own purposes under MIT License.

(* Copyright 2015 Simon White MIT License Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. *)


Simon White

Last updated .

Keywords: artist, animator, designer-developer, agile, agile-developer, agile-development, full-stack, developer, coder, graphic-artist, web-animator, illustrator, adobe-illustrator, photoshop, adobe-photoshop, vector-graphics, raster-graphics, pixel-graphics, bitmap-graphics, wacom, mac, macintosh, apple-mac, unix, animation, artwork, code, digital-pen, digital-pencil, digital-ink, hand-drawn, hand-coded, handmade, interactive, html, svg, animated-svg, html5, css3, es5, unobtrusive-javascript, dom-scripting, responsive-animations, responsive-layouts, w3c, iso, audio, classlist, cssanimations, csstransforms, csstransitions, eventlistener, inlinesvg, json, opacity, preserve3d, queryselector, requestanimationframe, rgba, webaudio, xhrresponsetypejson.