Width and height have no effect on <use> when referencing inline images-CodePudding

I'm trying to inline some images into an SVG that uses xlink:href references pointed to fully qualified local paths. For reasons why see this GitHub issue. The example python does a reasonable job, but it will inline the same image many times in a single SVG which is not optimal.

So I tried a similar approach that converts something like this:

<svg xmlns="http://www.w3.org/2000/svg">
<image x="0" y="-144" width="101px" height="101px" xlink:href="/path/to/file.png" />
<image x="0" y="-144" width="101px" height="101px" xlink:href="/path/to/file.png" />
</svg>

To this

<svg xmlns="http://www.w3.org/2000/svg">
<defs>
    <image id="file.png_1" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA..." />
</defs>
<use x="0" y=" 144" width="101px" height="101px" href="#file.png_1" />
<use x="0" y="-144" width="101px" height="101px" href="#file.png_1" />
</svg>

The problem

The way this renders (Safari and Chrome), it seems that width and height have no effect on the <use>.

I can get the desired result to render identically to the original if I move the width and height onto the <defs><image/></defs>. But doing this makes the assumption that no SVG will EVER use the same image twice with different sizes.

Despite reading the SVG 1.1 Standard, I'm still no further forward on understanding how to size a <use> element without explicitly sizing it on the referenced <image> element.

CodePudding user response：

According to the SVG specification width and height are ignored on a use element unless that use element points to a symbol or an svg element.

The width and height properties on the ‘use’ element override the values for the corresponding properties on a referenced ‘svg’ or ‘symbol’ element when determining the used value for that property on the instance root element.

So wrapping the image in a symbol element and then pointing the use to the symbol should work.

CodePudding user response：

In a comment the OP is asking for an example:

@enxaneta could you show a very short worked example as an answer.

In the next example I'm putting an image in a symbol. The image has a width and a height. Also the symbol has a viewBox. In this case the viewBox of the symbol has the same sixe as the image.

I'm using the symbol with use.The use element has a x and y attributes for the upper left corner. Also the use has a width and a height. Please observe that I'm preserving the same aspect ratio as the symbol's viewBox.

<svg viewBox="0 0 65 50">
<symbol id="i" viewBox="0 0 22 9.8">
  <image  width="22" height="9.8" href="https://assets.codepen.io/222579/bone300.svg"/>
</symbol>
<use href="#i" x="10" y="7" width="44" height="19.6" />
</svg>