Strange issue with svg sprite when I have defs and style

[yellow1912]

A normal svg works fine for me:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>tag</title><g id="Capa_2" data-name="Capa 2"><g id="Capa_1-2" data-name="Capa 1"><path d="M48,17.89,45.58,2.42,30.1,0a3.22,3.22,0,0,0-2.61.87L.9,27.49a3.09,3.09,0,0,0,0,4.35L16.15,47.1a3.09,3.09,0,0,0,4.36,0l26.6-26.6A3.2,3.2,0,0,0,48,17.89Zm-8.38-5.4a2.73,2.73,0,0,1-4.09,0,2.73,2.73,0,0,1,0-4.09,2.73,2.73,0,0,1,4.09,0A2.73,2.73,0,0,1,39.59,12.5Z"/></g></g></svg>

However, when I tried to put my icon inside a box, this is the code that I get from AI:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="309 771 30 30"><defs><style>.a{fill:none;}</style></defs><rect class="a" width="30" height="30" transform="translate(309 771)"/><path d="M-124-648.08l-6.08,6.08L-132-643.92l6.08-6.08-6.08-6.08,1.921-1.92,6.08,6.08,6.08-6.08,1.92,1.92-6.08,6.08,6.08,6.08L-117.92-642Z" transform="translate(448 1436)"/></svg>

When I use svg with the symbol mode, the sprite doesn't show anything

I must have done something wrong here but I'm not sure what's happening.

Below is my configuration

mode: {
    symbol: true
}, 
svg: {
    xmlDeclaration: false, 
    doctypeDeclaration: false, 
    namespaceIDs: false, 
    namespaceClassnames: false
 }

[yellow1912]

It seems like the issue is due to the rect that covers the path inside. For some reason when exported to sprite the fill none is not working anymore. I even tried to use inline css but doesn't seem to help

[yellow1912]

Seem like when we use inline svg, the style is not applied. The easy way is to convert those styles into attributes (which is supported properly by later version of svgo)

This pull request fixes it:

0128e24

[jkphl]

@yellow1912 Thanks for reporting. A new SVGO version is used as of fc19595 — can you confirm that this works for you now?