How to draw letter R with SVG-CodePudding

I have a svg of letter B here is the code:

<svg id="logo" xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 84 96">
    <title>Logo</title>
    <g transform="translate(-8.000000, -2.000000)">
      <g transform="translate(11.000000, 5.000000)">
        <path
          d="M45.691667,45.15 C48.591667,46.1 50.691667,48.95 50.691667,52.2 C50.691667,57.95 46.691667,61 40.291667,61 L28.541667,61 L28.541667,30.3 L39.291667,30.3 C45.691667,30.3 49.691667,33.15 49.691667,38.65 C49.691667,41.95 47.941667,44.35 45.691667,45.15 Z M33.591667,43.2 L39.241667,43.2 C42.791667,43.2 44.691667,41.85 44.691667,38.95 C44.691667,36.05 42.791667,34.8 39.241667,34.8 L33.591667,34.8 L33.591667,43.2 Z M33.591667,47.5 L33.591667,56.5 L40.191667,56.5 C43.691667,56.5 45.591667,54.75 45.591667,52 C45.591667,49.2 43.691667,47.5 40.191667,47.5 L33.591667,47.5 Z"
          fill="currentColor"
        />
        <polygon
          id="Shape"
          stroke="currentColor"
          strokeWidth="5"
          strokeLinecap="round"
          strokeLinejoin="round"
          points="39 0 0 22 0 67 39 90 78 68 78 23"
        />
      </g>
    </g>
  </svg>

And here is how it looks

I just need to change letter B to letter R but i don't know the path and it should be centered in polygon

CodePudding user response：

If you don't plan going down the rabit hole of SVG's, try to use a SVG builder, should be faster as easier to visualise.

Examples: https://vectorpaint.yaks.co.nz/

https://editor.method.ac/

After you finish you can download and use the svg file or open the file in your editor to see the code

CodePudding user response：

As I've commented: delete the path and add:

<text x="39" y="45" dominant-baseline="middle" text-anchor="middle" font-size="30">R</text>

where x="39" y="45" are the coords of the center of the hexagon. Please observe that the text is centered around this point (<text x="39" y="45" dominant-baseline="middle" text-anchor="middle")

svg{width:90vh}

<svg id="logo" xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 84 96">
    <title>Logo</title>
    <g transform="translate(-8.000000, -2.000000)">
      <g transform="translate(11.000000, 5.000000)">
    
        <polygon
          id="Shape"
          stroke="currentColor"
          strokeWidth="5"
          strokeLinecap="round"
          strokeLinejoin="round"
          points="39 0 0 22 0 67 39 90 78 68 78 23"
          
          fill="none"
        />
        
       <text x="39" y="45" dominant-baseline="middle" text-anchor="middle" font-size="30">R</text>
      </g>
    </g>
  </svg>