For Shelley Powers: Odd error when using within XHTML document: works with Firefox, does not work with any other browser

[GoogleCodeExporter]

I converted one of my web sites, which used SVG for the background, into using 
svgweb. It's at 
http://frugalalgorithm.burningbird.net.

I followed the instructions in the documentation, included my SVG within a 
CDATA section. 

The graphic works fine in Firefox, in Mac and Windows. However, the same error 
is generated 
with IE, Safari, and Opera (error from Opera shown):

Error:
name: Error
message: There is a bug in your SVG: <parsererror 
xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml">Error<sourcetext>Un
known 
source</sourcetext></parsererror>

Original issue reported on code.google.com by shelley....@gmail.com on 18 Sep 2009 at 4:59

[GoogleCodeExporter]

When debugging using the uncompressed js library, I noticed that Firefox 
stripped the
CDATA out of the XML before parsing, while Opera did not. 

Original comment by shelley....@gmail.com on 18 Sep 2009 at 5:23

[GoogleCodeExporter]

I am not sure why Brad suggested that syntax in the UserManual:

<script type="image/svg+xml"><![CDATA[
  <svg width="466" height="265" id="svg11242"></svg>
]]></script>

If I remove the CDATA wrapper it works for me. Assigning to Brad since I do not
understand the purpose of the CDATA recommendation.

Original comment by grick23@gmail.com on 18 Sep 2009 at 5:48

• Changed state: Accepted

[GoogleCodeExporter]

Shelley, what happens if you don't nested the SVG inside of a CDATA section in 
the
SCRIPT block?

Original comment by bradneub...@gmail.com on 18 Sep 2009 at 6:33

[GoogleCodeExporter]

The SVG does work when you remove the CDATA. Unfortunately, though, the SVG 
within the scripting block will 
generate a whole lot of validation errors when you validate as XHTML. 

My page isn't valid anyway, because I use the RDFa doctype, but others using 
the script without CDATA that did 
validate will get validation errors. No biggie, really, but people should be 
forewarned.

Original comment by shelley....@gmail.com on 18 Sep 2009 at 11:17

[GoogleCodeExporter]

I spoke too soon. Now, the error is happening with Firefox, but no one else. 

So, it seems to only work in Safari, Chrome, IE, and Opera without the CDATA, 
but only work with the CDATA in 
Firefox, when the page is served as XHTML

Original comment by shelley....@gmail.com on 18 Sep 2009 at 11:30

[GoogleCodeExporter]

Would it be correct to change the title of this bug to:

"SVG Web does not correctly handle CDATA SCRIPT blocks when served as XHTML"

Does that correctly describe the situation.

Original comment by bradneub...@gmail.com on 18 Sep 2009 at 11:56

[GoogleCodeExporter]

This was related to three issues:

* When you embed SVG Web into an XHTML page, you _must_ surround your SVG SCRIPT
blocks with CDATA sections as the User Manual indicates:

<script type="image/svg+xml"><![CDATA[
  <svg width="466" height="265" id="svg11242"></svg>
]]></script>

Shelley's markup on this bug doesn't.

* Inside svg.js, we were using innerHTML to insert the Flash into the page, 
which
doesn not work under XHTML Strict. Modified the FlashInserter to create an EMBED
object in this case and insert it into the page rather than innerHTML 
(strangely,
EMBED is not XHTML compliant but works, while OBJECT is but does not so we have 
to
insert an EMBED into the page after load).

* For IE, the CDATA block stays inside the SCRIPT when we process it. Added 
regular
expressions to strip it out.

Fixed locally on my disk.

Original comment by bradneub...@gmail.com on 19 Sep 2009 at 10:10

[GoogleCodeExporter]

Original comment by bradneub...@gmail.com on 19 Sep 2009 at 10:10

• Changed title: For Shelley Powers: Odd error when using within XHTML document: works with Firefox, does not work with any other browser

[GoogleCodeExporter]

This issue was closed by revision r888.

Original comment by bradneub...@gmail.com on 19 Sep 2009 at 10:14

• Changed state: Fixed

[GoogleCodeExporter]

One last thing: On IE the fixed position SVG displays incorrectly on top of
everything. To fix this you have to change the z-index from 0 to -1:

<svg id="svg2607" style="bottom: 0pt; height: 24%; width: 98%; z-index: -1; 
position:
fixed; left: 1%;" preserveAspectRatio="none" viewBox="0 0 774.013 109.047"
xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">

Notice the z-index -1 (it used to be 0).

I have this running up on my web server.

XHTML version (for non-IE browsers):

http://codinginparadise.org/temp/The%20Frugal%20Algorithm.xhtml

HTML version (for IE -- I don't have fancy server-side user-agent detection for 
XHTML
on my web server):

http://codinginparadise.org/temp/The%20Frugal%20Algorithm.html

I've put up a ZIP file with this patch (plus Issue 307 and Issue 308 which were
already in the head of Subversion) for Shelley here:

http://codinginparadise.org/temp/for-shelley-powers-09-19-2009.zip

Original comment by bradneub...@gmail.com on 19 Sep 2009 at 10:30

[GoogleCodeExporter]

Works great now! I've tested now with HTML and XHTML, and on Mac and Windows, 
and SVGWeb handles 
backgrounds beautifully. Good job!

Original comment by shelley....@gmail.com on 19 Sep 2009 at 1:12