The SVG (Scalable Vector Graphic) file-format is an XML-based vector in that can be used on the web right now. Not only are they crisp at any size they are scaled to, but they are supported by IE9+, Firefox, Chrome, and Safari. For IE8 and below, you can provide a fallback PNG. Simple icons and logos are good candidates for the format, as they are often the first noticeable elements of a design that will look blurry on a retina display.

You’ll probably want to use some SVGs if:

  • You’re creating a responsive website, or
  • You want to support iOS devices with a retina display

SVG Cropping

When exporting your SVG from Illustrator, it’s important to note that the “artboard” canvas around your vector should be cropped, so that there isn’t any extra white space. This is a common mistake that I’ve noticed in the last few SVGs provided to me from different designers. This is not typically something that matters when dealing with vector source files, but when SVGs are used on the web, they are linked to just like an image, and the extra white space will be displayed.

Good vs Bad SVG Cropping

Besides changing the size of your artboard and manually scaling your vector elements, there is a quick way to crop the artboard in Illustrator CS6:

  1. Select everything that should be included in the SVG
  2. Select Objects -> Artboards -> Fit Artboard to Bounds

For those of you still on CS3, you’re in luck. There is a way.

  1. Activate the Artboard tool (Shift-O)
  2. Double click your vector, and it should adjust the artboard to fit

Dimensions of your Vector

Although it’s a vector, you may want to keep the size of the SVG at the initial default size it is displayed on the site. You can always change this by opening up the SVG file in a text editor and changing the width and height at the top.

Illustrator SVG Export Settings

For the best compatibility, use the following settings

  • Profile: SVG 1.1
  • Type: Convert to outline – This makes sure that any text used is converted to shapes.
  • Image location: Embed – If you are including bitmap images (probably not), they will be included in the file, rather than linked to separate files.
  • Decimals: This is the level of precision. You may want to set to 2 or 1 decimals (default 3) to decrease the file size.
  • Keep “Compressed” and “Optimized for Adobe SVG Viewer” unchecked (Visible in main “Save for Web” export menu in Adobe CS3).

SVG Export Settings, Adobe Illustrator

For a full overview of all the settings in detail, check out this post on StackOverflow:

Example Scaled SVG Test

As a test, I tried exporting an SVG with the decimal option set to 1, 2, and 3.

Avoid Filters and Effects in Your Vector

The last logo I attempted to save out as an SVG had some color variations. I could not find any info on this specific issue, but it may have had something to do with the radial gradient or a layer style used. In the process I discovered a few tips about what may be causing your SVG to look wrong.

Avoid any special filters and effects. Keep your shapes solid and as basic as you can. Don’t use Multiply Layers;  Just like on PSDs for a web design where PNGs will be exported, avoid any layers set to multiply, because they will not work  in the web browser.

Performance Issues and Downsides

When SVGs start getting too complicated, or you are using a lot of them, both the file size and rendering performance may become an issue. Since the browser is doing all the CPU processing to render all the lines and shapes dynamically, be careful that this isn’t too much for a mobile phone to handle. Others on the web have more to say about this:

Export from Photoshop?

If you have a vector in a Photoshop layer, there is currently no way to export it without purchasing a 3rd-party plugin. So your best bet is to copy your vector path in Photoshop and paste it directly into a new document in Illustrator, or to export as EPS with the “export vectors” option checked, and then export your SVG from Illustrator.

 

Comments on this Article

  1. Adam says:

    Helped alot, thank you! (svg handling is new in CS6)

  2. Kobus says:

    “Convert to outline” . That option should come standard in Illustrator CS6. Would have saved me a lot of trouble. The font in my image kept on shrinking and changing until I selected that. Thanks very much!

  3. Carl says:

    Under the file menu in photoshop there is an “export paths to illustrator” option.

  4. Emma says:

    Great article, thanks. I have the following problem with my SVGs: I follow all the directions, crop the image, save it as SVG and it looks great. But when I open the file again in Illustrator the artboard reverts to a large size, and I have to crop the image again, do you know why?

    • Josh says:

      Save as, an alternate version of the source file after its cropped? (excuse me if you already did that). Otherwise I’m not sure. Illustrator frustrates me to no end, and I try to avoid using it.

  5. John says:

    I clicked the logo – then clicked Objects -> Artboards -> Fit Artboard to Bounds. This created a white background behind the logo and didn’t resize the over sized border to fit just my logo. Am I doing something wrong? CS6.

  6. David says:

    >> Select Objects -> Artboards -> Fit Artboard to Bounds <<

    Ohhhhhh YES! Thank you!

  7. Dhivya says:

    Thanks a lot!!

  8. Linda says:

    I am getting multiple paths in my export file and need to have just one. Do you know why?

  9. Craig says:

    Hi, is there a reason why you are suggesting to keep the vector at it’s default size? This is something I am doing anyway, although the svg can obviously be resized to whatever, but I can’t really come up with a good reason as to why this would be beneficial. Thanks!

    • Josh says:

      I believe it was because of a browser issue/bug I originally encountered with IE9 not scaling it properly.

  10. Bruce says:

    Are you still managing this topic? I had a question. I am using Creative Cloud/illustrator and am saving a svg file. The image is like 137 x 15 pixels however when I SAVE AS or EXPORT to svg it grows to a very large image. It is for a footer so it needs to be small. I noticed the vieBox as being correct “0,0,137,15”. I messed with the code and removed everything in the viewBox – just left the quotes and the image came out correctly on the web. Any idea what I am doing wrong as i export or save as svg? Any help would be appreciated, thanks

    • Josh says:

      This post is a bit dated now, I’m going to close comments. That’s hard for me to answer without seeing the file or the context in which it’s displayed. The browser may just be scaling it to fit its container, if the SVG is used in an IMG tag? If so, try setting a fixed (or max) width or height on it. Lots more complications are involved; this may help: https://css-tricks.com/scale-svg/

Comments are closed.