SVG image showing dark stroke on Chrome

Question

I'm having problem showing SVG logo image for my website project:

I can see slight thin dark line around the edge(border) of the vector object. It seems to be prevalent around curves. There's no border, at least when it's created on Illustrator, nor any other dark-colored object hidden beneath.

As far as I have tested, it seems to be fine on Firefox, Safari, IE11, but not for Chrome(v43) and Android-Stock-Browser(v4.2).

edit: I made a sample here. It has 'S' shaped orange object on square background object with the exact same color. No object here has border. This is made on Illustrator CS3, and I created SVG file with the same, as how it originally was done for my project.

Here's screenshot comparison:

enter image description here

And fiddle: http://jsfiddle.net/alexklaus80/tp0adzqn/

Here's the code of SVG file that used in this example:

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 13.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 14948)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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"
     width="100px" height="100px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<g id="Layer_copy">
    <rect x="-30.987" y="-30.357" style="fill:#EF8200;stroke:#EF8200;stroke-width:0.2;" width="156.636" height="156.634"/>
    <g>
        <path style="fill:#EF8200;stroke:#EF8200;stroke-width:0.2;" d="M70.966,51.515c1.779,1.968,3.086,4.138,3.934,6.476
            c0.854,2.356,1.277,5.081,1.277,8.194c0,7.416-2.74,13.531-8.225,18.345c-5.482,4.812-12.287,7.218-20.413,7.218
            c-3.745,0-7.49-0.587-11.239-1.748c-3.747-1.164-6.98-2.575-9.703-4.227l-2.544,4.314h-4.735l-0.832-28.755h4.795
            c0.982,3.548,2.134,6.755,3.454,9.612c1.327,2.861,3.067,5.539,5.24,8.019c2.048,2.333,4.449,4.18,7.19,5.562
            c2.737,1.385,5.924,2.075,9.552,2.075c2.726,0,5.099-0.363,7.132-1.069c2.031-0.71,3.674-1.72,4.936-3.023
            c1.266-1.302,2.203-2.83,2.814-4.599c0.605-1.755,0.912-3.781,0.912-6.064c0-3.356-0.945-6.488-2.838-9.396
            c-1.895-2.9-4.721-5.099-8.463-6.603c-2.561-1.023-5.502-2.151-8.816-3.393c-3.315-1.238-6.173-2.407-8.577-3.504
            c-4.736-2.127-8.412-4.915-11.037-8.368c-2.621-3.454-3.935-7.958-3.935-13.514c0-3.195,0.652-6.169,1.954-8.935
            c1.298-2.756,3.155-5.228,5.559-7.392c2.283-2.052,4.988-3.663,8.106-4.82c3.115-1.167,6.367-1.748,9.758-1.748
            c3.865,0,7.328,0.592,10.387,1.778c3.055,1.18,5.85,2.565,8.365,4.138l2.432-4.022h4.729l0.473,27.869h-4.785
            c-0.867-3.198-1.844-6.255-2.934-9.172c-1.082-2.916-2.496-5.56-4.227-7.927c-1.697-2.288-3.768-4.115-6.219-5.475
            c-2.441-1.358-5.437-2.04-8.987-2.04c-3.748,0-6.941,1.203-9.585,3.609c-2.645,2.408-3.971,5.347-3.971,8.815
            c0,3.633,0.856,6.635,2.552,9.024c1.692,2.387,4.156,4.352,7.396,5.886c2.877,1.38,5.706,2.578,8.495,3.58
            c2.776,1.004,5.469,2.081,8.071,3.229c2.365,1.022,4.645,2.187,6.834,3.487C67.448,48.261,69.354,49.776,70.966,51.515z"/>
    </g>
</g>
</svg>

So it supporsed to look like just an orange square, but on Chrome, it shows the letter S with slight brownish bordering.

I have been searching for similar issue on web but I got no clue. I'm guessing that it's generator (Illustrator CS3)'s problem??

No, the SVG header code doesn't help.If it isn't too long, perhaps you could post the entire SVG code here. Or better still, create a [minimal, complete and verifiable example](http://stackoverflow.com/help/mcve) of the issue. — r3mainer, May 31 '15 at 08:37
How are you including the SVG? IS it inlined in the HTML, or via an ` or similar? — Paul LeBeau, May 31 '15 at 23:29
@squeamishossifrage Thanks for advice! This was first time asking so thanks a lot for your help. I'll try to polish my question. — Iorippi, Jun 01 '15 at 11:23
@PaulLeBeau I'm using image as background-image. I also tried using , but that didn't help either. It's consitent even when I open the SVG file on browser directly, which uses — Iorippi, Jun 01 '15 at 11:23

Iorippi · Accepted Answer · 2015-06-17T15:07:13.087

I found the solution, but I got much more semantic solution thanks to @PaulLeBeau in comment section, so I put this first.

Sample code: Before

<path style="fill:#EF8200;stroke:#EF8200;stroke-width:0.2;" .. />

1. Remove stroke:#EF8200;, and change the value of stroke-width from 0.2 to none

<path style="fill:#EF8200;stroke-width:none;" .. />

Or.. there were other solutions which I found by myself. It doesn't look as good as the one above, but I'll lay it here just for the reference to say that it indeed does solve it.

2. Change the value of stroke-width from 0.2 to 0

<path style="fill:#EF8200;stroke:#EF8200;stroke-width:0;" .. />

3. removing stroke:#EF8200;stroke-width:0.2;

<path style="fill:#EF8200;" .. />

I do not understand why Illustrator adds width to the object that doesn't originally have stroke. Maybe this is bug for the both Illustrator CS3 and Chrome/Browser?

It seems like a bug in Chrome, but if you don't need a stroke, then it would be simpler just to do: `style="fill:#EF8200;stroke:none;"` rather than setting it to 0. — Paul LeBeau, Jun 01 '15 at 22:36
@PaulLeBeau That's exactly what I needed --And it's beautifully semantic! Thank you very much. I'll swap it with my old answer. — Iorippi, Jun 17 '15 at 14:51

score 0 · Answer 2 · answered Mar 16 '21 at 22:29

When editing on Illustrator, check that there is no stroke added (see image) on the background you are using

Double click the background and "Stroke" value change it to zero

That's the way I easily removed the stroke that appeared in one of the logos createdenter image description here

SVG image showing dark stroke on Chrome

2 Answers2