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:
- Document Title
- Author
- Description
- Copyright Notice
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=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/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.
- to come
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 http://simonwhite.com/
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.
*)
Author
Last updated .