Explanations of SVG Export settings in Illustrator? [closed]

Question

Just got Illustrator and getting familiar with the program, are there any specific export settings that I need to be aware of in order to export as a .SVG file? There appear to be several settings, i.e. Styling, Font, etc. Would it be possible to provide explanations for each option and what they do?

Answer 1

SVG is entirely a text format used for representing images, so depending on how you change the export settings is how the text will be formatted. In most cases on modern browsers, they will all work. However if you need to format it a specific way for a specific program, these are what these settings are for. An SVG is set up in a way that uses XML tags. A header declares it as an SVG file, which is followed by an svg tag and ends with an /svg tag, very similar to HTML.
In fact, you can use directly in html files and interact with it through javascript as though it were part of the DOM, though you will get different mileage with different browsers.

Styling

Internal CSS: Similar to an HTML CSS, the SVG can store the colors, stroke width, gradients, etc, all in one place at the top of the file. This is the easiest method to work with afterwards if you want to tweak colors outside of Illustrator. Internal CSS uses classes to give the correct style to each of the paths.

Inline CSS: Still using CSS, this embeds the style into each path element itself using a style Attribute. This will pair each path's style with its path, which may result in larger file sizes depending on the complexity of your art.
(ex: path style="stroke-width:8; stroke:blue;"...)

Presentation Attributes: Forgoing CSS, this embeds each bit of information into its own path much like inline CSS, but instead uses the built in attributes of each element. This is mostly for legacy support, as CSS is the preferred method. This may also result in larger file sizes.
(ex: path stroke-width="7" stroke="#FF00FF"...)

Font

SVG: Type data is stored as plain text and then recreated by the browser using the specified font, though this may not be perfectly recreated when its viewed on a different computer that doesn't have that font. This will retain edit-ability when opening the file later.

Outline: This outlines the fonts and stores them as paths, with the correct styles. This will stop anybody from being able to edit your font as characters, but it will result in text displaying exactly how you made it, but at the cost of a larger file size.

Images

Embed: Embedded images can be stored inside the SVG itself in a method known as Base64 encryption. This will result in higher filesizes but will ensure that the image will never be seperated from the SVG file.

Link: SVG's can also pull images from outside sources, which can be handy if you need to save on filespace by not having an image embedded inside. This will need to pull from other parts of your hard drive or webserver, but can easy become seperated if the image or the svg file is moved from where it was saved.

Preserve: Illustrator will pick which one of these to use based on how it is stored in the .AI file, since illustrator supports both embedded and linked images.

Object IDs

Elements will not be given an ID attribute unless you have specified one, or unless one of the following rules overrides it.
Layer Names: This will group elements in a layer together, and give the layer the ID of what the layer is named. Minimal:This will remove all layer groups and IDs from all elements, resulting in slightly smaller filesizes but losing all javascript functionality. Unique: This will give all elements unique IDs such as (3ff10d7d-c4ce-48dc-ba65-100cea7ab8e7).

Minify

Minify takes all the newline characters out, meaning the entire SVG is on one line. This makes it harder for a human to read, but makes no difference to a computer. It is sometimes needed for some programs to read it the file properly.

Responsive

Responsive checkbox changes the header of the SVG to be allow the svg to scale infinitely to fit the box that its in. (the window, the div, iframe, etc.) This can make or break functionality with some programs though, so be wary of it.

Answer 2

Consider if your output will be print or web. Try the default settings first, then either print a sample to see what it's like, or try opening it another SVG compatible application like Inkscape or a web browser to see if anything strange happened.