Search code examples
htmlcsssvgadobe-illustrator

Illustrator exported .svg files won't render in HTML

I am not sure if this is a coincidence, but it seems that if I export svg files from Illustrator or even try to use svg files I find on the web that were exported from Illustrator, they don't render.

I am using the code below, maybe someone with in-depth knowledge of svg and HTML can tell me what might be wrong with my svg file?

<!DOCTYPE html>
<html lang="en">
  <style>
    html {
      background-image: url(https://dl.dropboxusercontent.com/u/7146901/svgbkgnd%5B1%5D.svg);
      background-size: contain;
      height: 100%;
    }
  </style>
  <head>......</head>
</html>

I have tried the code above and replaced the link to a different svg file and it works, so my guess is that something is wrong with my svg file specifically?

Solution

  • It works as expected. See http://jsfiddle.net/PA8zn/show Here I've included the SVG on the HTML element:

    html {
    background: url(https://dl.dropboxusercontent.com/u/7146901/svgbkgnd%5B1%5D.svg) no-repeat;

    }

    The SVG is a very heavy file, so it takes quite a while to show up. You could try cleaning it up to improve performance. Either by hand or with a tool like Scour: http://codedread.com/scour/