svgsvg-path

Modify SVG path

I've been trying for a few hours to edit my SVG by editing a path element but I can't get the result I want:

The code looks like this:

<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="circle style-scope iron-icon" style="pointer-events: none; display: block; width: 24px; height: 24px;">
    <g class=" style-scope iron-icon">
      <path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" class="style-scope iron-icon">
      </path> 
    </g>
  </svg>

And the rendered graphic looks like this:

SVG output

What I want to do is edit the inner black circle; I need to remove the right half of the circle.

I searched for sites which explain how to do it but I didn't found anything helpful.

Is it possible to paste the code in an SVG editor, and then edit the image and get the code back?

Help would be greatly appreciated.

Solution

  • The inner circle is drawn with four cubic Bezier curve commands. Simply remove the two commands drawing the right side of the inner circle.

    <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="circle style-scope iron-icon" style="pointer-events: none; display: block; width: 24px; height: 24px;">
    <g class=" style-scope iron-icon">
      <path d="M12 7 c-2.76 0-5 2.24-5 5 s2.24 5 5 5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" class="style-scope iron-icon">
      </path> 
    </g>
</svg>

    A description of the cubic Bezier curve commands can be found at: http://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands