Are the svg icons being optimized? Style tags are removed from the svg.

[TomDeSmet]

Description As the title says, it seems style tags are removed from the svg's. If the svg is somehow optimized (by svgomg or something), could we get a config file for it to tell it if it needs to do that or not or maybe even tell it which optimizations we want?

[engram-design]

No optimisation done on our end! I believe we just do a file_get_contents call to get the raw file content. I've just tested with inline style tags and nothing is stripped out.

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 29.2 29.2" style="enable-background:new 0 0 29.2 29.2;" xml:space="preserve">
<g>
    <path style="fill:#204DE0;" d="M29.2,14.6C29.2,6.5,22.7,0,14.6,0S0,6.5,0,14.6C0,21.9,5.3,28,12.3,29.1V18.8H8.6v-4.2h3.7v-3.2c0-3.7,2.2-5.7,5.5-5.7c1.6,0,3.3,0.3,3.3,0.3v3.6h-1.8c-1.8,0-2.4,1.1-2.4,2.3v2.7H21l-0.6,4.2h-3.4v10.2C23.9,28,29.2,21.9,29.2,14.6z"/>
    <path style="fill:#FFFFFF;" d="M20.3,18.8l0.6-4.2h-4.1v-2.7c0-1.2,0.6-2.3,2.4-2.3h1.8V6c0,0-1.7-0.3-3.3-0.3c-3.3,0-5.5,2-5.5,5.7v3.2H8.6v4.2h3.7v10.2c0.7,0.1,1.5,0.2,2.3,0.2s1.5-0.1,2.3-0.2V18.8H20.3z"/>
</g>
</svg>

[TomDeSmet]

It's not inline styles that get removed, but the defs/style tag itself:

