Search code examples
svgstroke

how to make rectangle hollow in svg path

I am trying to make an svg like as shown below

enter image description here

My svg content is as shown below

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false" aria-hidden="true">
    <path class="stroke-linejoin-round" d="M2 5h9v9H2z" ></path>
    <path class="stroke-linejoin-round" d="M5 5V2h9v9h-3"></path>
</svg>

the svg looks like filled as shown below

enter image description here

Can someone please tell me how to make inside of the box white

Solution

  • Using <path> could work out fine if you add the rounded corners to the path itself:

    <svg xmlns="http://www.w3.org/2000/svg" width="200" viewBox="0 0 16 16">
  <path class="stroke-linejoin-round" stroke="black" stroke-width="2"
  fill="none" d="M 5 5 V 3 A 1 1 0 0 1 6 2 h 8 A 1 1 0 0 1 15 3 v 8
  A 1 1 0 0 1 14 12 h -2"></path>
  <path class="stroke-linejoin-round" stroke="black" stroke-width="2"
  fill="none" d="M 2 6 A 1 1 0 0 1 3 5 h 8 a 1 1 0 0 1 1 1 v 8
  a 1 1 0 0 1 -1 1 H 3 A 1 1 0 0 1 2 14 z" ></path>
</svg>

    An alternative could be to use <rect> that has the attributes rx and ry to control the rounded corners (here just rx). To cut off the part of the rectangle that overlap you can use a mask.

    <svg xmlns="http://www.w3.org/2000/svg" width="200" viewBox="0 0 16 16">
  <defs>
    <mask id="m1">
      <rect width="16" height="16" fill="#fff"/>
      <rect x="2" y="5" width="10" height="10" rx="1"/>
    </mask>
  </defs>
  <rect stroke="black" stroke-width="2" fill="none" x="5" y="2"
  width="10" height="10" rx="1" mask="url(#m1)"/>
  <rect stroke="black" stroke-width="2" fill="none" x="2" y="5"
  width="10" height="10" rx="1"/>
</svg>