Help:Illustrator
 | It has been suggested that this page should be merged into Help:SVG/basic1. (discuss) |
This page provides guidance and instruction for graphic artists wishing to produce SVG files that will be efficient and that will render correctly in a variety of browsers using the Adobe Illustrator CC design program, version 18.1.1 (as well as most earlier and probably many later versions). Illustrator can be a powerful tool for generating SVGs—however, it can also prove deeply frustrating if you wander into it unguided. The central problem is that the SVG format is not "native" to Illustrator—Illustrator can always read and generate an Illustrator-formatted image (that is, a file in .ai format) correctly, but when it comes to creating clean, usable, SVG files, this is not always the case. If you are intending to use Illustrator or already know how to use it and want to know how best to produce SVG formatted files for Wikimedia Commons, this page is meant for you.
Before reading this page, however, you may want to begin by acquainting yourself with the information available at Help:SVG as the page you are currently reading will presuppose that you are familiar with that page's terminology and concepts (such as "stroke", "path", and "gradient"). Not everything mentioned there is directly relevant for Illustrator, but enough of it is applicable for the production of SVG files that it should certainly be previewed before coming here for Illustrator-specific advice.
Illustrator, like Inkscape and several other modern graphic arts programs, does not require you to learn SVG code. The user interface is almost entirely visual, and Illustrator will take whatever you draw with it and produce an SVG document to match it. At least, most of the time. However, in order to make a file that is truly suitable for use on Commons, there will almost always be a some code-related things that must be done manually to any SVG file produced by Illustrator. This page covers those things.
Understand that it is possible that this set of instructions contains errors. If you identify any, please step in and correct them. This is a collaborative effort, and help from all sides is welcome and encouraged.
Known problems[edit]
There are some design features available in Illustrator which will not translate into SVG format. Here are a few of those things:
Gradients along and across strokes[edit]
Under its "Strokes" panel Illustrator 18.1.1 allows you to apply gradients both along and across strokes as well as within them. However, there is no equivalent SVG code for the first two, and if you create a stroke with a gradient applied along or across it, that stroke will be converted into an undesirable raster when Illustrator generates the SVG file. Bottom line: do not apply gradients along or across strokes in an image you wish to turn into an SVG file for use on Commons. There are other ways to get similar effects, though they are complicated. Gradients along and across strokes are proprietary Illustrator functions, not SVG ones.
Do keep in mind, however, that a reasonable equivalent of a gradient along a stroke can sometimes be effected using Illustrator's "blend" function. As a blend will theoretically cover all of the color gamut within any set of selected strokes, you can create a gradient along by, for example, creating two strokes whose length is the equivalent width of your desired stroke and then, selecting both using the Direct Select tool and holding down "Shift" while clicking on each, then clicking on Objects → Blend → Make. Illustrator will produce a blended object that is a gradient of the difference in color between each stroke.
There are ways for changing the "spine" of the resulting blend so that your pseudo-gradient-stroke can follow any curve you might want to produce, but the details on how to do this are beyond the scope of this Help page which is intended to relate to the production of SVG images via Illustrator, not on how to use Illustrator itself. One hint, however: if you start getting fancy with the Blend tool, Illustrator may have difficulty smoothly producing the gradient you might want to have. One way of counteracting this may be to tell Illustrator that rather than a smooth gradient blend, that you would like to produce a blend with a specified number of intermediate objects—and then specifying the number of said objects to be very, very high. If done right, this should look as smooth as any other regular blend that Illustrator should be able to produce. The important thing to keep in mind is that "blends" are also SVG functions, and will be recognized by browsers reading SVG files as SVG images rather than undesirable rasters.
One more thing: Illustrator can effectively produce a simulated gradient across a stroke in the same way: by creating, for example two strokes of some given width but each having its own gradient which consists of any number of different colors and then joining them using the Blend tool and then editing that blend to assign it a very high number of specified steps, you can produce a blended object that pretty well resembles an Illustrator "stroke" with a gradient across it which is also an SVG-compatible object!
The downside to using these types of blends to simulate different kinds of strokes is that the resulting blend is, of course, a blend and not a stroke. Strokes are relatively simple and intuitive to create and manipulate; blends, not so much. There are other ways of producing "gradient across"-like functions on strokes using SVG blur filters and creating paths and then masks on top of your strokes, though this, too, causes a decrease in the simplicity of stroke usage and seriously limits the ability of the resulting object to ever be edited in the future (for examples of this effect, however, you may see File:Earthworm_head.svg and File:Scallop Diagram2.svg).
Handling fonts, font sizes, and text boxes[edit]
Illustrator is set to always give its users the "Myriad Pro" font as the default font for any text they write. The problem with this, however, is that Myriad Pro is protected by copyright, and so is not allowed on Commons. Moreover, there is no way to permanently make Illustrator default to a different font without rewriting the software. So before you begin writing any text on your document, you will want to identify and install one or more free fonts that you can use without infringing on copyright. Arial is also copyrighted, and should not be used. However, there are some very close alternatives that are freely available. The DejaVu font family includes a sans-serif font which closely resembles Arial but is freely licensed and comes highly recommended.
Note that while you may, of course, circumvent this licensing problem by "outlining" your text (see "Saving your file in SVG format" below), this is crippling to the collaborative process, and is memory inefficient.
Alternate font families[edit]
Not every browser that encounters a request to display text in the DejaVu Sans font is necessarily going to recognize it. This is a slight problem, as without an alternative go-to font, a browser may easily decide to apply another font to the image and so alter the appearance of the image for that viewer. The solution—the ONLY solution—is to perform a single manual modification of your very, very final SVG version of your image. Let's say you wanted to use DejaVu Sans but were willing to settle for any available sans-serif font. After saving your Illustrator file in SVG format, you would need to open up that file using a plain text editor such as Notepad or WordPad and conduct a search on the term font family. This term might only occur once in your document if you have only used one font throughout, though this is not guaranteed. When you encounter it, if you composed your text using DejaVu Sans, you will notice that it says something like these:
{font-family="'DejaVuSans'";}font-family="DejaVuSans"font-family="'DejaVuSans'"style="font-family:'DejaVuSans';.
Here you must edit the code so that it reads like this:
{font-family="'DejaVu Sans'",sans-serif;}font-family="'DejaVuSans',sans-serif"font-family="'DejaVuSans',sans-serif"style="font-family:'DejaVuSans',sans-serif;
Which you can usually accomplish using the program's "Find and Replace" function (pay careful attention to the location of the single and double quote marks, commas, semicolon, spaces, etc.). A single document may have multiple versions of this, so make sure you verify that every instance of the word "font" includes a suitable alternate font family. Note that each instance of the words sans-serif must contain a hyphen and must not be immediately surrounded on both sides by quote marks (neither double nor single, though a double quote mark on the right side may be acceptable in some circumstances, see above). Doing this will ensure that whatever browser encounters that font family request, even if it doesn't know what it is, it will at least utilize a similar font for your document.
Non-standard font specification[edit]
Abode Illustrator is also known to produce font specifications ignoring well-defined and standardized semantics for font weight and style. Can also be fixed in a way similar to one specified in the subsection above.
Font sizes[edit]
Illustrator is set up to handle fonts in terms of pixel sizes only. Unfortunately, this can do some rather chaotic things to the actual appearance of your font when it is reproduced by a browser. In order to make your font appear in the same size and position as it does in the Illustrator version of your file, you will need to do one more manual edit to the SVG file while you have it open in Notepad. Conduct a search on the word "size": the only results you should get for such a search are those related to "font size". Notice that Illustrator has assigned your fonts a pixel number. You should take that number, divide it by 16, and replace it with the new number. Then, directly following that, replace the letters px with the letters em. Do this for every instance of a font size in your document. For example: let's say you create a file in Illustrator, save it as an SVG file, and open it in Notepad. You then conduct a search on the word "size" and find a line in your document that says, {font-size:10px;} (this line usually appears directly beneath the file's "font family" line, so it is pretty easy to spot). You will then manually replace the 10px with 0.625em so that the line now reads {font-size:0.625em;}. You will then do this for every instance of the word "size" in your document. If further down in your document you switch to a font size of, say, 24px for some larger text, you will then need to manually change that text to 1.5em. Once you have completed these changes to the font sizes in your document, you will need to save it once again (in UTF-8 encoding). These two modifications—font family and font size—must be the very last things you do to your SVG file prior to uploading it to Commons.
If you for any reason use Illustrator to modify your SVG or .AI file in the future, and you save the file, your changes to the font family and font sizes will be lost and must be re-entered manually, once again, in a plain text editor. There is currently no workaround that will force Illustrator produce SVG code that recognizes alternate font families or to use the "em" font scale in favor of the "px" one. Only a final manual edit prior to uploading can ensure these things are done.
Text boxes[edit]
It is often appropriate when creating an SVG diagram to include space in a given text box to permit the text to be replaced with another, longer word by a future editor (for example, for the translation of the text into a foreign language). Any text box should be created with this potential in mind, and the overall text box size should not cause the text to overlap any other text box or any part of your underlying diagram. Illustrator allows the user to drag and click to create a text box of any size and any justification (left, right, or centered) regardless of the size of the text placed in that box.
However, when converting to an SVG, two problems occur. The first is that all text boxes become reduced to the minimum size necessary to accommodate the text within them (defeating the purpose of creating large text boxes in the first place). The second is that text which runs longer than one line becomes broken into separate text boxes for each line of text. For example, if your text box contained the words, "Upper limit of fuel gauge" and you placed that text in a text box such that it read "Upper limit of" on one line of the box and "fuel gauge" on the second line, when converted to an SVG by Illustrator this becomes two text boxes, one which has the text "Upper limit of" and another which has "fuel gauge". The text will appear correctly rendered in the SVG version of the image. However, if you attempt to run the SVG file through the Autotranslate tool, the tool will not understand that "Upper limit of" and "fuel gauge" are part of the same text element and instead will attempt to translate each independently. As long as none of your text boxes in your original .AI file contains text which is longer than a single line, this will not be a problem. This is extremely inconvenient, however, if your text ever runs longer. Illustrator does not have a setting that will ensure the original boundaries or unity of text box components when converting an image to SVG format. It may be possible to save a text-free version of your image in SVG format through Illustrator and then open the document in another program capable of editing SVG (such as Inkscape) which does not reconfigure text boxes.
Text anchor (alignment)[edit]
Even though you can define text alignment to center or right in Illustrator, problem is when exporting SVG, the alignment setting will be removed and replaced with absolute transform/translate position (using the default text alignment) instead of being converted to text-anchor property of SVG specification. This leads to misalignment of text which is supposed to be aligned to center or right after uploading to Wikimedia because the fallback font has different font metrics than the pre-defined font in the SVG file and the fact that text rendered by librsvg usually looks misaligned when scaled. As of Illustrator 2020, it still does not incorporate text-anchor in its SVG export.
The only way to fix it is to change all text to use the default left text alignment before saving a backup .ai file, open it in Inkscape with "internal import" (not Poppler/Cairo import) and align all text again in Inkscape. Using non-left text alignment in Illustrator or import using Poppler/Cairo will make the text very difficult to work with in Inkscape.
This issue is not an excuse to convert text to outline because of the inconvenience of localization for other contributors. All in all, it may be more beneficial to start everything from Inkscape or any text editor if you have any intention to create a text-heavy SVG file in the first place, and only import shapes created in Illustrator if it is too difficult to be done in Inkscape or text editor.
Too many filters or effects in the same object layer[edit]
If you attempt to apply two SVG filters to the same object, or, say, a warp or distort effect and an SVG filter, Illustrator 18.1.1 will break down and generate rasters. If you want to apply multiple filter effects to the same object, you will need to do this on separate layers into which you have "nested" the target object and applied each filter to a separate group in which that object is nested. Illustrator often has difficulty managing multiple effects and filters in the same layer. You are better off producing multiple layers of the same object, each with your desired gradient, stacked on top of each other. The same holds true for envelope distorts: any envelope distortions Illustrator encounters automatically become rasterized, even if they occur on their own independent layer with no other effect or filter, when saving as an SVG file. Envelope distorts can sometimes be rasterized and then traced, though this almost always produces a disappointing result.
Symbol sets containing symbols with SVG filters[edit]
If your image contains an Illustrator "symbol set", if any of the symbols making up that set has an SVG filter associated with one or more of its layers, then that layer will be rendered as a raster (NOT the overall symbol set, which should be mostly fine otherwise). This is especially inconvenient when the user is attempting to simulate a gradient in a symbol (which, as noted below, Firefox is unable to process). Individual symbols containing SVG filters will render correctly, but NOT if they are assembled into a symbol set.
Rasters from out of nowhere[edit]
Any time Illustrator encounters an element of an image that it does not know how to render as SVG code, it will simply create a raster of that element. There will be no list of errors or other obvious indication that this has happened, and there is no way to tell Illustrator to NOT generate rasters nor a way to inform you if it HAS generated any. Depending on whether or not you choose to "embed" these rasters (see the section on "How to Save as an SVG" below), they may or may not show up in the file you eventually attempt to upload to Commons (if you choose to "link" to rasters rather to "embed" them during the SVG file save process on your computer, each raster will appear as a separate file in the same directory as the one where you saved the SVG file itself— from here you can sometimes at least guess what the shape looks like, which may be helpful in tracking it down in the .AI version of the file). Once on Commons, any SVG file still containing raster components should be marked with the {{BadSVG}} tag as requiring cleanup. Ideally, you should never upload an SVG image containing rasters to Commons, as rasters defeat much of the purpose of generating an SVG file in the first place.
Does my image even have any rasters in it?[edit]
How do you know if your image contains rasters components? There is only one good way to tell: save the file as an SVG and see if any turn up. Try this one: begin by saving your file as an .AI document without closing it. Then click on "File" and scroll down to "Save a copy". Here, you can specify a name for the file (Illustrator will append the word "copy" to the file name for you, but you may choose another filename for it if you wish). You can also select the format for the copy: In the Save as type box click and scroll down to where it says SVG (*.SVG). You will now be shown the SVG save dialogue window. Since you are just looking for rasters right now, avoid changing the various menu items EXCEPT the one that allows you to choose to either embed or link raster components: make certain this is set to Link and then click on Save. When Illustrator has finished saving the file it will return you to your .AI file. Now open up the newly saved SVG copy of the file in Illustrator, click on Windows and then Links. A box will appear listing any raster components ("links") in the SVG file. You will then need to hunt these down in the .AI file (not in the "temporary" SVG copy file you just generated) in order to fix them. Repeat this process by removing a problematic element from the .AI file, saving the .AI file as an SVG copy, and then opening the SVG file to look for links. Some of these links may be relatively straightforward to locate and deal with; others may prove much more elusive. In the end, before uploading the image to Commons, you should be able to save the file in SVG format, open the copy, open the "Links" window, and have nothing appear there. If you can do this, then you have produced an SVG file that has no raster components (congratulations!).
You may find that there are items showing up on the list of links that you can't seem to identify in the .AI file. Illustrator does not necessarily make it easy to identify where these components are or why they are producing rasters. Some of them may be occurring in layers that you have turned off altogether, making them very hard to locate. Sometimes you can tell from the thumbnail image of the link just what the component is ("Hey, that looks kinda like the handle I drew in that one layer— I wonder if that's it?"). Sometimes, visually guessing is the fastest way to identify and remove rasters.
One of the situations that will always cause Illustrator to turn an SVG element into a raster is when it is asked to apply a Pathfinder effect to a path that contains an SVG filter in it. For example, if you were attempting to "Trim" a group of paths (via Effects → Pathfinder → Trim) and any one of those paths already contained some kind of SVG filter, that path would quietly be converted into a new raster layer called "<Image>" (just like that, with an angled bracket on each side of the word) no matter what name you may have previously assigned it. If you find yourself mystified at the appearance of a raster from "out of nowhere", consider the possibility that you may have used Pathfinder somewhere to modify a layer with an SVG filter in it. If the layer contained an effect or filter that you consider important for your final image, you will now need to recreate it from scratch. Making this mistake enough times will eventually teach you not to apply Pathfinder effects to layers containing SVG filters.
I found a raster— what do I do with it now?[edit]
And what if the raster is producing a visual element that you really want to retain? You may have some options, depending on what it is you are hoping to keep. If you have used one of the Stylize or Photoshop Effects filters on this element, surrender now: these can never be correctly rendered as SVG components because there is no equivalent SVG code to produce them. You can try to generate similar effects other ways, using various SVG filters, but the Stylize filters and the Photoshop Effects filters are strictly off limits.
Finally, if the image does have rasters in it, unless you choose to "embed" (rather than "link") these during the SVG save dialogue in Illustrator, the file will not upload to Commons because it will not contain the linked-to files (i.e., the SVG image will refer to objects not located within it, and the Commons upload wizard will notice and forbid this). If you are able to generate a final image with no rasters in it, then this need not concern you.
Transparency masks within transparency masks[edit]
If for any reason you have placed one of Illustrator's transparency masks nested inside another such mask, there is a chance that when you run the file through the W3C validator you will receive an error telling you that you have two masks with the same id name, something like "Attribute id declares a duplicate ID value" followed by an id code or the name you gave one of the mask layers. While this error may not produce any problems in the final SVG image, it still means the file failed W3C validation and the problem should be resolved. You cannot simply rename the mask layer: you must arrange the transparency masks so that they do not appear nested within one another. Clearing this problem should allow the file to pass this aspect of the W3C validation process (though it may fail for any number of other reasons, of course!).
Browser-specific issues[edit]
Each browser may understand Illustrator's SVG code somewhat differently. The only way to be certain that your image will render the way you would like it to is to try opening it in several different browsers and seeing if it looks the same in each. There are quirks, too. Here is a list of issues to review if your SVG file is not rendering correctly when viewed in a browser:
Internet Explorer[edit]
Internet Explorer does not cooperate with the way Illustrator places clipping masks within symbols, and will ignore them and their content when it encounters them within a symbol (this is true even if the clipping mask itself is "turned off" in the Illustrator SVG version of the file); Internet explorer will also not render a symbol containing a transparency mask, leaving it out of the final drawing.
Firefox[edit]
Firefox cannot process gradient paths, gradient strokes, or filter effects within symbols or symbol sets, and will show such symbols without the offending paths/strokes/filters (other, non-gradient/unfiltered parts of the symbol will render correctly). This is a huge problem, as symbols, like the paths they are made of, often contain gradients. Mozilla bug 376027 tracks this issue.
Firefox will also not render any transparencies which are nested within a clip group, omitting any content within them from the produced image, and doing so even if the clipping mask is "turned off" in the Illustrator version of the image. It will, however, have no problem rendering clipping masks located within transparencies.
Somewhat surprisingly, then, Firefox is able to correctly render the gradients within a blend even if one of the two objects making up that blend happens to be a symbol containing a gradient— though the actual endpoint of the blend containing the symbol itself will render as a blank object; also, this will only work so long as the endpoints are not themselves both symbols: at least one of them must be a regular path.
On some occasions Firefox will not indicate clipping masks within symbols, creating the symbols as if the masks were not present at all (though in Illustrator they may be clearly visible). The reasons for this, and the solutions to to it, are not provided here (or anywhere, really). If you encounter this problem, you are on your own.
Google Chrome[edit]
Google Chrome is a browser that is consistently able to present an SVG file in its intended format, with all of its clipping masks, transparencies, gradients, symbols, etc. Ironically, this makes Chrome the least useful browser for establishing the universality of a given SVG file: that an image renders correctly in Chrome only means that Chrome did its job—it doesn't mean that Firefox or I.E. or Safari will also do theirs, and the only way to ensure that the SVG image will render correctly across a broad swathe of browsers is to try opening it in each and seeing if it looks correct. A lowest common denominator should be sought when creating an SVG file for use on Commons.
There are almost certainly many other such crossover interpretation errors, most of them involving the use of either symbols, clipping masks, transparency masks, filter effects, and/ or gradients, though the exact number is unknown. However, as it is important that your final SVG file be readable across a variety of platforms, finding ways to work around issues like these will be one of the challenges of working with Illustrator: links to symbols can be broken (which converts them into memory-inefficient paths and strokes, but which is often better than having the symbols render incorrectly in different browsers); multiple gradient fills within the same path can be broken down into individual stacked paths, though also with some cost with regard to memory efficiency; etc.
Size considerations[edit]
Part of the glory of the SVG format is its condensed file size compared to virtually any other graphic format. It is important to try to take advantage of this fact as you create your file. Do you have a lot of repeating elements in the drawing? Use the "Symbol" function to save Illustrator having to draw the item over and over again. Too many points along your curves? Use the "Smooth" tool (this is an alternate tool located under the "Pencil" tool) and click and drag it along those messy lines to wipe away extraneous points on a simple curve (each point is a coordinate that has to be coded; fewer points, NOT smaller objects, keeps your files smaller!).
When possible, consider using Illustrator's Object → Path → Simplify Path tool to quickly clean up objects that are overloaded with points. Illustrator has a tendency to generate a multitude of unnecessary points when, for example, a stroke is outlined— the Simplify Path tool can often eliminate many of these while retaining the same underlying shape. When possible, avoid turning strokes into paths at all since strokes take up less memory, as a rule.
Avoid the use of Illustrator's well-intentioned and very clever Pattern Tile Tools and the array of Brush Definitions (stick to the Basic brush): each of these patterns and definitions would need to be traced out, line by line and curve by curve, in order to become SVG objects. The file sizes can quickly become staggering this way. Sometimes this can be justified, of course, but generally it is more weight (in kilobytes) than it is worth.
Do, however, consider drawing a simple white rectangle at the very bottom layer of your work like a white piece of paper. Illustrator 18.1.1 will always treat your background as "empty" and if the image ever appears over a background object of a different color (say blue or black) it will probably not look at all the way you intend and your text may become unreadable. Illustrator makes it look like you are drawing on a white sheet of "paper" when in fact you are drawing on the electronic equivalent of a sheet of transparency film. Your image will be done a great service if you assign it the background you want it to have, even if you do not "see" this background in Illustrator (it will be evident once you upload the image to Commons, where a checkerboard background in the .PNG format of the image will indicate its absence).
Things Illustrator cannot do: change the order of overlap in a stroke[edit]
If you draw a stroke in illustrator 18.1.1 and that stroke overlaps itself somewhere, Illustrator will automatically place the latest "points" in that stroke further down in the layer than earlier ones. In other words, if you made a scribble using the pencil tool, the last strokes of your scribble would appear "underneath" the earlier ones. This can be a problem if, say, you wish to depict a tube that is at some points closer to the viewer and at other times further away using just one stroke. You cannot "pull" stroke points/paths "forward" of other points on the same stroke/path, nor send any of them "backward" within the same object because Illustrator always puts the later points behind the earlier ones. Often this does not matter, but sometimes it does.
One workaround is to create a series of clipping masks over your object, create multiple copies of that object, and then use the clipping masks to display certain portions of the stroke/path in front of others and out of sequence with Illustrator's automatic ordering system. Another is to convert the object into a symbol and then stack symbols on top of each other, placing each within a clipping mask that shows how that layer should look relative to others. Neither is simple.
Gaussian blurs and other filters[edit]
Illustrator 18.1.1 does not come with a variety of "built in" filters to perform functions such as create blurs (gradients, yes; blurs, no). In order to create a blurred object (e.g., to create a shadow) you may need to import an appropriate filter into Illustrator from elsewhere. It is often useful to have a variety of degrees of blur to work with in a file, and below is some code which you can copy and paste into a word editing program such as Notepad, then save as an SVG file (i.e., with the name of your choice and the suffix .svg), and then import the file into Illustrator using Illustrator's menu items Effect → SVG filters → Import SVG filters…
Again, first you must create an SVG file by copying and pasting the following code into a blank word editing document such as Notepad, save the file with the suffix .SVG (not .TXT), and then import the file into Illustrator using the menu options given above. This will give you a set of Gaussian blurs of varying intensity to apply to objects in your drawing. Note that you may not apply two such filters to the same object— doing so will cause it to become a raster when saved as an SVG file.
So: copy and paste the following code into Notepad and then save it as "SomethingOrOther.svg" in a place where you can find it again (and make sure that you save the "encoding" as "UTF-8" and not "ANSI"):
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="792px" height="612px" viewBox="0 0 792 612" enable-background="new 0 0 792 612" xml:space="preserve">
<filter id="AI_GaussianBlur_25">
<feGaussianBlur stdDeviation="25"/>
</filter>
<filter id="AI_GaussianBlur_20">
<feGaussianBlur stdDeviation="20"/>
</filter>
<filter id="AI_GaussianBlur_15">
<feGaussianBlur stdDeviation="15"/>
</filter>
<filter id="AI_GaussianBlur_10">
<feGaussianBlur stdDeviation="10"/>
</filter>
<filter id="AI_GaussianBlur_06">
<feGaussianBlur stdDeviation="6"/>
</filter>
<filter id="AI_GaussianBlur_03">
<feGaussianBlur stdDeviation="3"/>
</filter>
<filter id="AI_GaussianBlur_02">
<feGaussianBlur stdDeviation="2"/>
</filter>
<filter x="0%" y="0%" height="100%" width="100%" id="AI_Alpha_3" filterUnits="objectBoundingBox">
<feTurbulence type="fractalNoise" result="turb" stitchTiles="noStitch" numOctaves="3" baseFrequency="0.2"/>
<feComposite in="SourceGraphic" in2="turb" operator="in"/>
</filter>
<filter x="0%" y="0%" height="100%" width="100%" id="AI_Alpha_2" filterUnits="objectBoundingBox">
<feTurbulence type="turbulence" result="turb" stitchTiles="noStitch" numOctaves="5" baseFrequency="0.05"/>
<feComposite in="SourceGraphic" in2="turb" operator="in"/>
</filter>
</svg>
This will give you several new blur options and two new alpha filters to play with once you import the file into Illustrator. You can also modify this code as you like to create even more varied filter effects (though be warned: a single misplaced character and the entire filter will likely fail).
3D revolve[edit]
Given the finicky nature of Illustrator when it comes to producing viable SVG files, and given that the SVG convention does not include any built-in structure for presenting 3-dimensional objects, you might expect that Illustrator's "3D revolve" function—which allows artists to create a 3-dimensional shape from a 2-dimensional path, complete with light and dark shading from multiple angles—would inevitably fail and result in a raster when converted to SVG. Not so: Illustrator will take the 3D object it has created and convert it into a series of SVG shapes which, when viewed in a browser, will look exactly like the object created in Illustrator. There are some catches: the object may take up a large amount of memory, and if you have mapped any art over that 3D shape, a raster will result (There is no SVG language for creating curves out of symbols the way that Illustrator draws them over a 3D surface). But if you simply want to create a 3-dimensional-looking object using Illustrator's 3D revolve function and then wish to convert the resulting image into an SVG, the good news is that this process will succeed—at least, so long as nothing is mapped over the surface of that object (of course, the end viewer will not be able to do anything like "turn" the object or view it from any angle other than the one you have produced in your original image: the object is not a genuine 3D one in the sense of being able to be viewed from different perspectives, it is a 3D one in the sense that it has shading and light on it such as one might expect to see on an actual 3-dimensional object viewed from that particular perspective).
However, when you attempt to run a file containing a 3D revolve object through the W3C validator, you will receive a number of errors and the file will be marked as invalid. The specific reasons for this are not well understood, but a workaround appears to go like this:
- Select the path which has the 3D revolve attribute in it
- Click Object → Expand Appearance. This will remove the 3D attribute but will keep the appearance of a 3D object. What you have now is a series of paths all ordered and placed to look just like the 3D revolve object you had a minute ago. All of these paths should still be selected.
- Click Object → Clipping Mask → Release
Once the clipping masks for all of these objects have been released, save the file and run it through Validator again. With any luck, you will now find that all your previous errors related to the 3D revolve object are gone. You now have a large stack of paths that you didn't have before, but at least the file is closer to being W3C valid.
Illustrator is not capable of converting the 3D revolve object into a series of "gradients" within paths. All of the paths that it creates when the 3D object is "expanded" will be simple one-color paths which will line up to more or less resemble gradients without actually being gradients.
How to save as an Illustrator SVG[edit]
The Illustrator 18.1.1 dialogue window to save your file in SVG format is complicated. Here are some suggestions and explanations:
First, select, "File" and then "Save a copy..." from the pulldown menu. On the next screen, select the "Save as type" option for "*.SVG". Do not choose to "Use Artboards" as this will only generate multiple copies of the same file with different numbers in the file names. Do not save as "*.SVGZ" or any of the other file formats other than "SVG". Hit "Save". If you are replacing an existing file, click "Yes" to go ahead with the replacement.
A new window will appear. At the top is a menu for which SVG format you would like to save the file in. Choose "SVG 1.1". Do not choose any other file format (unless a newer, better file format comes along such as SVG 1.2 or SVG 2.0; in that case, choose one of those). Under the parameter "Type" you should select "SVG". This preserves the editability of your document's text. For the "Subsetting" choose "Common Roman and glyphs used"—theoretically, this will preserve all of the letters from the English as well as non-English-but-still-Roman alphabets in your file so that if someone eventually wants to translate it into French, for example, the font character for ç will be preserved. Ironically, doing this does not seem to remove the need to indicate an alternate font family as explained earlier. Never select "All glyphs": if you do, the size of the file will expand enormously and needlessly.
Next, under options, you can choose to "embed" your images or "link" them. Whichever you choose shouldn't matter because you should have no images (i.e, rasters) to embed, right? But for the sake of file usability, choose "Embed" since you must choose one or the other. Do NOT place a check mark by "Preserve Illustrator editing capabilities"—this option embeds a group <i:pgf …>><![CDATA[(base64-encoded data)]]></i:pgf> to the file, that contains a copy of the image in an Adobe binary format.[1] These data are useless for any software but Adobe; moreover, some data incompatible with Wikimedia licensing can be placed there.
Make sure you now click "More Options" for the following:
Advanced Options[edit]
For CSS properties the option "Presentation Attributes" will preserve any names you have given to your layers while you composed your image. The other options may drop this information. However, saving in Presentation Attributes may also generate a series of meaningless errors during W3C validation which read, "Attribute enable-background not allowed on SVG element path at this point." If this happens, you can either attempt to resolve the problem (good luck) or you can save in another property (e.g., "Style Attributes" will not generate this particular error). "Decimal places" is a measure of the accuracy with which Illustrator will translate the points of your image into SVG code: you may choose any number of decimal places you like, but a number between 1 and 3 is usually good for most images and takes up less memory than 6 or 8 or 20. Keep the "Encoding" at "UTF-8".
Next, there are five places you can place check marks, three on the left and two on the right. Check the top two on the left and leave the two on the right blank. The top left one says Output fewer <tspan> elements. Failure to check this will potentially create problems with your fonts. The bottom one says Responsive. If you check this, you may be adding unnecessarily to your file size. If you choose to Include XMP, your file may fail W3C validation.
Now click "Okay". The file will save. To see what you have now achieved, first make those two manual edits to the document in a word editor (the font family and font size) and save the file, then open up the SVG version of the file in any web browser. If everything has gone according to plan, you should now see your image exactly the way that others will see it across a spectrum of platforms.
W3C time[edit]
 | It has been suggested that Help:SVG/basic1 should be merged into this page. (discuss) |
