SVGs (Scalable Vector Graphics) are very powerful and have many advantages over raster-based images. Chiefly, that they are vector-based and can rescale to any size with no change in quality. Additionally, the properties of an SVG can be altered with CSS, meaning that a single image can be used in many different sizes and colors (with caveats). One often overlooked benefit of SVGs is that the file is plaintext and can be versioned controlled, searched and edited just like any other code. It’s best to think of SVG as an image format that can be opened in either a vector image editor or a text code editor.

With all of the vectory goodness there are certainly some limitations to consider. SVG isn’t for every type of image. Photographs should almost always be JPG, and screenshots are usually best as PNG. The most typical use for SVGs are as icons and simple design elements. SVG images can be used on any modern browser and are supported by older browsers including IE9.

From a usage standpoint the most significant limitation is the complexity of the format. JPGs and PNGs don’t have many settings are easy to export and implement. A PNG either works or doesn’t. An SVG on the other hand has numerous export options and may work only partially, seeming to work at first. 

Depending on how an SVG image is exported it may be more or less useful for certain applications. For example, an SVG can be exported in such a way that it automatically scales to the largest size possible. Though note that just because an SVG image can be scaled infinitely without loss of quality, the artwork itself may not work well at certain sizes.

Prepare the Source Graphic

While the export settings are important, the successful use of an SVG image is mostly about preparing the raw original file to be exported. First, to be exported as a proper SVG, the Illustrator or Photoshop source image must be entirely vector shapes.

Be sure that the whitespace around the image is precisely as you want it, but it is usually best to make the artboard or canvas the exact size of the image. In Illustrator, select everything then Object > Artboards, then choose Fit to Artwork Bounds. In Photoshop, a similar function is Image > Trim.

Flatten the image as much as possible and combine as many shapes as possible. Remember that every layer and separate shape is an additional element inside the SVG. Ideally, your icon would be a single shape layer for each color. Also punch out any holes that are supposed to be transparent to the background.

Unfortunately many of the typical tools in Illustrator and Photoshop don’t play well with exporting to SVG. Keep an eye out for masks, layer blending modes, and smart objects as a few of the trouble spots. The SVG format actually has its own filters that can be applied, but those aren't covered here.

Also, in almost all cases you’ll want to ensure any text in your image has been converted from actual font shapes to plain paths. This may actually be able to be done during the exporting process, but converting your text to shapes yourself is more reliable.

Export From Illustrator

The most current versions of Illustrator and Photoshop have completely different SVG export tools. I’ll cover each separately.

Illustrator actually has two different ways to export SVGs, but only one of them is optimized for web usage. To export a proper SVG from Illustrator use File > Export.

Once choosing a file name and location, the SVG Options window will open with several controls:

• Styling: Internal CSS, Inline Style, and Presentation Attributes. This is the most important of the settings, as it determines how the SVGs code handles CSS styling. The export examples section shows the precise differences, but the upshot is that unless you have a particular reason to choose another, choose the Internal CSS option. That option will enable the SVG to be used in such a way that CSS can be applied to it.
• Font: SVG or Convert To Outlines. If you have no text in your image than this option is irrelevant. The SVG option will make any text in the SVG selectable like HTML text. That has possible uses, but as mentioned in Preparing the Source, fonts inside an SVG should normally be converted to outlines. This option will suffice, but it may be more reliable to use Type > Create Outlines to make the outlines yourself before you export the SVG.
• Images: Preserve, Embed, or Link. This determines how bitmap images are handled if they are part of the SVG. There are very limited circumstances in which this setting is relevant, so any setting will do.
• Object IDs: Layer Names, Minimal, or Unique. This sets how ID names in the SVG code are assigned to objects in the the SVG file. In nearly all cases, choose Minimal.
• Decimal: This lets you specify a number value for how precise the numbers are calculated in the SVG. Higher values may increase the appearance of the rendered SVG at the expense of file size. A value of 2 is ideal in almost all situations.
• Minify: This sets whether to make the SVG code as small as possible, or as make it as human-readable as possible. It isn’t hugely important for most of the types of SVG images I normally work with. Normally leave Minify checked.
• Responsive: This is another typically important setting. This determines whether the SVG is given an explicit height and width. If this box is checked, the SVG will be exported in such a way that it will always try to be as large as its parent element will let it. Whether that behavior is desirable entirely depends on what is called for in a given design. However, my normal preferred technique is to export SVGs as responsive and use CSS to set the height and width when needed.

Examples From Illustrator CC 19.2.1 (64-bit)

A test icon logo is used to compare the exact differences between the output of each SVG export tool. The logo is not at all intended to be a realistic example, but instead it is simple enough that most people should be able to make sense of the SVG code.

Download Illustrator Test Specimen

Note that the code shown has be reformatted (unminified) for ease of reading, but would normally be on a single line.

Illustrator SVG Option 1

