CODEWITHSUNDEEP
htmlsvg
Tim
Tim

Reputation: 471

SVG not appearing in Firefox

I'm at a loss as far as why the SVG below isn't visible at all in Firefox. I'm not seeing any issues in dev tools and tweaking different values had no effect. Any help would be much appreciated.

<svg id="c3c12b3e-0f10-494e-be13-9dfc6fbf4623" style="width: 65px; height: 65px;" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74 74">
    <defs>
        <clipPath id="cb61f87d-92e3-4956-b0ac-b85f54e2e619">
            <rect x="651" y="352" width="64" height="64" fill="none"></rect>
        </clipPath>
        <clipPath id="652f7fcb-18a1-4608-9813-6592b340c183" transform="translate(-646 -347)">
            <path d="M683,416a32,32,0,1,0-32-32,32,32,0,0,0,32,32Z" fill="none" clip-path="url(#cb61f87d-92e3-4956-b0ac-b85f54e2e619)"
                clip-rule="evenodd"></path>
        </clipPath>
        <clipPath id="694f7d6a-8be8-46f7-8cd1-9190b8d68dd7" transform="translate(-646 -347)">
            <path d="M683.5,413A28.5,28.5,0,1,0,655,384.5,28.5,28.5,0,0,0,683.5,413Z" fill="none" clip-path="url(#cb61f87d-92e3-4956-b0ac-b85f54e2e619)"
                clip-rule="evenodd"></path>
        </clipPath>
        <clipPath id="60eff4e7-8ba1-4edf-ab4c-6ddd26ac9a96" transform="translate(-646 -347)">
            <path d="M668,399.91c.53-.32.88-.49,1.18-.71,2-1.5,4.86-2.18,5.14-5.36,0-.38.63-.71,1-1.07l4.27-4.51-1.87-1.9-.79.69c-2.26,1.93-3.64,5-7,5.44a.67.67,0,0,0-.36.31l-3.29,5,1.79,2.07Zm16.81-21.36,8-8a6,6,0,0,1,1-.87.72.72,0,0,1,.7,0,.69.69,0,0,1,0,.67,6.71,6.71,0,0,1-.89,1l-8,8,1.45,1.36c1.6-1.67,3.09-3.31,4.68-4.86a35.08,35.08,0,0,1,4.61-4.35c.2.22.41.44.61.67l-9.31,9.33,1.35,1.26c3.07-3,6.12-5.87,9-8.88a3.78,3.78,0,0,0-.26-5.43,3.87,3.87,0,0,0-5.33-.18c-3,2.89-5.86,5.93-8.85,9l1.25,1.33ZM666.41,372c-1.78,5.91,2.46,11.06,8,10.56a2.94,2.94,0,0,1,2.06.77c5.08,5,10.1,10,15.13,15.05,1.23,1.23,2.62,1.95,4.39,1.41,3.12-.94,3.88-4.54,1.43-7q-7.5-7.59-15.11-15.07a2.74,2.74,0,0,1-.91-2.41,7.57,7.57,0,0,0-4.93-7.81,7.27,7.27,0,0,0-5.41,0c1.13,1.1,2.08,2,3,2.89,3,2.95,3,3-.1,6-1.4,1.33-2.09,1.37-3.43,0s-2.58-2.76-4.1-4.39Z"
                fill="none" clip-path="url(#cb61f87d-92e3-4956-b0ac-b85f54e2e619)" clip-rule="evenodd"></path>
        </clipPath>
    </defs>
    <title>icon_settings_green</title>
    <g clip-path="url(#652f7fcb-18a1-4608-9813-6592b340c183)">
        <rect width="74" height="74" fill="#afe6af"></rect>
    </g>
    <g clip-path="url(#694f7d6a-8be8-46f7-8cd1-9190b8d68dd7)">
        <rect x="4" y="4" width="67" height="67" fill="#c2edc4"></rect>
    </g>
    <g clip-path="url(#60eff4e7-8ba1-4edf-ab4c-6ddd26ac9a96)">
        <rect x="15" y="15" width="43" height="43" fill="#fff"></rect>
    </g>
</svg>

Upvotes: 1

Views: 56

Answers (2)

Paul LeBeau
Paul LeBeau

Reputation: 101918

Further to @Sphinxx's answer (which you should accept), you can get rid of the unnecessary <clipPath> elements altogether.

Did you use Illustrator to create this icon? It produces really bloated SVGs.

