'vue-svg-loader removes tags when loading the svg file

I left the question on the project's GitHub first but no reaction so I am hoping the SO community can assist. I think there are SVGO options to set in the web pack config but I've had no luck.

https://github.com/visualfanatic/vue-svg-loader/issues/154

I am using an SVG in order to create an interactive floor plan. The SVG is made of one image object (the floor plan) and several shapes on top of it (that get highlighted on roll over) In order for these shapes to be clickable in the component, they have an ID

When loading this SVG file with the component, everything but the main image is stripped away.

I have tried a number of configurations in vue.config.js such as

module.exports = {
    chainWebpack: config => {
        const svgRule = config.module.rule('svg')  
        svgRule.uses.clear()
        svgRule
            .use('babel-loader')
            .loader('babel-loader')
            .end()
            .use('vue-svg-loader')
            .loader('vue-svg-loader')
            .options({
                svgo: {
                    plugins: [                                    
                        { collapseGroups: false },
                        { removeEmptyContainers: false },
                        { convertPathData: false },
                        { mergePaths: false },
                        { cleanupIDs: false },
                        { collapseGroups: false },
                        { removeNonInheritableGroupAttrs: false }
                    ]
                }
            }
        );
    }
}

The SVG is built like this

<svg
            xmlns:dc="http://purl.org/dc/elements/1.1/"
            xmlns:cc="http://creativecommons.org/ns#"
......
more properties
........
            <g
                inkscape:groupmode="layer"
                inkscape:label="Image"
                id="g54">
                <image
                width="2133.3333"
                height="1284"
                preserveAspectRatio="none"
                xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABkAAAAPDCAYAAADrEMd2AAAACXBIWXMAAAsSAAALEgHS3X78AAAg
            AElEQVR4nOy9CZgjd33m/5ZUOvu+Zqbn9Bw+ZmzP+ATbYMB2CGbtYGxIwp1ldyEXu4EA+18gG9gc
            ZPNwJ8sGSJ7liXF
.....
.....
Super long image
....
....

kSuQmCC
            "
                id="floorplanimg"
                style="fill:#ffe680" />
                <path
                id="kitchen"
                style="opacity:0;fill:#ffcc00;fill-rule:evenodd"
                inkscape:label="OpenSpace"
                d="m 555.11237,74.960426 1053.49783,2.025958 2.4071,273.758356 -642.35555,-2.153 -2.28007,161.94959 H 555.11237 Z"
                sodipodi:nodetypes="ccccccc"
                onmouseover="this.style.opacity=0.4"
                onmouseout="this.style.opacity=0" />
                <path
                 id="bedroom"
.....
....
and many more paths
....
....
       </g>
</svg>

When imported, I get only the image block and all the path ones are lost.

Can anyone tell me what I am missing ?

Thank you

vue.jssvg


Solution 1:[1]

Unfortunately, it looks like there is no working solution with this package, see https://github.com/visualfanatic/vue-svg-loader/issues/154

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 samo

Related Questions