Now that you believe you have a valid and economic SVG file, it is time to see if it can pass W3C validation. Go to the W3C validator here and click "Validate by file upload". Navigate to your newly minted SVG file by clicking "Browse", locating the file, and clicking "Open". Then click "Check" and cross your fingers… With some luck, you will soon be greeted with a message telling you that your document has passed W3C validation. NOW your file is finally ready to upload to Commons.
If, on the other hand, you are given a list of errors in your SVG file, you have two choices. If the image appears to render correctly in different browsers, then technically W3C validation is only a bit of icing on a cake. You may ignore it, though you should not mark the file as having passed W3C validation. On the other hand, you can also attempt to fix the issues that the validator has brought up. The results are often very technical and file-specific, so there is little direction that can be given here to solve them. Often these errors are associated with the rasters that Illustrator has had to generate in order to retain problematic aspects of your image (i.e., multiple filters in the same layer, etc.). Simplifying these aspects often reduces or eliminates the number of associated errors. Remember that if you make any corrections to the image in .AI format, you must go back over the resulting SVG file and once again correct the font-related code before uploading the image to Commons.
Many times you will be notified of a W3C validation error that makes no sense to you and which affects a part of your image in a way you cannot begin to guess. One of the ways of handling such errors is to edit the SVG code in a word editing program like Notepad, locate the offending line of code, erase it entirely, save the resulting file, then open it in a browser window to see if it has changed. If you can spot an alteration, then you have found the part of your image that is generating the offending code; if you cannot visually determine what has changed by looking at the new image, then you should run it through the validator once more to make sure no new errors have resulted from the deletion of the code under the hopeful premise that code that has been removed cannot cause an error (though sometimes removing code can cause errors in code further down which were not errors before the deletion, especially codes that occur in sets like <filter>... </filter>). If this appears to solve the problem (from the W3C perspective), then you can consider the problem solved and move on.
Other W3C errors and how to handle them[edit]
Line X, Column Y: Attribute id declares a duplicate ID value SomeNameofthatValue[edit]
Illustrator has a bad habit of assigning duplicate IDs to certain things, and while this causes no errors in Illustrator, it doesn't work in the SVG form (or rather, it will work, but causes a validation error meaning the script is technically "invalid" and has not passed "validation"). This seems to happen, for example, when you have multiple instances of the same symbol which they you convert into individual instances of that symbol (for example, in order to avoid the Firefox problem with regard to the use of gradients within symbols): Illustrator converts these symbols into individually named instances which are no longer symbols but rather objects, but may not assign each new object a completely distinct ID name.
You night think you could edit the SVG file and change the name of one of the problem IDs, but that won't work because each ID is tied to a specific element in your image and switching names only means that the SVG file will now have a request for a named object which doesn't actually exist. Also, any modifications to the SVG code will be lost if you make any new changes to the Illustrator version of the image and then save it again as an SVG. The only times when the SVG code should be messed with directly is when changing font families and adjusting font size format (from points to "em", as described earlier).
The first step in fixing a duplicate ID error will be finding out exactly which objects in your image have this duplicate ID. The ID name of the element is given in the error line by the W3C validator—if you have given each of your elements a name when you created them, this should help greatly in tracking down just where the problem lies. Not everyone does this, of course, so you may have to resort to other means. In a recent image I generated here, running the validator caused a duplicate ID to show up for some object named New_Symbol_13_33. I had already converted the various instances of this symbol into separate elements (because that symbol contained a gradient, and I knew Firefox would not be able to render it correctly if it remained as a symbol) so I had to find where the name of this symbol was occurring in my layers list. I also could see that I must have used this symbol, whatever it was, at least 33 times somewhere in my image. One way to possibly identify it would be to edit the SVG code and delete either the first or the second instance of this object/element and see if I could tell what it was visually when displayed in a browser window. If spotted there, I could return to the Illustrator version of it, adjust it somehow (by changing its name, most likely), re-saving it as an SVG, and running it through Validator a second time to see if it was resolved.
Line X, Column Y: Attribute enable-background not allowed on SVG element path at this point.[edit]
Under the "SVG Options" window that appears when you attempt to save an Illustrator file as an SVG, under the "Advanced Options" section, there is an option to adjust the CSS Properties. If this is set to "Presentation Attributes" rather than "Style Attributes", you may cause this error (it may also be produced other ways as well, of course, but this one is a known problem). Try saving the file with CSS Properties set to "Style Attributes", and the error should disappear.
Line X, Column Y: Attribute id declares a duplicate ID value SVGID_N_[edit]
The "N" here denotes some number. This error will occur as a set, along with the text telling you where you first named this SVGID object. Problem is, you never named that object, and cannot tell what it is. SVGIDs can be produced when you use a transparency that contains a gradient mask and save your file into SVG format from Illustrator. Illustrator itself will probably not even have anything named SVGID _"whatever"_ in it— the name for this object is being assigned when the file is being converted, not by you the person drawing. You may try working around this by avoiding the use of the transparency mask function altogether, as this function is a know problem generally. Restarting Illustrator and re-saving the file in SVG format may also have some effect.
Tagging Illustrator files[edit]
Once you have finished the upload, go back and edit the image file information. You should add two templates/tags to the file description: {{Valid SVG}} and {{Created with Adobe Illustrator}} or, even better, the template {{Adobe Illustrator|v}}.
See also: Help:SVG#Tagging SVG files, for an overview on how to categorize and mark SVGs, and Help:SVG/basic1 for more assistance in creating valid SVG files from Illustrator SVGs.
References[edit]
- ↑ SVG Cave Map Compatibillty. Retrieved on 6 July 2017.