: 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

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

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

10.01% popularity Vote Up Vote Down

: Font ID: Example plate from Jan Tschichold’s “The Form of the Book” This is an example plate illustrating the typesetting of superscripts and footnotes. The book itself is set in Monotype

@Candy945

Posted in: #FontIdentification

1 Comments

: What's the name of the font used for the title graphic of the video game 'SOMA'? I'm having quite a bit of trouble identifying which font exactly is being used on the title graphic for the

@Candy945

Posted in: #FontIdentification

1 Comments

: Difference of text and polygon results in hole that is smaller than original text I'm trying to make a single path by taking the difference between a polygon and a text letter, but when I

@Candy945

Posted in: #Inkscape

2 Comments

: Is there a ressource that evaluates the quality of webfonts? I am a web developer, for a current project I use the font the designer has asked to purchase (the company CI font), but in my

@Candy945

Posted in: #Fonts #WebFonts

1 Comments

Login to post a comment!

1 Comments

Sorted by latest first Latest Oldest Best

@Ravi4787994

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:

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:

10% popularity Vote Up Vote Down

Feed

: 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

More posts by @Candy945

: Font ID: Example plate from Jan Tschichold’s “The Form of the Book” This is an example plate illustrating the typesetting of superscripts and footnotes. The book itself is set in Monotype

: What's the name of the font used for the title graphic of the video game 'SOMA'? I'm having quite a bit of trouble identifying which font exactly is being used on the title graphic for the

: Difference of text and polygon results in hole that is smaller than original text I'm trying to make a single path by taking the difference between a polygon and a text letter, but when I

: Is there a ressource that evaluates the quality of webfonts? I am a web developer, for a current project I use the font the designer has asked to purchase (the company CI font), but in my

Login to post a comment!

1 Comments

Back to top | Use Dark Theme