Graphics Programs Reference
In-Depth Information
JACKSON (for The Orange County Register)
Lance Jackson
Illustrator & SVG
Artist Lance Jackson created this dystopian illustration for the opinion special report
“Climate Change: A Rising Tide,” in the
Orange County Register
. When creating
illustrations for use on the web, Jackson often prefers to save the art in the vector-
based SVG format rather than PNG, GIF, or JPEG files, which are pixel-based. Used
properly, SVG files are faster-loading and scalable, with no loss of resolution. While
drawing, Jackson was careful to use the fewest number of points possible, as these
make the SVG more bulky (though the Object> Path> Simplify controls can help).
Once the art was finished, he selected the Artboard panel, chose Artboard Options,
then Fit To Artwork Bounds in the Preset drop-down menu, and clicked OK. This
sizes the artboard to the exact dimension of the art. To export the art as SVG,
Jackson selected File> Save As ( -Shift-S/Ctrl-Shift-S), named the file, and clicked
Save. In the SVG Options panel, Jackson set the SVG Profiles drop-down menu to
SVG 1.1 (the optimal setting for most situations). In the Fonts section he set Format
to SVG and Subsetting (which controls how fonts are handled in SVG files) at None
(use system fonts), as there was no text in his image. In the Options section he
enabled Embed, since he planned to insert the SVG code directly into his HTML
document, rather than link to an external file. The Preserve Illustrator Editing
Capabilities option increases the file size, so he made sure it was disabled. Jackson
then clicked the More Options button at the bottom of the panel, made sure
Responsive was enabled, and clicked OK. Jackson then opened the SVG file in a
text editor, copied the code to the clipboard, and pasted it directly into the HTML
file. The responsive SVG image automatically gets larger or smaller, adapting to the
size of the browser window with no loss of resolution (
Responsive SVG
). This is
important for responsive websites, which are designed to rescale their content on
mobile devices. When an SVG image is not responsive, it will get cut off when the
browser window changes size (Non-Responsive SVG).
