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 |
|
|
Description
| 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:
http://www.insideria.com/2009/07/yes-you-can-now-use-quite-a-bi.html
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:
http://www.målform.no/ample/ample-directly-tHTML
Note that I used this syntax construct - for UA compatibility.
<!----><![CDATA[<!---->
<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
http://www.målform.no/ample/ample-directly-xHTML
(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:
<div><![CDATA[
<svg></svg>
]]></div>
Or like this:
<span><![CDATA[
<svg></svg>
]]></span>
Or like this - where I use the AmpleSDK method as fallback for OBJECT:
<object data="svg"><![CDATA[
<svg></svg>
]]></div>
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
|
BugTracker
|
