0

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>
enxaneta
  • 31,608
  • 5
  • 29
  • 42
ServerBloke
  • 802
  • 3
  • 15
  • 24
  • 1
    Indeed the code is too complicated. You have a useless and the shape is transformed twice. Keeping the same svg element, use this path instead: `` – enxaneta Aug 15 '23 at 20:57
  • You can find plenty of examples about `A` arcto calculation like ["How to calculate the SVG Path for an arc (of a circle)"](https://stackoverflow.com/questions/5736398/how-to-calculate-the-svg-path-for-an-arc-of-a-circle). You could also strip unnecessary transforms by opening the svg in inkscape (free) and and ungroup all elements as described here ["Removing transforms in SVG files"](https://stackoverflow.com/questions/13329125/removing-transforms-in-svg-files) – herrstrietzel Aug 15 '23 at 23:00
  • good editor for a single d-path is: https://yqnn.github.io/svg-path-editor/# – Danny '365CSI' Engelman Aug 17 '23 at 07:02

1 Answers1

1

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>
chrwahl
  • 8,675
  • 2
  • 20
  • 30