image - 画像の幅が変更されても、画像を SVG の中央に揃えるにはどうすればよいですか?

Question

css と js を使用して画像を中央に揃えようとしましたが、うまくいきませんでした。画像の幅を増減すると、画像が中央に配置されません。幅に関係なく、svg 画像を中央に揃えることができるソリューションを教えてください。

<svg style="border:5px solid black" version="1.1" id="Layer_1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 500">
        <image visibility="visible" id="header_image" x="45%" y="6%" width="20%" href="https://resources.mynewsdesk.com/image/upload/t_open_graph_image/eyblf65bkcezbnfxfo3n.jpg"></image>
</svg>