: Illustrator generated SVG doesn't work on a web page Using Illustrator CC 2015, when I save an AI file as a SVG then apply this SVG file as a CSS background-image, it displays nothing. Why?

@Sent7350415

Some things to look out for:

1. AI: Use the Export dialog

In Illustrator, make sure you use the Export as dialog (File > Export > Export As...). The Export dialog was made specifically for exporting files for web use, while the Save As dialog was made for saving a file for later reopening in AI. This means Export gives you a lot of extra options the Save As dialog doesn't include.

The default options are usually good, except in certain cases (e.g. when you want to manipulate the SVG later, it's better not to minify it so you can actually read the code). It's best to leave it at responsive unless you want it at a specific size. But since SVG is a vector file, there really is no need to not make it responsive.

click for full resolution

2. Code: Use a separate SVG file

In most cases, it is unnecessary to include the SVG in you HTML. Just Export it from AI and use it like you would a JPG or PNG. I find this a lot easier to work with, because SVG files don't need a separate workflow from other images.

Here's a JSFiddle link with a working SVG background.

Vote Up Vote Down