<svg id="c3c12b3e-0f10-494e-be13-9dfc6fbf4623" style="width: 65px; height: 65px;" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74 74">
    <title>icon_settings_green</title>
    <g transform="translate(-646 -347)">
        <path d="M683,416a32,32,0,1,0-32-32,32,32,0,0,0,32,32Z" fill="#afe6af"/>
        <path d="M683.5,413A28.5,28.5,0,1,0,655,384.5,28.5,28.5,0,0,0,683.5,413Z" fill="#c2edc4"/>
        <path d="M668,399.91c.53-.32.88-.49,1.18-.71,2-1.5,4.86-2.18,5.14-5.36,0-.38.63-.71,1-1.07l4.27-4.51-1.87-1.9-.79.69c-2.26,1.93-3.64,5-7,5.44a.67.67,0,0,0-.36.31l-3.29,5,1.79,2.07Zm16.81-21.36,8-8a6,6,0,0,1,1-.87.72.72,0,0,1,.7,0,.69.69,0,0,1,0,.67,6.71,6.71,0,0,1-.89,1l-8,8,1.45,1.36c1.6-1.67,3.09-3.31,4.68-4.86a35.08,35.08,0,0,1,4.61-4.35c.2.22.41.44.61.67l-9.31,9.33,1.35,1.26c3.07-3,6.12-5.87,9-8.88a3.78,3.78,0,0,0-.26-5.43,3.87,3.87,0,0,0-5.33-.18c-3,2.89-5.86,5.93-8.85,9l1.25,1.33ZM666.41,372c-1.78,5.91,2.46,11.06,8,10.56a2.94,2.94,0,0,1,2.06.77c5.08,5,10.1,10,15.13,15.05,1.23,1.23,2.62,1.95,4.39,1.41,3.12-.94,3.88-4.54,1.43-7q-7.5-7.59-15.11-15.07a2.74,2.74,0,0,1-.91-2.41,7.57,7.57,0,0,0-4.93-7.81,7.27,7.27,0,0,0-5.41,0c1.13,1.1,2.08,2,3,2.89,3,2.95,3,3-.1,6-1.4,1.33-2.09,1.37-3.43,0s-2.58-2.76-4.1-4.39Z" fill="#fff" />
    </g>
</svg>

Upvotes: 2

Sphinxxx
Sphinxxx

Reputation: 13057

The problem is that your clipPaths 2-4 reference path 1. Now, paths 2-4 are transformed, which raises a question of what coordinates should path 1 use? The original coordinates before the transform (around 650,350, as in your example), or the coordinates after the transform (around 0,0)?

I don't know what the spec says, but Firefox thinks it should be the latter. So if you change the first clipPath to..

<rect x="0" y="0" width="64" height="64" fill="none"></rect>

..it will work in Firefox (but fail in other browsers).

But I don't understand why you need that second layer of clipping anyway. To make something that works in all browsers, simply remove that first path altogether:

<svg id="c3c12b3e-0f10-494e-be13-9dfc6fbf4623" style="width: 65px; height: 65px;" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74 74">
    <defs>
        <clipPath id="652f7fcb-18a1-4608-9813-6592b340c183" transform="translate(-646 -347)">
            <path d="M683,416a32,32,0,1,0-32-32,32,32,0,0,0,32,32Z" fill="none" />
        </clipPath>
        <clipPath id="694f7d6a-8be8-46f7-8cd1-9190b8d68dd7" transform="translate(-646 -347)">
            <path d="M683.5,413A28.5,28.5,0,1,0,655,384.5,28.5,28.5,0,0,0,683.5,413Z" fill="none" />
        </clipPath>
        <clipPath id="60eff4e7-8ba1-4edf-ab4c-6ddd26ac9a96" transform="translate(-646 -347)">
            <path d="M668,399.91c.53-.32.88-.49,1.18-.71,2-1.5,4.86-2.18,5.14-5.36,0-.38.63-.71,1-1.07l4.27-4.51-1.87-1.9-.79.69c-2.26,1.93-3.64,5-7,5.44a.67.67,0,0,0-.36.31l-3.29,5,1.79,2.07Zm16.81-21.36,8-8a6,6,0,0,1,1-.87.72.72,0,0,1,.7,0,.69.69,0,0,1,0,.67,6.71,6.71,0,0,1-.89,1l-8,8,1.45,1.36c1.6-1.67,3.09-3.31,4.68-4.86a35.08,35.08,0,0,1,4.61-4.35c.2.22.41.44.61.67l-9.31,9.33,1.35,1.26c3.07-3,6.12-5.87,9-8.88a3.78,3.78,0,0,0-.26-5.43,3.87,3.87,0,0,0-5.33-.18c-3,2.89-5.86,5.93-8.85,9l1.25,1.33ZM666.41,372c-1.78,5.91,2.46,11.06,8,10.56a2.94,2.94,0,0,1,2.06.77c5.08,5,10.1,10,15.13,15.05,1.23,1.23,2.62,1.95,4.39,1.41,3.12-.94,3.88-4.54,1.43-7q-7.5-7.59-15.11-15.07a2.74,2.74,0,0,1-.91-2.41,7.57,7.57,0,0,0-4.93-7.81,7.27,7.27,0,0,0-5.41,0c1.13,1.1,2.08,2,3,2.89,3,2.95,3,3-.1,6-1.4,1.33-2.09,1.37-3.43,0s-2.58-2.76-4.1-4.39Z" fill="none" />
        </clipPath>
    </defs>
    <title>icon_settings_green</title>
    <g clip-path="url(#652f7fcb-18a1-4608-9813-6592b340c183)">
        <rect width="74" height="74" fill="#afe6af"></rect>
    </g>
    <g clip-path="url(#694f7d6a-8be8-46f7-8cd1-9190b8d68dd7)">
        <rect x="4" y="4" width="67" height="67" fill="#c2edc4"></rect>
    </g>
    <g clip-path="url(#60eff4e7-8ba1-4edf-ab4c-6ddd26ac9a96)">
        <rect x="15" y="15" width="43" height="43" fill="#fff"></rect>
    </g>
</svg>

Upvotes: 2

Related Questions