CODEWITHSUNDEEP
htmlxmld3.jssvg
Escher
Escher

Reputation: 5795

Embedded svg isn't scaled correctly

I'm trying to embed an svg inside an svg (the real application is to be able to embed an image in a d3 chart). Here's a simplified version:

<svg viewBox="0 0 200 200" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle cx="0" cy="0" r="80" style="fill:blue" />
  <image x="10" y="20" width="120" height="150" xlink:href="https://webkit.org/blog-files/circle.svg" />
</svg>

The embedded image scales correctly if it's a raster image (png/jpg), but not an svg. Here's a fiddle of it not working - the big red rectangle should actually be this circle.

https://jsfiddle.net/rg4kyuc7/1/

How do I get the svg to scale to the specified width and height?

Edit - working on Chrome but not Firefox?! Any ideas why?

Upvotes: 0

Views: 60

Answers (2)

Paul LeBeau
Paul LeBeau

Reputation: 101938

The behaviour of <image> changed a little between SVG 1.1 and the upcoming SVG 2.

It looks like Chrome is following the SVG 2 behaviour. Chrome seems to be further along in implementing SVG 2 than other browsers. The way it is displaying the embedded image would be wrong if it were still supporting only the SVG 1.1 standard.

Firefox (and IE, which is behaving the same) are both incorrect with respect to both SVG 1.1 and SVG 2. The SVG 1.1 standard says that when the SVG file referenced by <image> has no viewBox, it should just be displayed at the position defined by the x and y attributes, and the width and the height of the <image> element is ignored. In other words like this:

<svg viewBox="0 0 200 200" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle cx="0" cy="0" r="80" style="fill:blue" />
  <image x="10" y="20" width="335" height="296" xlink:href="https://webkit.org/blog-files/circle.svg" />
</svg>

In any case, there is a simple fix. Add an appropriate viewBox to circle.svg and it will render the same in all browsers, whether they support SVG 2 or not.

<svg xmlns="http://www.w3.org/2000/svg" width="335" height="296" viewBox="0 0 335 296">

Upvotes: 1

Fabio
Fabio

Reputation: 11

I've came across a similar issue where we ended up using the SVG's tag.

This way you will be able to embed an html img tag in it and style it as such. Something like this:

<svg viewBox="0 0 200 200" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle cx="0" cy="0" r="80" style="fill:blue" />
  <foreignObject x="10" y="20" width="120" height="150"
                   requiredExtensions="http://www.w3.org/1999/xhtml">
      <body xmlns="http://www.w3.org/1999/xhtml">
        <img src="https://webkit.org/blog-files/circle.svg" alt="Smiley face" height="150" width="120">
      </body>
  </foreignObject>
</svg>

Here is the MDN documentation for

https://developer.mozilla.org/en/docs/Web/SVG/Element/foreignObject

Upvotes: 0

Related Questions