Learn, Share, Build

171
September 20, 2017, at 3:28 PM

I came with this issue in Firefox, or maybe I'm using something wrong, but I use svg images like this:

<img src="image.svg" alt="some image">

And the browser rendering them like this:

I can have them like .png and it works fine, but I need them in .svg

Update with SVG source

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"> 
    <defs> 
        <path id="a" d="M13.333 9.333V7.746c0-.717.159-1.08 1.271-1.08H16V4h-2.33c-2.853 0-3.795 1.308-3.795 3.554v1.78H8V12h1.875v8h3.458v-8h2.35L16 9.333h-2.667z"/> 
        <path id="c" d="M0 0h24v24H0z"/> 
    </defs> 
    <g fill="none" fill-rule="evenodd"> 
        <mask id="b" fill="#fff"> 
            <use xlink:href="#a"/> 
        </mask> 
        <use fill="#000" xlink:href="#a"/> 
        <g mask="url(#b)"> 
            <use fill="#232323" xlink:href="#c"/> 
        </g> 
    </g> 
</svg>

Update 2

Tried to move the fill attribute from <mask> to its child element <use> just like in this question, and didn't fixed the issue. I'm using Firefox 55.0.3.

Answer 1

I don't know why FF is having a problem with this file. You may want to report this as bug to them.

Luckily there is a simple fix. Get rid of those somewhat unnecessary masks that Illustrator adds.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"> 
    <path d="M13.333 9.333V7.746c0-.717.159-1.08 1.271-1.08H16V4h-2.33c-2.853 0-3.795 1.308-3.795 3.554v1.78H8V12h1.875v8h3.458v-8h2.35L16 9.333h-2.667z"/> 
</svg>

Answer 2
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>svg fix</title>
    <style>
        .icon {
            width: 24px;
            height: 24px;
        }
        .icon path {
            fill:#000;
        }
    </style>
</head>
<body>
<img class="icon" src="icon-fixed.svg" alt="fixed SVG">
<!--PUT BELOW CODE IN NEW DOCUMENT AND SAVE AS icon-fixed.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M13.3,9.3V7.7c0-0.7,0.2-1.1,1.3-1.1H16V4h-2.3c-2.9,0-3.8,1.3-3.8,3.6v1.8H8V12h1.9v8h3.5v-8h2.4L16,9.3H13.3z" />
</svg>-->
</body>
</html>

READ ALSO
Learn, Share, Build

Learn, Share, Build

I have a search suggestion component that is displayed under a TextFieldwhenever text is entered into the TextField the search suggestion component displays a list of possible matches based on the current entered text

114
Learn, Share, Build

Learn, Share, Build

On my site wwwthemosaicgame

159
Learn, Share, Build

Learn, Share, Build

For technical reasons beyond my control, I have to put a custom tag in a html-formatted mail I am sending with my applicationThe custom tag needs to be in the root of the document (i

175
Learn, Share, Build

Learn, Share, Build

What im trying to do : I want the copy the content of toast the text content on the toast using doube clickBut sometimes, while copying it translates horizontally which makes it difficult to copy

174