Search code examples
svggeometrydrawing

How to create this half circle with SVG?

enter image description here

I've tried the below code but it seems too complicated and has compatibility issues when I display it on the web.

How can I make the above shape in SVG? Perhaps with just a path element and without the need to rotate it.

  <svg
       width="28.149193mm"
       height="47.310486mm"
       viewBox="0 0 28.149193 47.310486"
       version="1.1"
       id="svg5"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:svg="http://www.w3.org/2000/svg">
      <defs
         id="defs2" />
      <g
         id="layer1"
         transform="translate(-45.804437,-101.49194)">
        <path
           style="fill:#000000;stroke:#ff0000;stroke-width:3;stroke-dasharray:none;stroke-opacity:1"
           id="path346"
           d="m -147.30242,72.453629 a 22.155243,25.149193 0 0 1 22.15524,-25.149193 22.155243,25.149193 0 0 1 22.15524,25.149193 h -22.15524 z"
           transform="rotate(-90)" />
      </g>
    </svg>

Solution

  • There could be different ways to create a half circle depending on what it should be used for.

    Here is a "copy" of your initial code with a path that has a arc (a) and closed (Z):

    <svg
  width="28.149193mm"
  height="47.310486mm"
  viewBox="0 0 26.5 50"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg">
  <path
    fill="#000000" stroke="#ff0000" stroke-width="3"
    d="M 25 1.5 a 1 1 0 0 0 0 47 Z" />
</svg>

    You could also just cut off half of a full circle, but then you either miss the vertical line or need to draw that as a separate element.

    <svg
  width="28.149193mm"
  height="47.310486mm"
  viewBox="0 0 25 50"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg">
  <circle cx="25" cy="25" r="23.5" fill="#000000"
  stroke="#ff0000" stroke-width="3" />
</svg>

    Update

    A quarter of a circle can be done using the arc command again (well, you almost did one yourself). If the first and second number in a 23.5 23.5 0 0 0 -23.5 23.5 matches the distance (the last two numbers (now, that it is a a, no A)) you can make a quarter. See more details in in the documentation for the d attribute.

    <svg
  width="28mm"
  height="28mm"
  viewBox="0 0 26.5 26.5"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg">
  <path
    fill="#000000" stroke="#ff0000" stroke-width="3"
    d="M 25 1.5 a 23.5 23.5 0 0 0 -23.5 23.5 h 23.5 Z" />
</svg>