I'm stumped on getting svg to show. Even the simplest thing file will not show when I upload it. When uploaded to the server at work, no problem. I uploaded the files to my own hosting space from home, to learn and test. The exact same files. Nothing works??? I keep hoping it's some sort of namespace issue, but again - this exact file worked at the office. I tried it on a third server, and it worked. I'm not sure what I might be able to do, or what server changes to request from the person hosting my site.
I tried adding a couple lines in .htaccess to solve the problem:
AddType image/svg+xml svg
AddType image/svg+xml svgz
Nothing. An html page in firefox 19.0.2, just shows everything but the svg file. I tried Chrome and Safari, too. If I try to load the svg file itself, and it doesn't even find the file.
Sample HTML PAGE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html lang = "en">
<head>
<title>basic.html</title>
<meta charset = "UTF-8" />
</head>
<body>
testtttt
<object data="test.svg" type="image/svg+xml"></object>
</body>
</html>
And the test.svg file:
<?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 xmlns="http://www.w3.org/2000/svg" version="1.1"
width="50" height="160" viewBox="0 0 236 120">
<style type="text/css" media="screen">
rect:hover {
cursor: pointer;
}
</style>
<g onmouseover="evt.target.setAttribute('opacity', '1');"
onmouseout="evt.target.setAttribute('opacity','0)');"
onclick="alert('click!');">
<set attributeName="opacity" from="0.01" to="0.9" begin="mouseout" end="mouseover"/>
<path d="M0,0 50,0 50,120 0,120" style="fill:#97aa2b;" />
<text x="14" y="75" font-family="Verdana" font-size="25" fill="white"
> 01 </text>
</g>
</svg>