Blog  |   Sitemap  |   Search  |   Language:  eng рус
JavaScript UI FrameworkBug TrackerBug details

Bug Data

ID: #0165
Status: Accepted
Severity: Enhancement
Reporter: Leif Halvard Silli
Submitted: 01-02-10 22:00

Product Data

Product: Ample SDK
Component: DOM Core
Version: 0.8.x
OS: > Any
Browser: > Any


Embedding SVG (in)directly in HTML4

The HTML4 syntax permits the use of <![CDATA[ ]> sections inside elements.(But not directly as child of <body>.)

The <script> element is a specialized kind of CDATA element - everything inside <script> is special kind of CDATA - it is just raw text, except that end tags are still considered end tags and thus must be escaped to be valid HTML4.

However, escaping each and every end tag is hard work. One easily make an error. Therefore it is an advantage to not embed the SVG code inside <SCRIPT>, but to instead use method number 2 that you described here:

However, dropping <SVG> code directly in HTML4 is invalid. _BUT_ placing the SVG code inside another element, and also making sure to wrap the SVG code inside a <![CDATA[ ]]> tag, that is valid.

Here is a prototype:


Note that I used this syntax construct - for UA compatibility.

<svg />

(Here I learned from <SCRIPT>.) This worked in all browsers except in IE. IE only display the text content of the SVG section.

Please note that this method only work when served as text/HTML. When served as application/xhtml+xml, then the <![CDATA[ ]]> section cannot be used, as you can see in this example


(At least it cannot be used unless AmpleSDK does some preparation scripts - like removing the CDATA tags.

Messages written for this bug

Reporter: Leif Halvard Silli
Submitted: 01-02-10 22:09
Message: I noticed that the AmpleSDK scripts adds a <div> around the <svg></svg> section.

It would be cool if, when using this method, it did not (need) to do that. Because, after all, the <![CDATA[ ]]> tag must itself be kept inside another tag, like so:


Or like this:


Or like this - where I use the AmpleSDK method as fallback for OBJECT:

<object data="svg"><![CDATA[

Perhaps the ideal thing would be if adding a certain class name to the mother tag of the <![CDATA[ ]]> tag, would tell AmpleSDK to not add the DIV.

(Or may be I have too specific/detailed wishes .... )

Reporter: Leif Halvard Silli
Submitted: 01-02-10 22:28
Message: Correction: The last example should of course have the correct closing tag: </object>.

Reporter: Leif Halvard Silli
Submitted: 02-02-10 03:25
Message: I updated the text/HTML example page to pure HTML4.

Add a message