User:KDS4444/Creating SVG files using Adobe Illustrator CS6 (and Inkscape 0.48)

Suggestions for users creating images in SVG format using Adobe Illustrator CS

SVG is the preferred format for images on Wikimedia and Wikipedia-- this is so largely because it is scalable: that's what the S stands for. This guide is intended to assist users creating SVG images in Adobe Illustrator CS6 and Inkscape 0.49 for use on Wikimedia and Wikipedia, especially those creating SVG files out of other graphics formats like JPG or bitmaps.

Importing images into Illustrator

Unless you are adept at creating images in Illustrator, you will need to import a graphic image from another format into Illustrator and then convert that image into an SVG file. Most cameras generate images as JPG files, and creating an SVG out of one of these can be done rather straightforwardly.

Please note that any time an image gets converted from one format to another, some of the data are always lost. No conversion is a perfect process-- if it were, then you would not be converting, you would just be creating another copy of the same thing. But the world we live in requires conversion.

It helps, however, to have the original non-SVG file in a state where importing it will be as convenient as possible. For this reason, understand this: Illustrator, like many graphics programs, works in layers. Illustrator also understands layers in other formats. If you are importing a Photoshop image that has two visible layers, you will have the option to retain those two layers when you import the file into Illustrator . If you have 20 or 30 layers, Illustrator will offer to let you import each one as a new layer. Keeping track of layers can beciome tedious in Illustrator— minimizing the number of layers in your original image can greatly reduce tedium later on.

This does not mean, however, that you will be "best off" by having only one layer. If your image contains multiple layers for a specific reason (say, one layer overlaps another and is partially transparent) you will want to retain those layers as separate entities when importing into Illustrator. This is especially important because Ilustrator does NOT retain transparency information when importing files from other formats: each layer's contents will be imported as a solid image as though displayed against a white background. This includes, among other things, any soft outlines or glows that objects in a layer may contain: an image of a glowing star which has a diffuse glowing ring around it and has been placed against a blue background, will, if it exists as a single layer in another graphics format, be imported into Illustrator as a star with several solid rings around it, each increasingly white and all of them completely solid. Illustrator is capable of producing images with gradients in them, but it has a hard time starting off with gradients from another source (hence the data loss on conversion). You would be better served in this case to remove the glow around the star altogether, import the layer, and recreate the glow in Illustrator as best you can. Trying to leave it in place and "working with it in Illustrator" will likely prove exhausting and is almost certainly unnecessary. Illustrator does allow you to import your hidden layers. If you choose to import in this way, every layer you currently have "turned off" in your original program will be treated by Illustrator as though you had it turned on, though any interaction effects between layers, hidden or not, is always ignored by illustrator. That is an important point that bears repeating: if you have two or more layers in your original document that interact via a "blend" effect of one kind or another, all such effects will be disregarded by Illustrator on import. If you wish to retain such effects, you will have to find other ways of preserving them in a single layer before importing them into Illustrator. Each layer will be imported as though it had been placed against a white background and was completely separate from any other layer in your file.

Once you have imported your layers as Illustrator "Objects", you will be presented with a copy of your image in Illustrator. This copy probably looks exactly like the one you just imported from. That is because it is: Illustrator's first step is not to "import" an image or change its formatting, but rather to "open" it and then wait for you to give it further instructions. If you wish to use the imported image as it stands, you need do nothing further other than save the new image in SVG format (more on that below) and you are done. You won't have created an SVG-formatted image, however: you will have created an SVG file with an embedded image in another format, which is technically as good as not having done anything at all. To create an actual scalable SVG image out of your previous image, you will need to use Illustrator's "Image Trace" function to turn the image into vectors.

With the object you have created selected in Illustrator, open the Image Trace menu by clicking on the "Windows" drop-down menu and clicking "Image Trace." With the Image Trace window open, try clicking on the "Preview" check-box located at the bottom right. You will notice that your new image has turned into a stark black & white version of itself. You can view alternative tracing options by playing with the variables in this menu, and each change you make will be previewed for you by Illustrator. You may also choose one of Illustrator's "Preset" options, and see how those look. Once you have a version that looks visually acceptable to you, you should look at the top of your workspace window for a button that says "Expand" and click on it. Your image will immediately become outlined with Illustrator lines and squares, indicating that it has been converted into a series of vectors, and each new vector has been outlined by Illustrator.

Working with vectors in Illustrator

Note that Illustrator has difficulty converting certain types of shaded objects into SVG vectors, and that those with which it has difficulty will be rendered as rasters instead. Since this defeats the purpose of creating an SVG file, it is sometimes better to work around the problem before converting the file to an SVG.

