Problem importing SVG file

Get Started
1

Hi,

I want to import an SVG file to use on my web site but nothing is displayed. I’m testing this using VS2010 and have tried viewing in all major browsers with the same effect. Can anyone offer some advice into what I should be checking?

Many Thanks

Html file

<!doctype html>
<html>
<head>
    <title></title>
</head>
<body>
<!-- does not display -->
<embed src="img/SVG/green-circle.svg" width="500" height="320" type="image/svg+xml" />
<img src="img/SVG/green-circle.svg" height="64" width="64" alt="green circle" />
<object type="image/svg+xml" data="img/SVG/green-circle.svg" style="float:left;margin-right:1cm;" width="64" height="40" border="1"></object>
<!-- correctly displayed -->
<svg id="circle" height="64" xmlns="http://www.w3.org/2000/svg">
  <circle id="greencircle" cx="32" cy="32" r="30" fill="green" />
</svg>
</body>
</html>

green_circle.svg

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="circle" height="64" xmlns="http://www.w3.org/2000/svg">
  <circle id="greencircle" cx="32" cy="32" r="30" fill="green" />
</svg>
2

This worked just fine for me:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
    <title>Test embedding SVG</title>
</head>
<body>

<embed src="green-circle.svg" width="64" height="64" type="image/svg+xml" >
<img src="green-circle.svg" height="64" width="64" alt="green circle" >
<object type="image/svg+xml" data="green-circle.svg" width="64" height="64"></object>

</body>
</html>

In separate file I saved in the same folder:

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="circle" height="64" xmlns="http://www.w3.org/2000/svg">
  <circle id="greencircle" cx="32" cy="32" r="30" fill="green" />
</svg>

You should be checking your file paths. Also, you don’t need the self-closing syntax /> for void elements in HTML5 although I guess it can be used without throwing validation errors.

3

It looks like a problem with VS2010. I can load the svg fine pointing at the html file directly through a browser. Maybe VS2010 is not understanding the mime type, but I do not know how to check.