Search code examples
svg

SVG - place white background behind subtracted path

I have been given an SVG file which represents a checkbox. It is a green circle with a checkmark inside. However, the path that makes the checkmark masks (?!?) the background, making it transparent. However we do not want a transparent background for this checkbox but rather we want to have a white checkmark on the green background. I tried to edit the SVG using VSCode, Sketch and Illustrator and got nowhere, I would be very grateful for help.

Here is the SVG:

<svg
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  width="512"
  height="512"
  x="0"
  y="0"
  viewBox="0 0 254000 254000"
  style="enable-background:new 0 0 512 512"
  xml:space="preserve"
  fill-rule="evenodd"
>
  <g>
    <path
      fill="#b0d25b"
      d="M127000 254000C56871 254000 0 197129 0 127000S56871 0 127000 0s127000 56871 127000 127000-56871 127000-127000 127000zm-17473-104654 76212-76211c2637-2638 6967-2611 9578 0l8642 8642c2611 2611 2611 6968 0 9578l-89509 89510c-1601 1601-3850 2231-5957 1869-1442-181-2833-814-3919-1899l-54525-54525c-2606-2606-2637-6941 0-9579l8642-8642c2638-2637 6941-2637 9579 0z"
      opacity="1"
      data-original="#48b02c"
    />
  </g>
</svg>

Solution

  • Try this:

    <!doctype html>
<html>
  <head>
    <style type="text/css">
      html,body{background-color:yellow;}
    </style>
  </head>
  <body>
    <h1>Before</h1>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      version="1.1"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="512"
      height="512"
      x="0"
      y="0"
      viewBox="0 0 254000 254000"
      style="enable-background:new 0 0 512 512"
      xml:space="preserve"
      fill-rule="evenodd"
    >
      <g>
        <path
          fill="#b0d25b"
          d="M127000 254000C56871 254000 0 197129 0 127000S56871 0 127000 0s127000 56871 127000 127000-56871 127000-127000 127000zm-17473-104654 76212-76211c2637-2638 6967-2611 9578 0l8642 8642c2611 2611 2611 6968 0 9578l-89509 89510c-1601 1601-3850 2231-5957 1869-1442-181-2833-814-3919-1899l-54525-54525c-2606-2606-2637-6941 0-9579l8642-8642c2638-2637 6941-2637 9579 0z"
          opacity="1"
          data-original="#48b02c"
        />
      </g>
    </svg>
    <h1>After</h1>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512" x="0" y="0" viewBox="0 0 254000 254000" style="enable-background:new 0 0 512 512" xml:space="preserve" fill-rule="evenodd" class="" >
        <g>
            <rect x="45000" y="35000" width="165000" height="170000" fill="#ffffff"/>
            <path fill="#b0d25b" d="M127000 254000C56871 254000 0 197129 0 127000S56871 0 127000 0s127000 56871 127000 127000-56871 127000-127000 127000zm-17473-104654 76212-76211c2637-2638 6967-2611 9578 0l8642 8642c2611 2611 2611 6968 0 9578l-89509 89510c-1601 1601-3850 2231-5957 1869-1442-181-2833-814-3919-1899l-54525-54525c-2606-2606-2637-6941 0-9579l8642-8642c2638-2637 6941-2637 9579 0z" opacity="1" data-original="#48b02c" class=""/>       
        </g>
    </svg>
  </body>
</html>

    You can also do this with clip-paths of course but it's more trouble around.

    Work around i made a rectangle that fills the correct indicator. Then i put the rectangle before the path (green circle), and i gave it a white background.

    Here is a print screen to show the indicator with black color instead of transparent.

    enter image description here