4

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>
Improve this question
3
  • I didn't create this as an answer cause I don't know why this is caused but there is a 1px offset from each other. I manually changed some of the code to get rid of the offset. You can check out the code - jsfiddle.net/j5dzfc12. You can easily see this if you add a background color like body {background: red;} – AndrewH Nov 13 '15 at 20:59
  • @AndrewH hmm, i think it's actually 0.05px, not 1px. This is quite weird. These lines seem to be space between rectangles even though they're not supposed to be there. – Igor Yavych Nov 13 '15 at 21:11
  • 1
    Adobe products sometimes do non-intuitive things with alignment when enabling/disabling/editing stroke size. Perhaps this is where the offset came from. Note also that because of rounding, a .5 px offset is going to be invisible depending on scaling/zoom factor. perhaps your Illustrator zoom level masks the issue. When ctrl+scrolling the SVG in my browser, the gap disappears and reappears. – Yorik Nov 13 '15 at 21:37
1

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

Improve this answer
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.