<defs>
    <style>.cls-1{fill:#2b317e;}</style>
</defs>

Not the best way to do this in a SVG but I have no control over those.

[engram-design]

Yep, I tried that as well!

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 29.2 29.2" style="enable-background:new 0 0 29.2 29.2;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#204DE0;}
    .st1{fill:#FFFFFF;}
</style>
<g>
    <path class="st0" d="M29.2,14.6C29.2,6.5,22.7,0,14.6,0S0,6.5,0,14.6C0,21.9,5.3,28,12.3,29.1V18.8H8.6v-4.2h3.7v-3.2c0-3.7,2.2-5.7,5.5-5.7c1.6,0,3.3,0.3,3.3,0.3v3.6h-1.8c-1.8,0-2.4,1.1-2.4,2.3v2.7H21l-0.6,4.2h-3.4v10.2C23.9,28,29.2,21.9,29.2,14.6z"/>
    <path class="st1" d="M20.3,18.8l0.6-4.2h-4.1v-2.7c0-1.2,0.6-2.3,2.4-2.3h1.8V6c0,0-1.7-0.3-3.3-0.3c-3.3,0-5.5,2-5.5,5.7v3.2H8.6v4.2h3.7v10.2c0.7,0.1,1.5,0.2,2.3,0.2s1.5-0.1,2.3-0.2V18.8H20.3z"/>
</g>
</svg>

Surrounding the styles in <defs> tags doesn't change anything either.

Are you able to share the SVG here just to test?

[TomDeSmet]

I'm using {{ icon.icon.inline }} on this SVG:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" width="100px" height="100px" id="Laag_1" data-name="Laag 1" viewBox="0 0 64 64">
    <defs>
      <style>.cls-1{fill:#2b317e;}</style>
    </defs>
    <title>Goals</title>
    <path class="cls-1" d="M58.22,8.61,55.48,6.2l2.74-2.41a1.36,1.36,0,0,0-.89-2.37H46V.94a.94.94,0,1,0-1.87,0V13.59l-7.71,4.19a3,3,0,0,0-.3-1L35,14.67a3,3,0,0,0-4-1.28l-.84.43a3,3,0,0,0-1.29,4L30,19.93a2.92,2.92,0,0,0,1.07,1.16,8.38,8.38,0,0,0-1.14,2.72l-.2.72a.94.94,0,0,0,.65,1.16,1.09,1.09,0,0,0,.26,0,1,1,0,0,0,.9-.68l.2-.72c.41-1.45.66-2.22,1.47-2.66l1.44-.78.18-.09.17-.1,10.27-5.58a4,4,0,0,1-1.89,3.19L36.7,22.36h0l-2.08,1.26a.94.94,0,0,0,.9,1.65l-1.58,4.77-1.15.47-3.14,1.29.91-3.2a.94.94,0,0,0-1.81-.51l-1.43,5a.76.76,0,0,0,0,.21l-.37,6.86a3.42,3.42,0,0,1-.08,1L22.66,50h-3a3.21,3.21,0,0,0-3.2,3.21v2.71a3.15,3.15,0,0,0-1.33-.29H7.45a3.2,3.2,0,0,0-3.2,3.2V64H54.88V38a3.2,3.2,0,0,0-3.2-3.2H46V18.39a5.87,5.87,0,0,0,1-5,1,1,0,0,0-1-.69V11H57.33a1.35,1.35,0,0,0,.89-2.36ZM30.51,16.12a1.05,1.05,0,0,1,.54-.63l.84-.43a1.11,1.11,0,0,1,.5-.12,1.08,1.08,0,0,1,1,.59l1.08,2.12a1.09,1.09,0,0,1-.36,1.4l-.3.16-.65.34a1.09,1.09,0,0,1-1.46-.48L30.58,17A1.09,1.09,0,0,1,30.51,16.12ZM28.63,50.25a3.26,3.26,0,0,0-1-.27l1-1.37Zm4.45-7.56A3.44,3.44,0,0,0,33.76,41c0-.12.49-2.65.49-2.65l.48.29s.06.05.06.08l.51,5.19H32.16Zm5.55-5.18-.79,6.41h-.65l-.53-5.37A2,2,0,0,0,35.55,37l-.94-.59.63-3.49L38,36.11C38.5,36.82,38.68,37.11,38.63,37.51ZM28.5,42.05a5.18,5.18,0,0,0,.26-1.74l.34-6.26,4.34-1.78-.79,4.37v0L32,40.29a3.51,3.51,0,0,1-.39,1.25L25.26,50h-.52ZM6.13,58.79a1.33,1.33,0,0,1,1.32-1.33h7.66a1.34,1.34,0,0,1,1.33,1.33v3.36H6.13Zm12.19,0V53.17a1.33,1.33,0,0,1,1.32-1.33H27.3a1.34,1.34,0,0,1,1.33,1.33v9H18.32V58.79ZM53,38V62.15H42.7V56.53a.94.94,0,1,0-1.88,0v5.62H30.51v-15a1.33,1.33,0,0,1,1.32-1.33h7.66a1.34,1.34,0,0,1,1.33,1.33v4.7a.94.94,0,1,0,1.87,0V38A1.33,1.33,0,0,1,44,36.64h7.66A1.33,1.33,0,0,1,53,38Zm-9-3.2a3.21,3.21,0,0,0-3.2,3.2v6.25a3.3,3.3,0,0,0-1.09-.28l.77-6.19A3.66,3.66,0,0,0,39.44,35l-3.71-4.41L38,23.78,44.13,20V34.76ZM46,9.09V3.3h9.93L53.79,5.18a1.36,1.36,0,0,0-.45,1,1.33,1.33,0,0,0,.45,1l2.14,1.88Z"></path>
</svg>

This is what's being rendered. So it lost all color. In the Craft CP I can see the color of the SVG, so I suppose Craft didn't take anything out. Very strange.

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" width="100px" height="100px" id="Laag_1" data-name="Laag 1" viewBox="0 0 64 64">
  <defs></defs> 
  <title>Goals</title> 
  <path d="M58.22,8.61,55.48,6.2l2.74-2.41a1.36,1.36,0,0,0-.89-2.37H46V.94a.94.94,0,1,0-1.87,0V13.59l-7.71,4.19a3,3,0,0,0-.3-1L35,14.67a3,3,0,0,0-4-1.28l-.84.43a3,3,0,0,0-1.29,4L30,19.93a2.92,2.92,0,0,0,1.07,1.16,8.38,8.38,0,0,0-1.14,2.72l-.2.72a.94.94,0,0,0,.65,1.16,1.09,1.09,0,0,0,.26,0,1,1,0,0,0,.9-.68l.2-.72c.41-1.45.66-2.22,1.47-2.66l1.44-.78.18-.09.17-.1,10.27-5.58a4,4,0,0,1-1.89,3.19L36.7,22.36h0l-2.08,1.26a.94.94,0,0,0,.9,1.65l-1.58,4.77-1.15.47-3.14,1.29.91-3.2a.94.94,0,0,0-1.81-.51l-1.43,5a.76.76,0,0,0,0,.21l-.37,6.86a3.42,3.42,0,0,1-.08,1L22.66,50h-3a3.21,3.21,0,0,0-3.2,3.21v2.71a3.15,3.15,0,0,0-1.33-.29H7.45a3.2,3.2,0,0,0-3.2,3.2V64H54.88V38a3.2,3.2,0,0,0-3.2-3.2H46V18.39a5.87,5.87,0,0,0,1-5,1,1,0,0,0-1-.69V11H57.33a1.35,1.35,0,0,0,.89-2.36ZM30.51,16.12a1.05,1.05,0,0,1,.54-.63l.84-.43a1.11,1.11,0,0,1,.5-.12,1.08,1.08,0,0,1,1,.59l1.08,2.12a1.09,1.09,0,0,1-.36,1.4l-.3.16-.65.34a1.09,1.09,0,0,1-1.46-.48L30.58,17A1.09,1.09,0,0,1,30.51,16.12ZM28.63,50.25a3.26,3.26,0,0,0-1-.27l1-1.37Zm4.45-7.56A3.44,3.44,0,0,0,33.76,41c0-.12.49-2.65.49-2.65l.48.29s.06.05.06.08l.51,5.19H32.16Zm5.55-5.18-.79,6.41h-.65l-.53-5.37A2,2,0,0,0,35.55,37l-.94-.59.63-3.49L38,36.11C38.5,36.82,38.68,37.11,38.63,37.51ZM28.5,42.05a5.18,5.18,0,0,0,.26-1.74l.34-6.26,4.34-1.78-.79,4.37v0L32,40.29a3.51,3.51,0,0,1-.39,1.25L25.26,50h-.52ZM6.13,58.79a1.33,1.33,0,0,1,1.32-1.33h7.66a1.34,1.34,0,0,1,1.33,1.33v3.36H6.13Zm12.19,0V53.17a1.33,1.33,0,0,1,1.32-1.33H27.3a1.34,1.34,0,0,1,1.33,1.33v9H18.32V58.79ZM53,38V62.15H42.7V56.53a.94.94,0,1,0-1.88,0v5.62H30.51v-15a1.33,1.33,0,0,1,1.32-1.33h7.66a1.34,1.34,0,0,1,1.33,1.33v4.7a.94.94,0,1,0,1.87,0V38A1.33,1.33,0,0,1,44,36.64h7.66A1.33,1.33,0,0,1,53,38Zm-9-3.2a3.21,3.21,0,0,0-3.2,3.2v6.25a3.3,3.3,0,0,0-1.09-.28l.77-6.19A3.66,3.66,0,0,0,39.44,35l-3.71-4.41L38,23.78,44.13,20V34.76ZM46,9.09V3.3h9.93L53.79,5.18a1.36,1.36,0,0,0-.45,1,1.33,1.33,0,0,0,.45,1l2.14,1.88Z" class="cls-1">
  </path>
</svg>

So all references to the style tag are gone as is the xml tag. Maybe Craft does clean it out but takes a snapshot thumbnail before it does that?

[engram-design]

So that's rendering correctly for me, so that's strange.

I'm also using {{ entry.iconPickerField.inline }}. There's nothing Craft should be doing to clean things https://github.com/verbb/icon-picker/blob/craft-3/src/services/Service.php#L241

[TomDeSmet]

Alright, then I guess it is something else messing with me :) Thanks to double check! Now I can at least rule out both Craft and Icon Picker as the culprits.

[engram-design]

I’ll keep testing to see if it’s something I’m overlooking too.

You’re not using minifiers or any front end frameworks like Vue that could mess with things?

[TomDeSmet]

Ugh, I feel so stupid now. Didn't see the console warnings. Of course it is Vue that doesn't agree with the