Search code examples
google-chromesvginternet-explorerfirefoxrendering

SVG is not being rendered as expected in firefox & ie

"AND gate" just under the top rectengular box is not being rendered correctly in firefox and ie explorer. It's being rendered correctly in chrome.

As you in the image from firefox, the left side under half circle seems like 1px.

My thickness in my shapes is 2px. I've decided 2px in order to avoid the rendering issues in case of 1px.

  1. Why is this difference among different browsers? Is it related to my code?
  2. What can I do for the AND Gate for cross browser & as-expected view?

the AND Gate's code in the svg is:

<g transform="translate(216.5, 136)">
    <svg width="39" height="48" viewBox="0 0 52 64">
        <path d="M 0 26 A 26 26 0 0 1 52 26 v 38 h -52 v -38 z" fill="#000000" />
        <path d="M 2 26 A 24 24 0 0 1 50 26 v 36 h -48 v -36 z" fill="#ffffff" />
    </svg>
</g>

thanks.

<!DOCTYPE html>
<html>
  <body>
    <svg version="1.1" width="472" height="442" viewBox="0 0 472 442" xmlns="http://www.w3.org/2000/svg">
      <rect x="0" y="0" width="472" height="442" fill="#dddddd" />
      <rect x="136" y="16" width="200" height="120" fill="#000000" />
      <rect x="138" y="18" width="196" height="116" fill="#ffffff" />
      <g transform="translate(216.5, 136)">
        <svg width="39" height="48" viewBox="0 0 52 64">
          <path d="M 0 26 A 26 26 0 0 1 52 26 v 38 h -52 v -38 z" fill="#000000" />
          <path d="M 2 26 A 24 24 0 0 1 50 26 v 36 h -48 v -36 z" fill="#ffffff" />
        </svg>
      </g>
      <rect x="235" y="184" width="2" height="24" fill="#000000" />
      <rect x="115" y="210" width="2" height="24" fill="#000000" />
      <rect x="355" y="210" width="2" height="24" fill="#000000" />
      <rect x="116" y="208" width="240" height="2" fill="#000000" />
      <rect x="16" y="234" width="200" height="120" fill="#000000" />
      <rect x="18" y="236" width="196" height="116" fill="#ffffff" />
      <g transform="translate(92, 354)">
        <svg width="48" height="48" viewBox="0 0 52 52">
          <circle cx="26" cy="26" r="26" fill="#000000" />
          <circle cx="26" cy="26" r="24" fill="#ffffff" />
        </svg>
      </g>
      <rect x="256" y="234" width="200" height="120" fill="#000000" />
      <rect x="258" y="236" width="196" height="116" fill="#ffffff" />
      <g transform="translate(332, 354)">
        <svg width="48" height="48" viewBox="0 0 52 52">
          <circle cx="26" cy="26" r="26" fill="#000000" />
          <circle cx="26" cy="26" r="24" fill="#ffffff" />
        </svg>
      </g>
    </svg>
  </body>
</html>

and gate

Solution

  • The AND gate overflows the viewBox. So we just need to make it wider.

    <!DOCTYPE html>
<html>
  <body>
    <svg version="1.1" width="472" height="442" viewBox="0 0 472 442" xmlns="http://www.w3.org/2000/svg">
      <rect x="0" y="0" width="472" height="442" fill="#dddddd" />
      <rect x="136" y="16" width="200" height="120" fill="#000000" />
      <rect x="138" y="18" width="196" height="116" fill="#ffffff" />
      <g transform="translate(216.5, 136)">
        <svg width="39" height="48" viewBox="-1 0 53 64">
          <path d="M 0 26 A 26 26 0 0 1 52 26 v 38 h -52 v -38 z" fill="#000000" />
          <path d="M 2 26 A 24 24 0 0 1 50 26 v 36 h -48 v -36 z" fill="#ffffff" />
        </svg>
      </g>
      <rect x="235" y="184" width="2" height="24" fill="#000000" />
      <rect x="115" y="210" width="2" height="24" fill="#000000" />
      <rect x="355" y="210" width="2" height="24" fill="#000000" />
      <rect x="116" y="208" width="240" height="2" fill="#000000" />
      <rect x="16" y="234" width="200" height="120" fill="#000000" />
      <rect x="18" y="236" width="196" height="116" fill="#ffffff" />
      <g transform="translate(92, 354)">
        <svg width="48" height="48" viewBox="0 0 52 52">
          <circle cx="26" cy="26" r="26" fill="#000000" />
          <circle cx="26" cy="26" r="24" fill="#ffffff" />
        </svg>
      </g>
      <rect x="256" y="234" width="200" height="120" fill="#000000" />
      <rect x="258" y="236" width="196" height="116" fill="#ffffff" />
      <g transform="translate(332, 354)">
        <svg width="48" height="48" viewBox="0 0 52 52">
          <circle cx="26" cy="26" r="26" fill="#000000" />
          <circle cx="26" cy="26" r="24" fill="#ffffff" />
        </svg>
      </g>
    </svg>
  </body>
</html>