[SVG 2] SVG is missing declaration to center embedded content around arbitrary point

[SetTrend]

Currently, it's not possible to center arbitrary external entities around some arbitrary point in the SVG.

Living Example:

People may want to upload arbitrary images to a website. These images may have different aspect ratios. The SVG data is supposed to be scalable, so all position/size values are given in percent. The image is supposed to have a margin.

The result is supposed to look like this:

Current Situation

Creating an SVG file that will display arbitrary external content with unknown aspect ratio centered around some point in the SVG file is not possible.

Desired Situation

Add two new attributes to external entities, like <svg> or <image>:

• horizontal-align
• vertical-align

And have external entities' x and y attributes define the corresponding anchor point (depicted below in red):

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <rect width="100%" height="100%" fill="#e44" />
  <image href="./image.png"
          width="68%"
          vertical-alignment="center"
          horizontal-alignment="center"
          x="50%"
          y="50%"
          />
</svg>

[BigBadaboom]

New attributes are not necessary. What you want can be achieved with existing features.

Centred

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <defs>
    <image id="img" href="http://placekitten.com/300/250"
            width="68%"
            height="68%"
            x="-34%"
            y="-34%"
            />
  </defs>
  <rect width="100%" height="100%" fill="#e44" />
  <use xlink:href="#img" x="50%" y="50%"/>
</svg>

https://jsfiddle.net/5hjzo4mn/

---

Bottom right

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <defs>
    <image id="img" href="http://placekitten.com/300/250"
           preserveAspectRatio="xMaxYMax meet"
           width="68%"
           height="68%"
           x="-68%"
           y="-68%"
            />
  </defs>
  <rect width="100%" height="100%" fill="#e44" />
  <use xlink:href="#img" x="100%" y="100%"/>
</svg>

https://jsfiddle.net/5hjzo4mn/1/

[SetTrend]

Yes, you are right.

The documentation on MDN didn't tell that images keep their aspect ratio regardless of width and height being set:

https://stackoverflow.com/questions/75795632/how-can-i-center-an-image-within-svg