Strange SVG icon behaviour

I am using an SVG icon in a header block. most of the icons are displaying correctly, but one is being clipped.
You can see them here: Hair Removal – MyAlphaLaser about mid page.
The “All Skin Types” icon is not displayed correctly.
I have copied the SVG code from Adobe XD for all icons, but this one is wrong.
This is the SVG code used:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="123" height="123" viewBox="0 0 123 123"> <defs> <clipPath id="clip-path"> <rect id="Rectangle_235" data-name="Rectangle 235" width="101" height="101" fill="none"></rect> </clipPath> </defs> <g id="Group_546" data-name="Group 546" transform="translate(-267 -4115)"> <circle id="Ellipse_67" data-name="Ellipse 67" cx="61.5" cy="61.5" r="61.5" transform="translate(267 4115)" fill="#a89ec1"></circle> <g id="Artwork_2" data-name="Artwork 2" transform="translate(321 4169)"> <g id="Group_380" data-name="Group 380" transform="translate(-43 -43)" clip-path="url(#clip-path)"> <path id="Path_204" data-name="Path 204" d="M35.981,46.656H1.894A51.762,51.762,0,0,1,0,34.031,50.5,50.5,0,0,1,10.731,3.1L28.406,34.031Z" transform="translate(0 16.469)" fill="#fff"></path> <path id="Path_205" data-name="Path 205" d="M51.1,11,34.056,40.669A50.5,50.5,0,0,1,.6,11Z" transform="translate(3.187 58.438)" fill="#fff"></path> <path id="Path_206" data-name="Path 206" d="M49.194,38.138a50.5,50.5,0,0,1-35.35,14.519H6.9L32.15,9.1Z" transform="translate(36.656 48.344)" fill="#fff"></path> <path id="Path_207" data-name="Path 207" d="M46.281,18.625A50.5,50.5,0,0,1,35.55,49.556L10.3,6H44.388a49.238,49.238,0,0,1,1.894,12.625" transform="translate(54.719 31.875)" fill="#fff"></path> <path id="Path_208" data-name="Path 208" d="M57.9,29.969H7.4L24.444.3A50.5,50.5,0,0,1,57.9,29.969" transform="translate(39.313 1.594)" fill="#fff"></path> <path id="Path_209" data-name="Path 209" d="M44.694.631,27.019,31.562,19.444,44.187,2.4,14.519A50.5,50.5,0,0,1,37.75,0h6.944" transform="translate(12.75)" fill="#fff"></path> </g> </g> </g> </svg>

Any idea why this is happening and how I can solve this?
Thanks!
Dan

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 123 123"><defs/><defs><clipPath id="a"><path fill="none" d="M0 0h101v101H0z" data-name="Rectangle 235"/></clipPath></defs><g data-name="Group 546" transform="translate(-267 -4115)"><circle cx="61.5" cy="61.5" r="61.5" fill="#a89ec1" data-name="Ellipse 67" transform="translate(267 4115)"/><g data-name="Artwork 2"><g fill="#fff" clip-path="url(#a)" data-name="Group 380" transform="translate(278 4126)"><path d="M35.981 63.125H1.894A51.762 51.762 0 010 50.5a50.5 50.5 0 0110.731-30.931L28.406 50.5z" data-name="Path 204"/><path d="M54.287 69.438L37.243 99.107A50.5 50.5 0 013.787 69.438z" data-name="Path 205"/><path d="M85.85 86.482a50.5 50.5 0 01-35.35 14.519h-6.944l25.25-43.557z" data-name="Path 206"/><path d="M101 50.5a50.5 50.5 0 01-10.731 30.931l-25.25-43.556h34.088a49.238 49.238 0 011.894 12.625" data-name="Path 207"/><path d="M97.213 31.563h-50.5L63.757 1.894a50.5 50.5 0 0133.456 29.669" data-name="Path 208"/><path d="M57.444.631L39.769 31.562l-7.575 12.625L15.15 14.519A50.5 50.5 0 0150.5 0h6.944" data-name="Path 209"/></g></g></g></svg>`Preformatted text`

Seems that there is something off with the SVG. I ran it through the optimizer, tested it in my test install and seems to work fine now. SVG optimizer: SVGOMG - SVGO's Missing GUI

1 Like

Thank you @BiancaNL !
It’s looking good now.
https://myalphalaser.ca/hair-removal/
Do you usually run SVGs through the optimizer for better practice?

Dan

Yes, optimizing the SVG. is a good idea in general. Also makes the size of the file smaller en can wash out unreliable elements. The documentation also refers to that tool and Save SVG Asset Library - Documentation