2

How could I vertically align an image inside an svg?

I saw this and it did not help. As you can tell from the jsfiddle attempt the dominant-baseline: central; does not work or I am doing something wrong.

Will be grateful for any help provided.

Code:

<svg style="background-color:#f1fe96; border: 1px black solid;">
  <image href="https://media.istockphoto.com/photos/plant-growing-picture-id510222832" width ="50" height = "50" style="dominant-baseline: central;"/>
  
</svg>
Adam
  • 1,385
  • 1
  • 10
  • 23
manymanymore
  • 2,251
  • 3
  • 26
  • 48

1 Answers1

3

Set the height of the image to 100% (or whatever height you want to center the image in) and additionally set the attribute preserveAspectRatio="xMidYMid meet".

<svg style="background-color:#f1fe96; border: 1px black solid;">
  
  <image href="https://media.istockphoto.com/photos/plant-growing-picture-id510222832" width="50" height="100%" preserveAspectRatio="xMidYMid meet"/>
  
</svg>
ccprog
  • 20,308
  • 4
  • 27
  • 44
  • https://www.w3.org/TR/SVG11/struct.html#ImageElement and https://www.w3.org/TR/SVG11/coords.html#PreserveAspectRatioAttribute – ccprog May 28 '18 at 17:07