Rendering issues due to <svg> style not being trasferred
darsain opened this issue · comments
I've encountered several icons now build like this:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 6 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M3.566,4.266c-0.235,0.136 -0.509,0.214 -0.8,0.214c-0.602,0 -1.127,-0.333 -1.4,-0.826c-0.061,-0.11 -0.201,-0.149 -0.311,-0.088c-0.11,0.061 -0.15,0.2 -0.089,0.31c0.351,0.633 1.026,1.061 1.8,1.061c0.374,0 0.726,-0.1 1.028,-0.276c0.11,-0.063 0.147,-0.203 0.084,-0.311c-0.064,-0.11 -0.204,-0.147 -0.312,-0.084Z"/>
<path d="M1.366,2.106c0.273,-0.493 0.798,-0.826 1.4,-0.826c0.291,0 0.565,0.078 0.8,0.214c0.108,0.063 0.248,0.026 0.312,-0.084c0.063,-0.108 0.026,-0.248 -0.084,-0.311c-0.302,-0.176 -0.654,-0.276 -1.028,-0.276c-0.774,0 -1.449,0.428 -1.8,1.061c-0.061,0.11 -0.021,0.249 0.089,0.31c0.11,0.061 0.25,0.022 0.311,-0.088Z"/>
<path d="M2.766,2.08c0.442,0 0.8,0.358 0.8,0.8c0,0.442 -0.358,0.8 -0.8,0.8c-0.442,0 -0.8,-0.358 -0.8,-0.8c0,-0.442 0.358,-0.8 0.8,-0.8Zm0,0.457c0.189,0 0.343,0.153 0.343,0.343c0,0.19 -0.154,0.343 -0.343,0.343c-0.19,0 -0.343,-0.153 -0.343,-0.343c0,-0.19 0.153,-0.343 0.343,-0.343Z"/>
<path d="M0.709,3.109l0.685,0c0.126,0 0.229,-0.103 0.229,-0.229c0,-0.126 -0.103,-0.229 -0.229,-0.229l-0.685,0c-0.126,0 -0.229,0.103 -0.229,0.229c0,0.126 0.103,0.229 0.229,0.229Z"/>
<path d="M4.5,2.651l-0.296,-0.295c-0.089,-0.089 -0.089,-0.234 0,-0.324c0.09,-0.088 0.234,-0.088 0.324,0l0.686,0.686c0.088,0.09 0.088,0.234 0,0.324l-0.686,0.686c-0.09,0.088 -0.234,0.088 -0.324,0c-0.089,-0.09 -0.089,-0.235 0,-0.324l0.296,-0.295l-0.363,0c-0.125,0 -0.228,-0.103 -0.228,-0.229c0,-0.126 0.103,-0.229 0.228,-0.229l0.363,0Z"/>
</svg>When passed through svgstore, paths get put into symbol, but the style tag on the <svg> is ignored, which results in wrong compound path rendering:
If I just copy & paste the style tag onto the <symbol>, it fixes the issue, but doing this manually is not realistic.
I've tried re-saving the icon in inkscape, and it just converts the style properties into attributes, and puts them back on the <svg> again as:
<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" version="1.1" viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">They again don't get transferred, resulting in the same rendering issue.
Seems like a common way to save svg files, so can this be fixed in here?
Or am I doing something wrong? Is there something I can do in the meantime?
Hi @darsain, you can try to pipe your svgs through gulp-cheerio and transform svg to introduce an extra <g> around the content and move the style attributes there.
Then pipe the result through gulp-svgstore
I did that manually for the couple of icons in question, but for future, any ETA on the fix so I can decide whether to bother with cheerio, or is this a wontfix for some reason?
Closed via #110