Position of a bitmap in a SVG IMAGE tag

Question

Having consulted Jenkov's excellent tutorials and MDN , I still don't understand how to align a bitmap inside an SVG. I'd like to position the bitmap in the top left corner but the default seems to ignore my X and Y values on the IMAGE tag.

Here's the code:

    <svg width="600" height="400" viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
      <rect x="0" y="0" width="100%" height="100%" style="fill: pink"/>
      <image x="0" y="0" width="100%" height="100%" xlink:href="http://www.google.co.uk/images/srpr/logo3w.png"/>
    </svg>

Why is the image centered (in this case vertically) instead of being at the X,Y value I provide?

https://jsfiddle.net/MCAU/0x2moakt/

Answer 1

Because the aspect ratio of the image will be preserved.

Your image does not have the same aspect ratio as the space you give it. You can control this behaviour with preserveAspectRatio, which defaults to "xMidYMid meet". What you want is achieved by setting preserveAspectRatio="xMinYMin meet" in your image tag.

<image x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMinYMin meet" xlink:href="http://www.google.co.uk/images/srpr/logo3w.png"/>

The meanings for the possible values are:

if there is more space in the x direction

• xMin align to the left

• xMid align in the center

• xMax align to the right

and equivalent for your y direction. If there is more height available than your image's height

• YMin align to the top

• YMid align in the center

• YMax align to the button

It's always a combination of these x and y values followed by meet or slice, where meet means shrink the image to fit and slice means cut the image to fit.

Or you can specify a value of preserveAspectRatio="none" , then your image will stretch.

 <h2>meet</h2> <h3>xMin</h3> <svg width="200" height="100" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect width="100%" height="100%" fill="gray"/> <image preserveAspectRatio="xMinYMid meet" width="100%" height="100%" xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> </svg> <h3>xMid</h3> <svg width="200" height="100" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect width="100%" height="100%" fill="gray"/> <image preserveAspectRatio="xMidYMid meet" width="100%" height="100%" xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> </svg> <h3>xMax</h3> <svg width="200" height="100" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect width="100%" height="100%" fill="gray"/> <image preserveAspectRatio="xMaxYMid meet" width="100%" height="100%" xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> </svg> <h3>YMin</h3> <svg width="100" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect width="100%" height="100%" fill="gray"/> <image preserveAspectRatio="xMidYMin meet" width="100%" height="100%" xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> </svg> <h3>YMid</h3> <svg width="100" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect width="100%" height="100%" fill="gray"/> <image preserveAspectRatio="xMidYMid meet" width="100%" height="100%" xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> </svg> <h3>YMax</h3> <svg width="100" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect width="100%" height="100%" fill="gray"/> <image preserveAspectRatio="xMidYMax meet" width="100%" height="100%" xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> </svg> <h2>slice</h2> <h3>xMin</h3> <svg width="100" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect width="100%" height="100%" fill="gray"/> <image preserveAspectRatio="xMinYMid slice" width="100%" height="100%" xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> </svg> <h3>xMid</h3> <svg width="100" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect width="100%" height="100%" fill="gray"/> <image preserveAspectRatio="xMidYMid slice" width="100%" height="100%" xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> </svg> <h3>xMax</h3> <svg width="100" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect width="100%" height="100%" fill="gray"/> <image preserveAspectRatio="xMaxYMid slice" width="100%" height="100%" xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> </svg> <h3>YMin</h3> <svg width="200" height="100" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect width="100%" height="100%" fill="gray"/> <image preserveAspectRatio="xMidYMin slice" width="100%" height="100%" xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> </svg> <h3>YMid</h3> <svg width="200" height="100" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect width="100%" height="100%" fill="gray"/> <image preserveAspectRatio="xMidYMid slice" width="100%" height="100%" xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> </svg> <h3>YMax</h3> <svg width="200" height="100" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect width="100%" height="100%" fill="gray"/> <image preserveAspectRatio="xMidYMax slice" width="100%" height="100%" xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> </svg> <h2>none</h2> <svg width="200" height="100" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect width="100%" height="100%" fill="gray"/> <image preserveAspectRatio="none" width="100%" height="100%" xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> </svg> <svg width="100" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect width="100%" height="100%" fill="gray"/> <image preserveAspectRatio="none" width="100%" height="100%" xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> </svg>