How do I embed a transparent SVG object inside an HTML document?

views:

604

answers:

How do I embed a transparent SVG object inside an HTML document?

I'm using an SVG object embedded in HTML using the tag. The SVG gets painted with a white background. How can I get rid of it and make the element transparent so that the HTML background shows through.

There is supposed to be a way to do this in IE with Adobe's SVG viewer using the wmode attribute. How do I do this in WebKit or Mozilla?

+1 A:

Have a look at A List Apart's article on SVG backgrounds.

Skilldrick 2010-02-27 12:30:32

This is a great resource. Apparently the problem solves itself if you just use the <svg> tag directly in the HTML code. Make sure to use the .xhtml extension. http://emacsformacosx.com/ is a great example.

Avner 2010-02-27 12:45:57

If you're not subscribed to A List Apart, you should be. It contains some of the most well researched and well presented information on web development anywhere.

Skilldrick 2010-02-27 12:49:03

Only webkit-based browsers fail to use a transparent background for <object> elements that reference svg in my experience. See for example the upper-right corner svg on my experimental site, http://dahlström.net/. Opera and Firefox work just fine without anything special needed, just view source and see.

Erik Dahlström 2010-02-27 20:38:00

ansaurus

tags:

views:

answers:

How do I embed a transparent SVG object inside an HTML document?

related questions