SVG:Language:Protean gotchas

From MozillaWiki
Jump to: navigation, search

This page is a place to collect a list of incompatibilities and other differences between XML SVG and HTML5 SVG. These are things that could cause problems when trying to create a protean SVG document (also called a polyglot SVG document), or when trying to copy SVG markup between documents in one or the other format.

Copying SVG markup from HTML5 to an SVG document

This should not be expected to work since HTML5 SVG may have the following incompatibilities with XML SVG:

  • Missing or broken namespace declarations
  • Tags or attributes with the wrong case
  • Missing closing tags
  • Overlapping tags (Can this happen with SVG tags, though? Hsivonen 10:25, 11 March 2009 (UTC))
  • Missing quotes around attribute values
  • Missing space between attribute value close quote and the name of the next attribute
  • Definitions not being found for entity references, or entities without a closing semicolon
  • The content of 'title', 'desc' or 'foreignObject' elements defaults to being HTML
  • The content of 'foreignObject' being HTML that is not simultaneously well-formed XHTML
  • HTML's 'script' contains CDATA, SVG's contains RCDATA (see here)
  • ...

Copying SVG markup from SVG to an HTML5 document

This is more likely to "just work" for valid SVG documents, but there are still some gotchas. Also, there are questions over whether it will work for SVG documents containing other markup, such element and attribute metadata that popular SVG authoring tools such as Inkscape scatter throughout the SVG markup they produce.

  • Namespace prefixes on elements
  • Declaring XLink attributes to use a prefix other than 'xlink'
  • Entity definitions (other than Illustrator's namespace declarations or declarations that match the named characters of HTML5; the HTML5 parser will deal with those)
  • HTML's 'script' contains CDATA, SVG's contains RCDATA (see here)
  • ...


The result

The end result here will be that moving SVG between SVG and HTML5 documents will be a one way street. Authors will generally get bitten when trying to copy SVG from an HTML5 document to an SVG document, but they will have few problems when copying SVG to an HTML5 document. The result will be a pressure pushing authors to serve SVG as text/html.


Particularly in the case of moving HTML5 SVG to XML SVG, without the convenience of copy-and-paste, authors will require tools that parse the HTML5 to a DOM, then reserialize it as XML to allow well formed SVG to be extracted.