This combination of settings is my normal configuration. It provides easy hooks for CSS interaction and scales to the largest size allowed by its parent element.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
<defs>
<style>
.a {fill: #ffb42a;}
.b {fill: #ed4016;}
</style>
</defs>
<title>test-AI-01-internal-css-responsive</title>
<rect class="a" x="50" y="50" width="100" height="100" />
<circle class="b" cx="50" cy="50" r="50" />
</svg>

Illustrator SVG Option 2

Unchecking the Responsive option creates the same SVG, but adds an explicit width and height to the first line of the code. It's worth noting that the results of this sort of export are most similar to the results produced by the SVG export in Photoshop.

<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
<defs>
<style>
.a {fill: #ffb42a;}
.b {fill: #ed4016;}
</style>
</defs>
<title>test-AI-02-internal-css-nonresponsive</title>
<rect class="a" x="50" y="50" width="100" height="100" />
<circle class="b" cx="50" cy="50" r="50" />
</svg>

Illustrator SVG Option 3

This option moves the CSS styling inline with the shape inside the SVG as a style attribute. The effect is that the CSS properties can't be easily altered outisde of the SVG with an external stylesheet.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
<title>test-AI-03-AI-inline-style-responsive</title>
<rect x="50" y="50" width="100" height="100" style="fill:#ffb42a" />
<circle cx="50" cy="50" r="50" style="fill:#ed4016" />
</svg>

Illustrator SVG Option 4

As before, unchecking the Responsive option creates the same SVG, but adds an explicit width and height to the first line of the code.

<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
<title>test-AI-04-AI-inline-style-nonresponsive</title>
<rect x="50" y="50" width="100" height="100" style="fill:#ffb42a" />
<circle cx="50" cy="50" r="50" style="fill:#ed4016" />
</svg>

Illustrator SVG Option 5

This option moves the CSS styling inline with the shape inside the SVG as a property.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
<title>test-AI-05-AI-presentation-attributes-responsive</title>
<rect x="50" y="50" width="100" height="100" fill="#ffb42a" />
<circle cx="50" cy="50" r="50" fill="#ed4016" />
</svg>

Illustrator SVG Option 6

As before, unchecking the Responsive option creates the same SVG, but adds an explicit width and height to the first line of the code.

<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
<title>test-AI-06-AI-presentation-attributes-nonresponsive</title>
<rect x="50" y="50" width="100" height="100" fill="#ffb42a" />
<circle cx="50" cy="50" r="50" fill="#ed4016" />
</svg>

Export From Photoshop

Exporting an SVG from Photoshop is very straightforward; to export a proper SVG from Photoshop use File > Export > Export As.

Once the Export As window opens, choose SVG from the drop down menu. The default settings are fine. Click Export All to choose a file name and save the new SVG file.

Example From Photoshop CC 20151209.r.327 x64

Download Photoshop Test Specimen

The SVG code output from Photoshop is most similar to the responsive Internal CSS export option in Illustrator. Note that all SVGs from Photoshop are set with an explicit height and width. To edit the SVG to scale to the largest size after exporting, remove the height and width attributes from the first line.

<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
<defs>
<style>
.cls-1 {fill: #ed4016;}
.cls-2 {fill: #ffb42a;}
</style>
</defs>
<circle id="Circle" class="cls-1" cx="50" cy="50" r="50" />
<rect class="cls-2" x="50" y="50" width="100" height="100" />
</svg>

Use an SVG

First, open the SVG directly in a browser to preview it. The size of the image will appear depending on whether the SVG has an explicit width and height set. If the image is set as responsive it will fill the entire viewport. While you are inspecting the image, look to ensure that all of the edges are razor crisp and that there are no blurry elements. If any aspects of the image are blurry then it is likely that the SVG has raster images embedded inside of it and hasn’t been prepared / exported correctly. Once you are sure the SVG is set up correctly for your needs, it can be used like any other image with an IMG tag.

Use CSS to Change SVG Properties

SVG images can be altered with CSS just like any other HTML. The key to this technique is that the SVG code itself must be directly inside the HTML. That is, the SVG code has been copied and pasted into the HTML in the position the image would be in. From there the styles of the SVG can be accessed with CSS. View an example for more info.

More Resources

• W3Schools SVG Tutorial
• CSS Tricks Using SVG
• Understanding SVG Coordinate Systems and Transformations
• SVG Viewport and View Box

Ingredients

• 3 boxes of corn muffin mix (8.5 oz.) (I use Jiffy brand, but any brand should do. Note that depending on the brand it may need additional eggs and/or milk)
• 4 hardboiled eggs
• ½ onion
• 2 bunches green onions
• ½ lbs. sausage or ground turkey
• ½ lbs. ground beef or turkey
• 3 cans chicken broth (14.5 oz.)

Preparation

1. Prepare the cornbread as per the package. A 2 or 3 quart casserole dish seems to be the right fit. (I use a 3 quart dish and reuse it for baking the completed mixture)
2. Chop the hardboiled eggs
3. Chop the onion
4. Chop the green onions and sautee them
5. Brown the meat and/or sausage
6. In a very large mixing bowl crumble up the cornbread and add all of the other ingredients. Mix it all up very thoroughly.
7. Pour it all into a greased 3 quart casserole dish and bake uncovered at 350 degrees for 30 – 45 minutes depending on how wet it is.
8. If it isn't delicious then try again.