Question 43347 in Html Question posted in
Some basic documentation can be found here.

svg icon is not showing in Mozilla Firefox – Html

I have an SVG icon that works fine in other browsers like Chrome, Opera and Safari, but Mozilla has problems with it. Here is the code of my SVG:

<svg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'>
<g clip-path='url(#clip0_4_140)' filter='url(#filter0_i_4_140)'>
    <path
        d='M25 10H7C6.20462 10.0009 5.44206 10.3172 4.87964 10.8796C4.31722 11.4421 4.00087 12.2046 4 13V19C4.00061 19.5302 4.21152 20.0386 4.58646 20.4135C4.9614 20.7885 5.46975 20.9994 6 21V28C6.00061 28.5302 6.21152 29.0386 6.58646 29.4135C6.9614 29.7885 7.46975 29.9994 8 30H12C12.5302 29.9994 13.0386 29.7885 13.4135 29.4135C13.7885 29.0386 13.9994 28.5302 14 28V16H12V28H8V19H6V13C6.00024 12.7349 6.10567 12.4806 6.29316 12.2932C6.48064 12.1057 6.73486 12.0002 7 12H25C25.2651 12.0002 25.5194 12.1057 25.7068 12.2932C25.8943 12.4806 25.9998 12.7349 26 13V19H24V28H20V16H18V28C18.0006 28.5302 18.2115 29.0386 18.5865 29.4135C18.9614 29.7885 19.4698 29.9994 20 30H24C24.5302 29.9994 25.0386 29.7885 25.4135 29.4135C25.7885 29.0386 25.9994 28.5302 26 28V21C26.5302 20.9994 27.0386 20.7885 27.4135 20.4135C27.7885 20.0386 27.9994 19.5302 28 19V13C27.9991 12.2046 27.6828 11.4421 27.1204 10.8796C26.5579 10.3172 25.7954 10.0009 25 10Z'
        fill='#9BA9BA' />
    <path
        d='M10 9C9.20888 9 8.43552 8.76541 7.77772 8.32588C7.11992 7.88635 6.60723 7.26164 6.30448 6.53074C6.00173 5.79983 5.92252 4.99556 6.07686 4.21964C6.2312 3.44372 6.61216 2.73098 7.17157 2.17157C7.73098 1.61216 8.44372 1.2312 9.21964 1.07686C9.99556 0.92252 10.7998 1.00173 11.5307 1.30448C12.2616 1.60723 12.8864 2.11992 13.3259 2.77772C13.7654 3.43552 14 4.20888 14 5C13.9989 6.06053 13.5771 7.0773 12.8272 7.8272C12.0773 8.57711 11.0605 8.99889 10 9ZM10 3C9.60444 3 9.21776 3.1173 8.88886 3.33706C8.55996 3.55683 8.30362 3.86918 8.15224 4.23463C8.00087 4.60009 7.96126 5.00222 8.03843 5.39018C8.1156 5.77814 8.30608 6.13451 8.58579 6.41422C8.86549 6.69392 9.22186 6.8844 9.60982 6.96157C9.99778 7.03874 10.3999 6.99914 10.7654 6.84776C11.1308 6.69639 11.4432 6.44004 11.6629 6.11114C11.8827 5.78224 12 5.39556 12 5C11.9994 4.46976 11.7885 3.9614 11.4135 3.58646C11.0386 3.21152 10.5302 3.00061 10 3Z'
        fill='#9BA9BA' />
    <path
        d='M22 9C21.2089 9 20.4355 8.76541 19.7777 8.32588C19.1199 7.88635 18.6072 7.26164 18.3045 6.53074C18.0017 5.79983 17.9225 4.99556 18.0769 4.21964C18.2312 3.44372 18.6122 2.73098 19.1716 2.17157C19.731 1.61216 20.4437 1.2312 21.2196 1.07686C21.9956 0.92252 22.7998 1.00173 23.5307 1.30448C24.2616 1.60723 24.8864 2.11992 25.3259 2.77772C25.7654 3.43552 26 4.20888 26 5C25.9989 6.06053 25.5771 7.0773 24.8272 7.8272C24.0773 8.57711 23.0605 8.99889 22 9ZM22 3C21.6044 3 21.2178 3.1173 20.8889 3.33706C20.56 3.55683 20.3036 3.86918 20.1522 4.23463C20.0009 4.60009 19.9613 5.00222 20.0384 5.39018C20.1156 5.77814 20.3061 6.13451 20.5858 6.41422C20.8655 6.69392 21.2219 6.8844 21.6098 6.96157C21.9978 7.03874 22.3999 6.99914 22.7654 6.84776C23.1308 6.69639 23.4432 6.44004 23.6629 6.11114C23.8827 5.78224 24 5.39556 24 5C23.9994 4.46976 23.7885 3.9614 23.4135 3.58646C23.0386 3.21152 22.5302 3.00061 22 3Z'
        fill='#9BA9BA' />
</g>
<defs>
    <filter id='filter0_i_4_140' x='0' y='0' width='32' height='32' filter-units='userSpaceOnUse'
        color-interpolation-filters='sRGB'>
        <feFlood flood-opacity='0' result='BackgroundImageFix' />
        <feBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape' />
        <feColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'
            result='hardAlpha' />
        <feOffset />
        <feGaussianBlur stdDeviation='2' />
        <feComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1' />
        <feColorMatrix type='matrix' values='0 0 0 0 0.55 0 0 0 0 0.55 0 0 0 0 0.55 0 0 0 0.5 0' />
        <feBlend mode='normal' in2='shape' result='effect1_innerShadow_4_140' />
    </filter>
    <cli-path id='clip0_4_140'>
        <rect width='32' height='32' fill='white' />
    </cli-path>
</defs>
</svg>

I read that attribute ‘d’ has something to do with it, but I have other SVGs that have this attribute and work fine in Mozilla

Tags:

2

Answers


  1. 0

    The problem seems to the cli-path in the defs section, simple remove it and then SVG will work.

    Update: OR simply rename cli-path to clipPath

    Login or Signup to reply.
  2. 0

    It seems you have problem with svg code, Use this svg code

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>

    <title>Document</title>
</head>

<body>

    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_4_140)" filter="url(#a)" fill="#9BA9BA"><path d="M25 10H7a3.003 3.003 0 0 0-3 3v6a2.002 2.002 0 0 0 2 2v7a2.002 2.002 0 0 0 2 2h4a2.002 2.002 0 0 0 2-2V16h-2v12H8v-9H6v-6a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v6h-2v9h-4V16h-2v12a2.002 2.002 0 0 0 2 2h4a2.002 2.002 0 0 0 2-2v-7a2.002 2.002 0 0 0 2-2v-6a3.004 3.004 0 0 0-3-3ZM10 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm0-6a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm12 6a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm0-6a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"/></g><defs><filter id="a" x="0" y="0" width="32" height="32" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix values="0 0 0 0 0.55 0 0 0 0 0.55 0 0 0 0 0.55 0 0 0 0.5 0"/><feBlend in2="shape" result="effect1_innerShadow_4_140"/></filter></defs></svg>
    
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search