Search code examples
google-chromesvgandroid-browser

SVG image showing dark stroke on Chrome

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??

Solution

  • 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?