L.imageOverlay does not fit with tiles created with maptiler

Question

I have a vector graThe files have the same size ratio and the same bounding boxphic. I would like to partially display this graphic as a basic map. I exported most of the layers of this vector graphic as png and created tiles using Maptiler.

I saved the other layers as SVG-files and show them as an image overlay.

The PNG and the SVG-files have the same size ratio and the same bounding box. The PNG is 9726px 7950px and the SVG 4863,5px x 3975.7 px.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="4863.5px" height="3975.7px" viewBox="0 0 4863.5 3975.7" style="enable-background:new 0 0 4863.5 3975.7;"
 xml:space="preserve">

Unfortunately, the svg files do not fit exactly over the tiles I created. There are small shifts. You can see it in the picture.

I think I'm doing something wrong with the projection. When creating the tiles, I tested with different coordinate systems. Among other things with EPSG:4326 (Bounding Box 7.088 51.401 7.365 51.541) and with EPSG:3857 (Bounding Box 789032.55 6692534.87 819868.05 6717554.10).

This is my code:

<script>
var imageBounds = [[51.401, 7.088], [51.541, 7.365]];

var tiles = L.tileLayer(
    './tiles/{z}/{x}/{y}.png',
    {attribution: '<a href="...</a>',
        opacity: 1
    }
);

var map = L.map('mapid', {
    layers: [tiles],
    minZoom: 13,
    maxZoom: 15,
    maxBounds: imageBounds
}).setView([51.45, 7.2], 14);

var baseTree = [
    {
        label: 'Eigene Tiles',
        layer: tiles
    },
];


var overlaysTree = {
    label: 'Linien',
    selectAllCheckbox: 'Un/select all',
    children: [
        {
            label: 'NE',
            selectAllCheckbox: true,
            children: [
                {
                    label: 'Neue SVG-Dateien',
                    selectAllCheckbox: true,
                    children: [
                        {label: '159', layer: L.imageOverlay('159.svg', imageBounds)},
                        {label: '344', layer: L.imageOverlay('344.svg', imageBounds)},
                        {label: '345', layer: L.imageOverlay('345.svg', imageBounds)},
                        {label: '353', layer: L.imageOverlay('353.svg', imageBounds)},
                        {label: '355', layer: L.imageOverlay('355.svg', imageBounds)},
                        {label: '365', layer: L.imageOverlay('365.svg', imageBounds)},
                    ]
        }
    ]
}]}

var lay = L.control.layers.tree(baseTree, overlaysTree,
    {
        namedToggle: true,
        selectorBack: false,
        closedSymbol: '&#8862; &#x1f5c0;',
        openedSymbol: '&#8863; &#x1f5c1;',
        collapseAll: 'Collapse all',
        expandAll: 'Expand all',
        collapsed: false,
    });

lay.addTo(map).collapseTree().expandSelected().collapseTree(true);