CODEWITHSUNDEEP
firefoxdojogoogle-chromesvg
Kitson
Kitson

Reputation: 1678

dojo and Displaying Inline SVG

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.

Upvotes: 1

Views: 2363

Answers (1)

Eugene Lazutkin
Eugene Lazutkin

Reputation: 43956

Just use <embed>.

<embed src="generated.svg" width="500" height="500">

BTW, this method even mentioned in SVG Primer. It is very easy to check if it works for you: http://srufaculty.sru.edu/david.dailey/svg/simplescript.html — taken directly from the SVG Primer. If you can see a quarter-circle it works.

Of course, going this route you are tying your application to SVG-capable browsers. No IE, no mobile browsers that support only Canvas.

Upvotes: 2

Related Questions