• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Part: VI SVG Mastery > Using Adobe Illustrator to Create Artwork

Hour 21. Using Adobe Illustrator to Create Artwork

As with HTML and other technologies, the layperson couldn't care less about the SVG code needed to generate graphics. In fact, the more removed they can be from the actual code, the better. Unfortunately, the bulk of WYSIWYG HTML editors have ruined a good thing; the code these editors generate often requires more work to fix than it would have taken to hand-code in the first place.

In the last hour, you learned how the visual aspects of SVG creation could be separated from the more technical aspects by allowing designers to develop the artwork while the engineering team developed the interactive prototype. The integration of these two separate tracks requires some effort, though, and this hour will begin to outline some steps designers can take while working within Adobe Illustrator (the most used WYSIWYG SVG editor). By adhering to these steps, you are more likely to produce SVG code that will ease the blending of these two development paths.

Although many developers may bemoan tools that separate code from its appearance, software vendors, such as Adobe, Corel, and Jasc, have worked hard to create a new breed of WYSIWYG SVG tools that do not suffer from the same pitfalls to which their HTML predecessors succumbed. No graphical editor will ever create code the exact way you want it, however, so having a few tricks up your sleeve before using the programs will eliminate some of the headaches you may otherwise experience.

As Adobe Illustrator is the tool nearly all design professionals already use, this hour will focus on tips for SVG creation in this program. The decision to focus on this one tool among many was not chosen lightly. Corel, Jasc, and others are putting out high-quality tools to author SVG, some matching and some surpassing Illustrator's capabilities. As such, the decision was based on the tool most likely to be in the possession of this book's audience.

Several of the tips in this hour and the next were published in an alternative format by the author during 2000 and 2001 while he led a research & development team at New York–based Iguana Studios. The tips were culled from experience creating SVG content for the BattleBots Web site. (BattleBots is Comedy Central's robotic combat show, comparable in nature to the WWF but with robots instead of wrestlers. It can be found online at www.battlebots.com.)

All caveats aside, this hour will focus on helping you expedite SVG creation using either Adobe Illustrator 9 or 10 (for both Macintosh and Windows platforms). This hour will not serve as a step-by-step guide to every feature of Illustrator nor to Illustrator's every SVG option. Rather, it will focus on examples, drawn from commercial experience using the tool, that can significantly reduce time spent modifying the exported code.

Specifically, you will learn the following in this hour:

  • Matching your Illustrator layer names to your SVG document's id values

  • Maintaining accurate artwork position between your Illustrator and SVG documents

  • Converting Illustrator-export style selectors into more easily decipherable selector names

  • Precisely positioning artwork to reduce coordinate clutter and file size

  • Reducing unnecessary artwork from your Illustrator document before exporting an SVG document

  • Optimizing masked content for export

  • Cleaning up Illustrator's code export



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint