CODEWITHSUNDEEP
svg
Lokasa Mawati
Lokasa Mawati

Reputation: 481

How to remove border where two SVG symbols connect

I have a simple SVG

<symbol id="triangle" class="triangle" viewBox="0 0 100 100" preserveAspectRatio="none">
  <polygon points="0,100 50,0 100,100" stroke="none" />
</symbol>

<symbol id="rect" viewBox="0 0 100 100" preserveAspectRatio="none">
  <rect width='100' height='100' stroke="none"/>
</symbol>

<use xlink:href="#rect" width="100" height="80" y="30" fill="#000"/>
<use xlink:href="#triangle" width="20" height="20" y="10" fill="#000"/>

It shows a border where the two connect: https://i.sstatic.net/GdLKF.jpg. Wondering how to get rid of it.

Upvotes: 0

Views: 231

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101820

Due to antialiasing, you will sometimes get 1px border artifacts like this. It will depend on the coordinates in your shapes, and the scaling of your SVGs and your SVG elements.

If you can't live with it, then you will need to overlap them slightly. Or place a separate element behind them to hide the join.

<svg width="333" y="333" viewBox="0 0 120 120">

  <symbol id="triangle" class="triangle" viewBox="0 0 100 100" preserveAspectRatio="none">
    <polygon points="0,100 50,0 100,100" stroke="none" />
  </symbol>

  <symbol id="rect" viewBox="0 0 100 100" preserveAspectRatio="none">
    <rect width='100' height='100' stroke="none"/>
  </symbol>

  <use xlink:href="#rect" width="100" height="80" y="30" fill="#000"/>
  <use xlink:href="#triangle" width="20" height="20" y="10" fill="#000"/>

</svg>


<!-- A 1px high rectangle added to bottom of triangle. Also need to add overflow visible because it is outside the symbols viewBox. -->
<svg width="333" y="333" viewBox="0 0 120 120">

  <symbol id="triangle2" class="triangle" viewBox="0 0 100 100" preserveAspectRatio="none" overflow="visible">
    <polygon points="0,100 50,0 100,100 100,101, 0,101" stroke="none" />
  </symbol>

  <symbol id="rect2" viewBox="0 0 100 100" preserveAspectRatio="none">
    <rect width='100' height='100' stroke="none"/>
  </symbol>

  <use xlink:href="#rect2" width="100" height="80" y="30" fill="#000"/>
  <use xlink:href="#triangle2" width="20" height="20" y="10" fill="#000"/>

</svg>

There are also other solutions, such as:

  • adding a thin stroke to your shapes.
  • using a <filter> to dilate the shapes slightly

Upvotes: 1

Related Questions