Copied from: http://jon.tiddlyspace.com/#%5B%5BSVG%20in%20TiddlyWiki%5D%5D (so still in wikitext form :))
Apologies if this is too technical and/or if there is any errors in my understanding. In a nutshell, svg implementations differ slightly across browsers and although the output xml (as viewed in something like firebug or Chrome developer console) may appear the same in all the cases the way the svg is inserted in the document differs such that the svg will be rendered, not rendered or partially rendered. From the following 3) and 4) are the most reliable ways to get svg into a TiddlyWiki. 1) Inline svg in an HTML page A standalone page containing svg and html will only work if the page has a [[document type definition|http://en.wikipedia.org/wiki/ Document_Type_Definition]] of xhtml and the page is served with application/xhtml+xml Content-type HTTP header. In this case when the page is parsed it is creates an xml document object and invokes the [[xml parser|http://dev.w3.org/html5/spec/Overview.html#xml-parser]] which recognises nodes that belong to any documents in the current namespace(s). If you just serve content type text/html or set doctype to something other than xhtml then it will not always work as it will invoke the html parser which doesn't feature svg nodes (not part of the html specification). TiddlyWiki is xhtml so any inline svg should just work in browsers however... 2)... Tiddlers use the wikifier Any content wrapped in html tags is passed through the TiddlyWiki "wikifier". The wikifier is quite dumb and simply sets the [[innerhtml| http://dev.w3.org/html5/spec/Overview.html#innerhtml]] of an HTMLElement "span" to be the html inside found within html tags of the wikitext. According to the w3c spec for an HTMLElement like span, this will run the [[HTML fragment parsing algorithm|http://dev.w3.org/html5/ spec/Overview.html#html-fragment-parsing-algorithm]]. This cannot parse non-HTML content. SVGElement's do not have an innerhtml property so technically this shouldn't work (although for some reason it actually works for me in Chrome 10.0.648.134 - a slight difference in the way chrome parses html). 3) Using the {{{<<image}}} macro The image macro allows you to render a tiddler foo.svg by using {{{ <<image foo.svg>> }}} In this case the source of the tiddler "foo.svg" is taken and added via javascripts importNode function. This function takes into account that the svg may have a different DTD (Document Type Definition) unlike the innerHTML property so will not assume the content is html. 4) render via img tag {{{ [img[x.svg]] }}} will result in an image tag rather than an svg element. No elements are added to the dom other than the svg as an image so it skips all the above issues. The downside however is that you can't style the nodes (no nodes exist - just the img tag) and browser support is not as widespread. Hope that helps. Others please chip in if you can. Jon On Mar 20, 11:53 am, JohnH <[email protected]> wrote: > I have been doing some experiments with including SVG markup in my > stand-alone TiddlyWiKi and am getting some very odd and difficult to > explain behaviour. I am wondering if anyone has any experience of this > and could help me. > > If we start with a simple stand-alone HTML file: > > <!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"> > <body> > <span class="image"> > <svg xmlns="http://www.w3.org/2000/svg"; version="1.1" > width="1000px" height="110px"> > <svg viewBox="0 0 194 102" preserveAspectRatio="none"> > <g> > <rect id="svg_1" height="97" width="189" y="2.5" x="2.5" > stroke-width="5" stroke="#000000" fill="#FF0000"/> > <ellipse ry="19" rx="93.5" id="svg_2" cy="52.5" cx="97" > stroke-width="5" stroke="#000000" fill="#ffff00"/> > </g> > </svg> > </svg> > </span> > </body> > </html> > > Notice this has the same DOCTYPE and html declarations as the standard > TiddlyWiki file. This renders correctly in any modern browser (even IE > 9!). > > Now pull out the <span> and put it in a tiddler between <html> ... </ > html> markup. The SVG tags are ignored completely and nothing gets > rendered. Why? > > Next I tried perloining Osmosoft's ImageMacroPlugin from TiddlySpace. > Pull out the block from the outer SVG tag and put that in a Tiddler. > Reference this from an image tag. Now the rectangle and elipse are > rendered, but they are not scaled instead appearing at the unscaled > dimensions in the <rect> and <ellipse> tags. Reduce the width and > height of the outer SVG tag and the image is clipped rather than being > squashed as specified by the viewBox attribute. I have done a lot of > experiments with different arrangements of the tags and attributes, > but in all cases direct or indirect coordinate transforms are simply > ignored. > > The kicker here is that, examining the DOM fragments resulting from > all three methods above using FireBug and they are identical! The > rendering behaviour is also consistent between Firefox 3.6, IE 9 and > Chrome 10, so it is not a browser oddity. Why does the same SVG markup > in the same browser with the same document type declarations get > either ignored completely, ignored partially or rendered completely > depending on exactly how it was put into the DOM? > > Anyone have any ideas? -- You received this message because you are subscribed to the Google Groups "TiddlyWikiDev" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/tiddlywikidev?hl=en.
