How can I mix SVG and HTML into a page?
- by John Duff
I've been using the jQuery.svg plugin to do some SVG rendering and it works perfectly but I also want to have the server render some SVG into the page and I can't get that to work. How do I add some SVG like below into the page so that Firefox will render it?
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
preserveAspectRatio="none"
viewBox="0 0 100 100">
<linearGradient id="background_gradient_black" x1="0%" y1="10" x2="0%" y2="90" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#000" stop-opacity="1" />
<stop offset="45%" stop-color="#444" stop-opacity="1" />
<stop offset="55%" stop-color="#444" stop-opacity="1" />
<stop offset="100%" stop-color="#000" stop-opacity="1" />
</linearGradient>
<rect x="0" y="0" width="100" height="100" fill="url(#background_gradient_black)"" />
</svg>
Do I need a meta tag saying that there is SVG content in the page or define the SVG namespace somehow?