Search code examples
xmlsvgvector-graphics

How to make this simple figure to an SVG xml path?


In the last two days I'm trying to recreate this icon into an svg which I got only as an image. I'm really new to SVG coding.

Figure

I tried to code it, but this is all what I got:

<svg width="100" height="100"><path d="M50 0, L 100 100, L 50 85, L 0 100, Z"/></svg>

Maybe you can help me with that.

Thanks in advance!


Solution

  • Like suggested in the comments (and you started doing yourself) you can use a path element. And you probably need an editor for drawing it.

    The alternative that I suggest here is to "construct" the shape using different basic elements (here lines) to create a mask. Its more code, but easier to modify.

    <svg viewBox="0 0 100 100" width="300">
      <defs>
        <mask id="m1" stroke-linecap="round"
          stroke-width="12" stroke="white">
          <g transform="translate(50 30)">
            <line x2="40" transform="rotate(115)" />
            <line x2="40" transform="rotate(65)" />
            <line y2="30" />
          </g>
          <line transform="translate(50 30) rotate(65)
            translate(40 0) rotate(130)" x2="30" />
          <line transform="translate(50 30) rotate(115)
            translate(40 0) rotate(-130)" x2="30"/>
        </mask>
      </defs>
      <rect width="100" height="100" fill="black"/>
      <rect mask="url(#m1)" width="100" height="100"
        fill="white"/>
    </svg>