How to draw letter R with SVG

Question

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

The first M is the position on X and Y axis, 0,0 at the top-left. Full docs for the d-attribute: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d You can edit single paths with: https://yqnn.github.io/svg-path-editor And you probably want to clean the SVG with: https://jakearchibald.github.io/svgomg/ — Danny '365CSI' Engelman, May 29 '22 at 13:44
By the way, SVG can perfectly well just render text, so if you want that, you can just put the letter "R" there instead of drawing it. Also, nobody draws SVG by hand - just use your favorite vector illustrator (e.g., Inkscape (which is free)) and export the SVG. Drawing a good-looking R is especially hard: Typography is a complicated design field, and people pay very good money if someone designs a font for them with beautiful letters; honestly, you should just use a sane font and use the R shape from that instead of writing it yourself. — Marcus Müller, May 29 '22 at 13:52

score 1 · Answer 1 · answered May 29 '22 at 18:33

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>

i tried this but nothing shows up, btw i want you to know that i am using Gatsby.js — Nasyx Nadeem, May 30 '22 at 14:44

score 0 · Answer 2 · answered May 29 '22 at 13:55

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

How to draw letter R with SVG

2 Answers2