An example of the kind of problem which Illustrator has can be seen when creating a stroke and then filling it with a linear gradient either along or across the stroke and then saving the image in SVG format. If the image is then opened in a browser window, you will see that the stroke has been converted to a raster and that while the gradient is still detectable, the object now consists of a series of blocks rather than smooth vector curves. There does not appear to be any setting within illustrator to prevent this from happening.

Although it is less than ideal, one partial workaround is to first convert the stroke to a path by selecting the stroke with the direct selection tool and clicking Object--> Path--> Outline Stroke. Now that the stroke has been converted to a path, a solid color stroke can be added to it which looks similar to a color from the intended gradient. This problem does not affect any gradients which are applied within a stroke, only those applied across or along them, and does not affect gradients applied to paths at all.

Working with fonts in Illustrator

Another problem Illustrator has is the creation and conversion of text. Because Illustrator is a Adobe program, it tends to automatically select Adobe fonts when creating text, even if you do not want these fonts, and will prevent you from attempting to use other fonts. Here's an example:

Using the Illustrator font tool, create a small piece of text. Make sure this text is in Arial font (the default font setting for new font in illustrator is MyriadPro, so you must change this) and that it is not Arial Unicode MS regular or Arial narrow or Arial monospace or any other such variation, just Arial. Save the file. Now, open the file using a text editing program such as Notepad and conduct a search for the word "Arial". You should come across a block of text which looks very much like this:

<font-face font-family="ArialMT" units-per-em="2048" underline-position="-217" underline-thickness="150"/>

Note that the font here is not Arial but ArialMT, a font face which is copyrighted by Adobe. If you attempt to remove the letters MT from the name of the font, save the file, and reopen it in Illustrator, you will receive an error indicating that the font was not found on your system and that a substitution was made for it (Myriad Pro).

Likewise, if you create an SVG image in Illustrator using ArialMT as a font and then open this image in, say, Inkscape, although all of the text will appear just fine, the program will likely tell you that the font "ArialMT" is not found on the system.

Furthermore, if you create an image with ArialMT font in Illustrator and then open the SVG version of it in a browser such as Internet Explorer or Firefox, you will likely see that the font has been replaced with some other system font (and not even necessarily another sans serif font, either).

If you run this SVG image through an HTML validator, you will likely be told that the image contains errors. These can be removed manually, but cannot be removed in Illustrator directly. Open the SVG file using a text editor such as Notepad, identify any locations where the name of a font appears (a keyword search on "font" should turn these up) and either remove (best option) or correct (second best) the entries accordingly. If you then save the file and run it through a validator again, it should pass validation.

Additionally, if you modify or create Arial text in Inkscape, then save the file in SVG format, then open the image in Illustrator, and then save the image again as an SVG file, you will find that Illustrator has changed all of the Arial fonts back to ArialMT fonts, and once again the image text will not render correctly in any browser. Illustrator will always convert any Arial fonts to ArialMT fonts anywhere it encounters them, so please be aware of this. It may also do this for other fonts in the Adobe copyright list of fonts.

On saving files in SVG format in Illustrator

To save an Illustrator file in SVG format, click on File--> Save As... This will cause the Save As dialogue window to appear. Enter a name for the file, and under "Save as type" select SVG(*.SVG). Then click "Save." Another window will appear listing a series of variabes for saving in SVG format. Here are suggestions for which to choose:

Under SVG Profiles, select SVG 1.1 Under Fonts, use SVG (do not use Adobe CEF or Convert to outline) Make sure that your font subsetting is NOT set to "All glyphs" as the All glyphs option will create a much larger total file. Choose Common English if you have no preference. Under Options, for Image location, choose Embed rather than Link (there is no need to preserve Illustrator editing capabilities).

Advanced Options:

Under Decimal Places, to reduce file size, keep the number between one and three. Higher decimal places means greater detail preserved in the SVG file, but increases the file's size dramatically.

Under Encoding, switch the encoding from UTF-16 to anything else (UTF-8 works fine). This will greatly reduce file size.

Do not check the boxes for Optimize for Adobe SVG Viewer, Include Slicing Data, or Include XMP. If you check the box for Output fewer <tspan> elements, you may reduce your file size (but verify that the final image looks right after saving). The same goes for the <textpath> option below it.

Finally, click on "Okay". Illustrator will now generate an SVG version of your file. Open this file in Internet Explorer or Firefox to see exactly what Illustrator has done with it. You may very well need to back up and redo some things before it looks the way you intend it to.