I am attempting to display a dynamically created SVG inline in a dojo based application and am running into some difficulty.
When I navigate directly to the SVG, it renders fine in Firefox 3.5/3.6 and Chrome, but when I inline it, verifying I have the right DOCTYPE
and XML namespaces, both Firefox and Chrome just display a pile of text from within the SVG. I then attempted to change my content type served up to force it to be application/xhtml+xml
but when forced into a XHTML valid mode, both Firefox and Chrome refuse to give dojo access to everything in the DOM that is required for it to work.
The start of my document is:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:xlink="http://www.w3.org/1999/xlink">
And my inline SVG starts as:
<svg xmlns="http://www.w3.org/2000/svg" width="480" height="1394">
I have also attempted to display the SVG stand alone through an <img>
tag, which seems to work fine in Chrome, but Firefox 3.5/3.6 refuses to display the SVG in a dijit.ContentPane
, though again navigating directly to the document displays the picture. For this I used:
<img src="test_svg.php" />
And my standalone document starts with:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.0" width="480" height="1394">
And I set the following header:
Content-Type: image/svg+xml
I would use dojox.gfx
but I have a rather lot of server side code to generate the SVG that I wouldn't be too keen on trying to translate to dojox.gfx
and I am pretty sure that some of the styling I do with the SVG is not easily supported under dojox.gfx
.