SVG Export Settings for the Web with Adobe Illustrator

by Josh | Posted in Tutorials & Guides | Tagged:

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.

 

Recommended Books For Web Devs

CSS Secrets [Book Cover] Building out a design into HTML and CSS is like a series of small puzzles— some trickier than others. CSS Secrets: Better Solutions to Everyday Web Design Problems is a practical and modular look at many of the unique challenges you'll encounter during front-end development. Well-designed, and easy to pick up for any intermediate to advanced front-end dev looking to pick up some tips and tricks, and honing the processes used to figure them out.

Eloquent JavaScript [Book Cover] Eloquent JavaScript: A Modern Introduction to Programming is an engaging and well-formatted overview of JavaScript, complete with example projects and helpful diagrams. It's easy to read—not too dense, with readable type—and covers many subjects. The revised edition covers some of the newer features of JavaScript, including: class notation, arrow functions, iterators, async functions, template strings, and block scope.

The Phoenix Project [Book Cover] While The Phoenix Project: A Novel about IT, DevOps, and Helping Your Business Win is a fictional novel, the slightly exaggerated characters and situations involved will be very familiar to anyone working in software development and IT. In it, an IT manager is confronted with the seemingly impossible task of turning around a project that's over-budget and past deadlines in 90 days, or else his department will be outsourced. The morals and takeaways from this story about DevOps and lean principles will stick with you.

Comments on this Article

  1. | Link
    Adam says:

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

  2. | Link
    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. | Link
    Carl says:

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

  4. | Link
    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?

    • | Link
      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. | Link
    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. | Link
    David says:

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

    Ohhhhhh YES! Thank you!

  7. | Link
    Dhivya says:

    Thanks a lot!!

  8. | Link
    Linda says:

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

  9. | Link
    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!

    • | Link
      Josh says:

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

  11. | Link
    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

    • | Link
      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.