Bug 22986 – Loading external SVG using <image> doesn't have transparent background

• Status: RESOLVED
• Resolution: DUPLICATE
• Component: SVG

[Dustin]

If you load an external SVG into you new SVG file like so,
<image id="cloud_image" xlink:href="/svg/weather/cloudy.svg" width="200" height="200" x="0" y="0"/>

Then the background of the external SVG will be white, not transparent like it should be. However I've noticed if I remove the width, height, and viewbox attributes from the external SVG file, the background will become transparent but of course sizing wil not be correct. Thus it makes layering multiple SVG images ontop of one another every difficult because they would all have to be contained within one file.

[Konstantin Kokarev]

Created attachment 45160 [details]
html

[Konstantin Kokarev]

Created attachment 45161 [details]
first included svg

[Konstantin Kokarev]

Created attachment 45162 [details]
second included svg

[Konstantin Kokarev]

+1

opera, firefox, arora, msie + renesis plugin: show red background and 2 words "test".

midori, chromium, komqueror ( linux ): white background and 1 word "test".

[Jeff Schiller]

Konstantin, I'm confused by your attachments.  None of your attachments use a <image> element as per Dustin, and the HTML file uses an <object> tags to include the two SVG files.  

So these would seem to be invalid files for this bug (though they do address the problem described in Bug 10687 and Bug 27078).

[Konstantin Kokarev]

Jeff Schiller. Sorry, I really made a mistake.

[Nikolas Zimmermann]

(In reply to comment #6)
> Jeff Schiller. Sorry, I really made a mistake.

Another note regarding testcase from Konstantin:
The expected result is indeed a red background, and the word "TEST" twice, but only if the <object> is correctly closed:

<object width="100" height="100" type="image/svg+xml" data="1.svg"></object>

In the testcase you'll see:
<object width="100" height="100" type="image/svg+xml" data="1.svg"/>

When saving Konstantins testcase as .html file Firefox and WebKit will only show the word "TEST" once.
This is because the second div is not present in the DOM tree at all, because self-closing tags aren't valid in pure HTML.

If you properly close both <object></object>s then the testcase will show "TEXT" two times, both in Firefox and WebKit.

We still need a testcase for the original bug reported by Dustin.

[Nikolas Zimmermann]

This is resolved in trunk, see http://trac.webkit.org/changeset/87840.

*** This bug has been marked as a duplicate of bug 18228 ***