[Question] Some objects in the SVG are being removed

[samo9789]

Hi,

I suppose this is a question more than an issue, 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

[antoci-alin]

Same situation here. A lot of components are just black.

[rightaway]

Something is broken here. @samo9789 @antoci-alin did you find a workaround? Does it work in an older version of plugin or did you switch to another vue svg plugin?

Maintainers of this project aren't around much anymore. :(

[antoci-alin]

Something is broken here. @samo9789 @antoci-alin did you find a workaround? Does it work in an older version of plugin or did you switch to another vue svg plugin?

Maintainers of this project aren't around much anymore. :(

Unfortunately nope... I just changed the illustration.

[samo9789]

Something is broken here. @samo9789 @antoci-alin did you find a workaround? Does it work in an older version of plugin or did you switch to another vue svg plugin?

Maintainers of this project aren't around much anymore. :(

I ended up creating a .vue component and pasting the SVG in it as I couldn't get this tool to do what I needed. I opened this ticket hoping the proper solution would eventually be possible with this package.

I didn't try older version, would you know which version to try ? Are there forks that are more active ?