Search code examples
svgvectorgraphicsadobe-illustrator

Perfect SVG Paths?

I try to make a cleran short code SVG Graphic... But i get everytime ugly borders...

Code: 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 370 192" xml:space="preserve">
<polygon class="shape1" points="0 158 0 0 160 0 258 90 "/>
<polygon class="shape2" points="370 192 370 0 160 0 "/>
</svg>

I tryed now to edit the coordinations in Adome Illustrator and by hand... But no Chance... =/ Maybe anyone have a idea?

Here you can see that i have Borders arount the SVG to: https://i.sstatic.net/Z10Fa.png

Solution

  • Browsers have some rounding issues with coordinates, that's why you get those small white lines.

    To prevent the white lines at the sides you could use bleed, the examples below don't contain a bleed.

    There are 2 solutions.

    1. Combine the polygons
      Inside the newest Illustrator -> File -> Export -> Select SVG as format

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 370 192" xml:space="preserve">
<polygon class="shape1" points="0 158 0 0 370 0 370  192 258 90 "/>
</svg>

    1. Make the polygons overlap each other 
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 370 192" xml:space="preserve">
<polygon class="shape1" points="0 158 0 0 370 0 370  192 258 90 "/>
<polygon class="shape2" points="370 192 370 0 160 0 "/>
</svg>