SVG In HTML Introduction


I think it is important to mention that your example ONLY works as XHTML, not HTML. If I copy your example source and save it as SVGDemo.html it does not render properly in Firefox. Perhaps you can move this page to "SVG In XHTML Introduction" ? Jeff Schiller 06:41, 9 September 2005 (PDT)

This is as you would expect - after all, legacy (non-X)HTML has no notion of wellformedness or namespaces, so mixing multiple XML namespaces is clearly not going to parse correctly or give you an XML DOM. Chris Lilley 23:16, 13 September 2005 (UTC)

Chris, you're right, this is as _I_ would expect, but not being clear about XHTML vs. old-school HTML has the potential to confuse developers, so I just wanted to make it clear. Jeff Schiller 07:01, 14 September 2005 (PDT)

the example page renders the svg part NOT when saved as .html EITHER when added an "<?xml version..." header. Matthias Dittgen 11:15, 12 October 2005 (CET)

SVG Backgrounds

I just spent a good while trying to use the technique mentioned in this article to use inline SVG elements as backgrounds to general block elements in my HTML without success. I know that both Firefox and Opera do not support using SVG elements as background-images, so until they do, I was hoping to strike a magic combination of inline SVG and CSS positional rules to get the SVG to properly size to the corresponding html:div, where the content of the div may be larger (taller) than the browser window.

No luck.

I'm not sure if this is because of a limitation of CSS, SVG or because both Opera and Firefox are buggy - but I could not get the SVG element to be sized larger than the height of the browser window (I could, however, constrain the SVG image to be smaller than the height of the browser). You can see the problem in the form-based example here if you change the height of the browser window such that the form cannot fully fit in the window. Basically, the SVG image is constrained to the height of the browser and no more. You can imagine why this is a problem if you try to put the SVG background onto arbitrarily sized divs that are dependent upon the browser window dimensions. Frustrating! Jeff Schiller 10:26, 3 May 2006 (PDT)

Second example

It seems the second example is not working as described: I created an xhtml-file and opened it but the only visible effect was one blue circle following the mouse pointer... No mot-like behaviour at all. And it would be nice to have a link users can directly click on to view the example

Strange. Anyway, the example is now at SVG:Namespaces_Crash_Course:Example and we added a link to view the sample in action. --Nickolay 07:07, 15 June 2006 (PDT)

The first two examples (the circle and the swarm of motes) appear to work fine under Firefox (under Ubuntu Linux 7.04 "Edgy"). However the last example:

Working example that works in both Mozilla and in Internet Explorer with Adobe's SVG Viewer installed.

merely shows a heading, with no image. --Kevin Cole 18:25, 10 May 2007 (PDT)

I've added a warning about proxy servers to the page. Perhaps that's the cause of the problem you're seeing? Thanks to asqueella for bringing it to my attention. --jwatt


How can I modify the demo? I've done some fix (see: here) and I need to change that demo. -- tomchen1989

Just email the demo to me at and I'll upload it for you. (Sheppy 13 December 2010)

Document Tags and Contributors

Last updated by: Sheppy,