Weird lines in svg in browser which are not visible in AI

I’m trying to create a simple vector graphic for a bar. It looks as I want it in AI but gets some weird lines in browsers. Please take a look at the picture and let me know if you know what can be the reason and how to get rid of these lines.

Bar then looks like

SVG in question

    <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<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"
     viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
<style type="text/css">
    .st0{fill:url(#SVGID_1_);}
    .st1{fill:#2C5CA6;}
    .st2{fill:url(#SVGID_2_);}
    .st3{fill:#A9A9A9;}
</style>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="5" y1="1" x2="5" y2="19" gradientTransform="matrix(1 0 0 -1 0 20)">
    <stop  offset="0" style="stop-color:#2C5CD1"/>
    <stop  offset="0.1453" style="stop-color:#2C5DD5"/>
    <stop  offset="0.2959" style="stop-color:#2C61E2"/>
    <stop  offset="0.4484" style="stop-color:#2D67F6"/>
    <stop  offset="0.5" style="stop-color:#2D6AFF"/>
    <stop  offset="0.5516" style="stop-color:#2D67F6"/>
    <stop  offset="0.7041" style="stop-color:#2C61E2"/>
    <stop  offset="0.8547" style="stop-color:#2C5DD5"/>
    <stop  offset="1" style="stop-color:#2C5CD1"/>
</linearGradient>
<rect y="1" class="st0" width="10" height="18"/>
<rect class="st1" width="10" height="1"/>
<rect y="19" class="st1" width="10" height="1"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="15" y1="1" x2="15" y2="19" gradientTransform="matrix(1 0 0 -1 0 20)">
    <stop  offset="0" style="stop-color:#D0D0D0"/>
    <stop  offset="0.1781" style="stop-color:#CCCCCC"/>
    <stop  offset="0.3622" style="stop-color:#BFBFBF"/>
    <stop  offset="0.5" style="stop-color:#B1B1B1"/>
    <stop  offset="0.6378" style="stop-color:#BFBFBF"/>
    <stop  offset="0.8219" style="stop-color:#CCCCCC"/>
    <stop  offset="1" style="stop-color:#D0D0D0"/>
</linearGradient>
<rect x="10" y="1" class="st2" width="10" height="18"/>
<rect x="10" class="st3" width="10" height="1"/>
<rect x="10" y="19" class="st3" width="10" height="1"/>
</svg>

Answer

The hairline is caused by rounding. You’re displaying a 20px² image at a size much larger than that. The browser and Illustrator have differences of opinion on how this should be handled, but there would be no hairline if you rendered the image at its native size (20px x 20px).

The severity of the rounding dictates how noticeable the hairline is. You can see it phase in and out in this demo:

Shrinking and enlarging the image

With that in mind you can design your image around this and prevent the undesired rendering. Overlap shapes instead of butting them up against each other or stick a rectangle behind the artwork and fill it with the appropriate color.

In your particular case, you can use 4 rectangles instead of 6. Make the top/bottom rectangles full height and send them to the back. That’s what I did in this updated demo:

Shrinking and enlarging the optimized image

Attribution
Source : Link , Question Author : Igor Yavych , Answer Author : JohnB

Leave a Comment