Image inside an SVG

Question

I’m using a svg, and inside it I put an image I get from a variable by Angularjs. So far so good, the image appears normally, but I want to leave it at width 100%. I’ve tried everything and it doesn’t work. Does anyone have any idea?

<svg ng-if="images[0] == 3" viewBox="0 0 600 600" id="{{ pillar }}">
    <defs>
      <pattern id="imgPillar01" x="0" y="0" width="1" height="1">
        <image width="600" height="300" xlink:href="" ng-href="{{ images[1] }}"/>
      </pattern>
      <pattern id="imgPillar02" x="0" y="0" width="1" height="1">
        <image width="300" height="300" xlink:href="" ng-href="{{ images[2] }}"/>
      </pattern>
      <pattern id="imgPillar03" x="0" y="0" width="1" height="1">
        <image width="300" height="300" xlink:href="" ng-href="{{ images[3] }}"/>
      </pattern>
    </defs>
    <rect width="600" height="300" fill="url(#imgPillar01)" />
    <rect x="300" y="300" width="300" height="300" fill="url(#imgPillar02)" />
    <rect x="-0.22" y="300" width="300" height="300" fill="url(#imgPillar03)" />
  </svg>

Answer 1

Images with different aspect of measurement do not fit if the size of the element used, note that both images below only worked because the aspect is the same as the measurements you passed in the element rect.

If the measure were a little different would appear white spaces above and below, or left and right (depending on the ratio difference).

You can remove the aspect of the tag <image>, to achieve this use the attribute preserveAspectRatio="none", so for example:

<svg
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    viewBox="0 0 600 600"
    width="600"
    height="600"
    id="{{ pillar }}"
>
    <defs>
        <pattern id="imgPillar01" x="0" y="0" width="1" height="1">
            <image width="100%" xlink:href="https://i.stack.imgur.com/KKm5N.jpg" preserveAspectRatio="none" />
        </pattern>
        <pattern id="imgPillar02" x="0" y="0" width="1" height="1">
            <image width="300" height="300" xlink:href="https://i.stack.imgur.com/KKm5N.jpg" preserveAspectRatio="none" />
        </pattern>
        <pattern id="imgPillar03" x="0" y="0" width="1" height="1">
            <image width="300" height="300" xlink:href="https://i.stack.imgur.com/KKm5N.jpg" preserveAspectRatio="none" />
        </pattern>
    </defs>
    <rect width="600" height="300" fill="url(#imgPillar01)"></rect>
    <rect x="300" y="300" width="300" height="300" fill="url(#imgPillar02)"></rect>
    <rect x="-0.22" y="300" width="300" height="300" fill="url(#imgPillar03)"></rect>
</svg>

The problem with this is that it will stretch the image if the width and height are fixed at the same time (in the case of your images below the larger image), so if you want to maintain the ratio of width to height, use preserveAspectRatio="xMidYMid slice", thus:

<svg
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    viewBox="0 0 600 600"
    width="600"
    height="600"
    id="{{ pillar }}"
>
    <defs>
        <pattern id="imgPillar01" x="0" y="0" width="1" height="1">
            <image width="100%" xlink:href="https://i.stack.imgur.com/KKm5N.jpg" preserveAspectRatio="xMidYMid slice" />
        </pattern>
        <pattern id="imgPillar02" x="0" y="0" width="1" height="1">
            <image width="300" height="300" xlink:href="https://i.stack.imgur.com/KKm5N.jpg" preserveAspectRatio="xMidYMid slice" />
        </pattern>
        <pattern id="imgPillar03" x="0" y="0" width="1" height="1">
            <image width="300" height="300" xlink:href="https://i.stack.imgur.com/KKm5N.jpg" preserveAspectRatio="xMidYMid slice" />
        </pattern>
    </defs>
    <rect width="600" height="300" fill="url(#imgPillar01)"></rect>
    <rect x="300" y="300" width="300" height="300" fill="url(#imgPillar02)"></rect>
    <rect x="-0.22" y="300" width="300" height="300" fill="url(#imgPillar03)"></rect>
</svg>