How to draw letter R with SVG - svg

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


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>


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

Related

Why isn't my text path on this circle rendering?

I'm going crosseyed trying to figure out why my text isn't showing up. Before I asked this, I had not seen it working in Firefox as it apparently does now.
<svg style="background-color: white" viewBox="-150 -150 300 300" width="300" height="300">
<circle id="circ0-0" cx="0" cy="0" r="121" stroke="#58595B" stroke-width="3" fill="transparent" style="transform: rotate(90deg)">
</circle>
<text class="donutText" dy="0">
<textPath startOffset="50%" xlink:href="#circ0-0" style="text-anchor: start;">Test test test.</textPath>
</text>
</svg>
Can this be accomplished in all browsers?

It appears that textPaths don't work on circles in all browsers. Only on actual paths, like:
<svg style="background-color: white" viewBox="-150 -150 300 300" width="300" height="300">
<path id="circ0-0" d="M 0 0 m -121, 0 a 121,121 0 1,0 242,0 a 121,121 0 1,0 -242,0" stroke="black" stroke-width="3" fill="white" style="transform: rotate(180deg)">
</path>
<text class="donutText" dy="0">
<textPath startOffset="50" xlink:href="#circ0-0" style="text-anchor: middle;">Test test test.</textPath>
</text>
</svg>

use defs (copy path like circle)
Ok I fix my answer and I use defs to define another path that like circle, it is really easy to change the path-"circle" radius (by for examle the all 125 to 100 and the 250 to 200)
So, it is like use the path only.. but there is advantage to use circle and the path in defs
BTW you can change the start of path by change dx="0"
<svg style="background-color: white" viewBox="-150 -150 300 300" width="300" height="300">
<g>
<defs>
<path d="M 0 0 m -125 0 a 125 125 0 1 0 250 0 a 125 125 0 1 0 -250 0" id="path-circle" />
</defs>
<circle stroke="#58595B" stroke-width="3" fill="transparent" cx="0" cy="0" r="128"/>
<text dx="0">
<textPath xlink:href="#path-circle">Test test test Test test test Test test test Test test test Test test test Test test test Test test test Test test test</textPath>
</text>
</g>
</svg>
Update by comment
I find that this way is depends on what you need, and only path can be really good solution!
The advantages for use defs (path) are:
The path circle not always accurate - the green circle (path actually), so if we want to display the circle then rather to use circle and for text the path in defs.
When we want the text be written in concave/convex we need to use path, and the path don't always is circle. (that is when you want to display circle but for text use other shape)
For me it is more readable, like if I see that code I understand that there is a circle, and text go on path shape, In contrast to see path and text.. no clear that the path is circle.
<svg style="background-color: white" viewBox="-150 -150 300 300" width="300" height="300">
<g>
<!-- <defs>
<path d="M 0 0 m -125 0 a 125 125 0 1 0 250 0 a 125 125 0 1 0 -250 0" id="path-circle" />
</defs> -->
<!-- <circle stroke="#58595B" stroke-width="3" fill="transparent" cx="0" cy="0" r="128"/> -->
<path stroke="#58595B" stroke-width="3" fill="transparent" d="M 0 0 m -125 0 a 125 125 0 1 0 250 0 a 125 125 0 1 0 -250 0" id="path-circle" />
<path stroke="green" stroke-width="3" fill="transparent"
d="M0,-62c34,0,63,28,62,62s-28,62-62,62s-62-28-62-62S-34,-62,0,-62z" id="path-circle2"
transform="rotate(-45)"/>
<circle stroke="blue" stroke-width="3" fill="transparent" cx="0" cy="0" r="50"/>
<text dx="0" dy="-4">
<textPath xlink:href="#path-circle">Test test test Test test test Test test test Test test test Test test test Test test test Test test test Test test test</textPath>
</text>
<text dx="0" dy="-4">
<textPath xlink:href="#path-circle2">Test2 test2 test2</textPath>
</text>
</g>
</svg>

svg: can anyone help me to draw an arc?

I'm trying to draw an arc with SVG but I'm stucked.
The goal is to get a figure like this:
what I get instead is this:
Those are the SVG tags I'm playing with:
<svg width='500' height='500' xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' >
<g style='transform-origin:center;'>
<path d="M 100 50
a 50,50 0 0 0 100,0" stroke="black" fill="red" stroke-width="2" />
</g>
</svg>
Can anybody help me to understan what's wrong on my node?

<svg width='500' height='500' xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' >
<g style='transform-origin:center;'>
<!--
<path d="M 100 50
a 50,50 0 0 0 100,0" stroke="black" fill="red" stroke-width="2" />
-->
<path d="M 50 50
a 50,50 270 1 0 25,15" stroke="black" fill="red" stroke-width="2" />
<path d="M 150 150
a 50,50 270 0 0 125,115" stroke="black" fill="red" stroke-width="2" />
</g>
</svg>
your problem is the large-arc-flag, set it to 1
MDN Reference

Using clip-path to remove 37px from 4 svg lines in the circle

What I'm trying to do is remove the svg lines in the middle of the circle.
How would this be done using clip-path?
Taking this:
https://i.imgur.com/DGX3Yji.png
And turning it to this:
https://i.imgur.com/gg4XFUq.png
Code:
https://jsfiddle.net/5r1dg4hx/3/
https://i.imgur.com/SGzGzaE.png
<svg class="stack" aria-hidden="true" width="260" height="194" viewbox="0 0 260 194">
<line stroke="teal" x1="131" y1="40" x2="130" y2="149"></line>
<line stroke="dodgerblue" x1="91" y1="133" x2="170" y2="58"></line>
<line stroke="purple" x1="77" y1="95" x2="185" y2="96"></line>
<line stroke="green" x1="169" y1="135" x2="93" y2="56"></line>
<circle class="outer" cx="131" cy="95" r="55"></circle>
<circle cx="130" cy="95.40" r="20.8"></circle>

You will need to draw a path with a hole for the clipping path:
<path d="M0,0 0,194 260,194 260,0 0,0
M150.8, 95.40A20.8, 20.8 0 0 1 109.2 95.40A20.8, 20.8 0 0 1 150.8, 95.40" />
The first part of the path (M0,0 0,194 260,194 260,0 0,0) is drawing a rectangle as big as the svg canvas. The second part (M150.8, 95.40A20.8, 20.8 0 0 1 109.2 95.40A20.8, 20.8 0 0 1 150.8, 95.40) is drawing a circle as big as the inner circle and in the same position.
Next you wrap the lines in a group and you clip the group.
svg{border:1px solid;}
circle{fill:none;stroke:black}
<svg class="stack" aria-hidden="true" width="260" height="194" viewbox="0 0 260 194">
<defs>
<clipPath id="clip">
<path d="M0,0 0,194
260,194 260,0 0,0 M150.8, 95.40A20.8, 20.8 0 0 1 109.2 95.40A20.8, 20.8 0 0 1 150.8, 95.40" />
</clipPath>
</defs>
<g clip-path="url(#clip)">
<line stroke="teal" x1="131" y1="40" x2="130" y2="149"></line>
<line stroke="dodgerblue" x1="91" y1="133" x2="170" y2="58"></line>
<line stroke="purple" x1="77" y1="95" x2="185" y2="96"></line>
<line stroke="green" x1="169" y1="135" x2="93" y2="56"></line>
</g>
<circle class="outer" cx="131" cy="95" r="55"></circle>
<circle cx="130" cy="95.40" r="20.8"></circle>
</svg>

Creating custom icon for FontAwesome 5

I'm trying to create my custom icon for FontAwesome using this tool: https://editor.method.ac/
It came with code:
<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg">
<!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
<g>
<title>background</title>
<rect fill="#fff" id="canvas_background" height="514" width="514" y="-1" x="-1"/>
<g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
<rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
</g>
</g>
<g>
<title>Layer 1</title>
<path id="svg_3" d="m367.967458,193.5l-23.50001,13.50001c0.00001,0.49999 -65.99999,-58.00001 -118,-53.00001c-52,5 -55.5,39.500009 -49,71.00001c6.5,31.5 14,63 64,111.5c50.00001,48.50001 97.50001,63.00001 119.50001,62.50001c22,-0.5 22.5,-1.5 29,-4c6.5,-2.5 8,-4.5 8,-4.5c0,0 59.49997,60.49998 61.99999,63.49999c2.50002,3.00001 -14.99998,42.50001 -80.49999,44.50001c-65.5,2 -162.50001,-44 -231.50001,-113c-69.00001,-69.00001 -100.50001,-130.00001 -103.50001,-213.00002c-3,-83.000009 62.500008,-97 90.500009,-100c28.000001,-3 85.000011,8.5 132.500011,39c47.5,30.5 68.99999,43.00001 100.5,82z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#fff"/>
<path id="svg_5" d="m258.451949,258.000015l47.75001,-31.000008c0.249993,0.000007 81.249998,71.000011 105.75,36.500009c24.500001,-34.500002 -27.000002,-96.000006 -55.000004,-127.500008c-28.000001,-31.500002 -90.000005,-55.500003 -90.249997,-55.500005c0.249992,0.000002 -57.750012,-66.500002 -58.500002,-68.000003c0.000006,0.499993 46.500009,12.499994 106.500012,54.999997c60.000004,42.500002 129.000008,139.500008 141.000009,170.00001c12,30.500002 19.000001,75.500004 -3.5,94.000005c-22.500002,18.500001 -64.000004,8.000001 -90.500006,-2.5c-26.500001,-10.5 -64.500004,-41.000002 -71.500004,-45.000002c-7.000001,-4.000001 -31.500002,-25.500002 -31.750018,-25.999995z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#fff"/>
</g>
</svg>
It looks good in browser.
So I prepared code for FontAwesome using this guide: https://github.com/FortAwesome/Font-Awesome/wiki/Customize-Font-Awesome
const faMyCustomIcon = {
prefix: 'fac',
iconName: 'my-custom-icon',
icon: [512, 512, [], 'e001', 'm367.967458,193.5l-23.50001,13.50001c0.00001,0.49999 -65.99999,-58.00001 -118,-53.00001c-52,5 -55.5,39.500009 -49,71.00001c6.5,31.5 14,63 64,111.5c50.00001,48.50001 97.50001,63.00001 119.50001,62.50001c22,-0.5 22.5,-1.5 29,-4c6.5,-2.5 8,-4.5 8,-4.5c0,0 59.49997,60.49998 61.99999,63.49999c2.50002,3.00001 -14.99998,42.50001 -80.49999,44.50001c-65.5,2 -162.50001,-44 -231.50001,-113c-69.00001,-69.00001 -100.50001,-130.00001 -103.50001,-213.00002c-3,-83.000009 62.500008,-97 90.500009,-100c28.000001,-3 85.000011,8.5 132.500011,39c47.5,30.5 68.99999,43.00001 100.5,82zm258.451949,258.000015l47.75001,-31.000008c0.249993,0.000007 81.249998,71.000011 105.75,36.500009c24.500001,-34.500002 -27.000002,-96.000006 -55.000004,-127.500008c-28.000001,-31.500002 -90.000005,-55.500003 -90.249997,-55.500005c0.249992,0.000002 -57.750012,-66.500002 -58.500002,-68.000003c0.000006,0.499993 46.500009,12.499994 106.500012,54.999997c60.000004,42.500002 129.000008,139.500008 141.000009,170.00001c12,30.500002 19.000001,75.500004 -3.5,94.000005c-22.500002,18.500001 -64.000004,8.000001 -90.500006,-2.5c-26.500001,-10.5 -64.500004,-41.000002 -71.500004,-45.000002c-7.000001,-4.000001 -31.500002,-25.500002 -31.750018,-25.999995z']
};
Problem is that result is this:
And should be this: (or near)
What I'm doing wrong?

This is not the answer you are expecting. I would have putted it as a comment but I need to add some code.
This is how a FontAwesome icon is looking like in SVG:
no width attribute,
no height attribute,
a viewBox attribute
inside nothing else but one path with a fill="currentColor" attribute
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="address-book" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-address-book fa-w-14 fa-7x"><path fill="currentColor" d="M436 160c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h320c26.5 0 48-21.5 48-48v-48h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20zm-228-32c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zm112 236.8c0 10.6-10 19.2-22.4 19.2H118.4C106 384 96 375.4 96 364.8v-19.2c0-31.8 30.1-57.6 67.2-57.6h5c12.3 5.1 25.7 8 39.8 8s27.6-2.9 39.8-8h5c37.1 0 67.2 25.8 67.2 57.6v19.2z" class=""></path></svg>
Your SVG has:
a width attribute,
a height attribute,
NO viewBox attribute
inside 2 groups the second one with 2 paths.
I think you should try using only one path. In order to join the 2 paths in one path ypu can do something like this:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path id="svg_3" d="m367.967458,193.5l-23.50001,13.50001c0.00001,0.49999 -65.99999,-58.00001 -118,-53.00001c-52,5 -55.5,39.500009 -49,71.00001c6.5,31.5 14,63 64,111.5c50.00001,48.50001 97.50001,63.00001 119.50001,62.50001c22,-0.5 22.5,-1.5 29,-4c6.5,-2.5 8,-4.5 8,-4.5c0,0 59.49997,60.49998 61.99999,63.49999c2.50002,3.00001 -14.99998,42.50001 -80.49999,44.50001c-65.5,2 -162.50001,-44 -231.50001,-113c-69.00001,-69.00001 -100.50001,-130.00001 -103.50001,-213.00002c-3,-83.000009 62.500008,-97 90.500009,-100c28.000001,-3 85.000011,8.5 132.500011,39c47.5,30.5 68.99999,43.00001 100.5,82z
M258.451949,258.000015l47.75001,-31.000008c0.249993,0.000007 81.249998,71.000011 105.75,36.500009c24.500001,-34.500002 -27.000002,-96.000006 -55.000004,-127.500008c-28.000001,-31.500002 -90.000005,-55.500003 -90.249997,-55.500005c0.249992,0.000002 -57.750012,-66.500002 -58.500002,-68.000003c0.000006,0.499993 46.500009,12.499994 106.500012,54.999997c60.000004,42.500002 129.000008,139.500008 141.000009,170.00001c12,30.500002 19.000001,75.500004 -3.5,94.000005c-22.500002,18.500001 -64.000004,8.000001 -90.500006,-2.5c-26.500001,-10.5 -64.500004,-41.000002 -71.500004,-45.000002c-7.000001,-4.000001 -31.500002,-25.500002 -31.750018,-25.999995z" fill="currentColor" />
</svg>
I hope it helps.

SVG Position text relative to parent <g>

I need to place text relative to the parent <g>.
Currently, I have a path and a text element wrapped in a <g>. But all the text coordinates are relative to the outer most <g>.
<svg width="1000" height="550">
<g transform="translate(500,275)" stroke-width="2" stroke="black">
<g>
<path d="M1.6838893488276108e-14,-275A275,275 0 0,1 238.15698604072065,137.49999999999994L0,0Z" id="path_0" style="fill: rgb(17, 17, 17);"></path>
<text transform="translate(100, 100)" class="tooltipText" stroke-width="0" fill="white" style="text-anchor: middle;">text</text>
</g>
<g>
<path d="M238.15698604072065,137.49999999999994A275,275 0 0,1 -238.1569860407206,137.50000000000009L0,0Z" id="path_1" style="fill: rgb(34, 34, 34);"></path>
<text transform="translate(100, 100)" class="tooltipText" stroke-width="0" fill="white" style="text-anchor: middle;">text</text>
</g>
<g>
<path d="M-238.1569860407206,137.50000000000009A275,275 0 0,1 -5.051668046482832e-14,-275L0,0Z" id="path_2" style="fill: rgb(51, 51, 51);"></path>
<text transform="translate(100, 100)" class="tooltipText" stroke-width="0" fill="white" style="text-anchor: middle;">text</text>
</g>
</g>
</svg>

It's hard to see which part of this you're having trouble with, but I'll explain as best I can.
Your SVG picture is 1000 pixels wide and 550 pixels tall:
<svg width="1000" height="550">
The top level node inside this SVG is a <g> node that moves the origin of the coordinate system from the top left corner to (500,275) (i.e., the middle of the drawing area; Y coordinates increase from top to bottom in SVGs)
<g transform="translate(500,275)" ... >
All the children of this top-level node will therefore use this transformed coordinate system. You have added additional <g> nodes as children of this top-level node, but they don't really do anything in this instance because they contain no attributes:
<g>
As a result, the <path> nodes will still be using the same transformed coordinate system that was set up by the top-level <g>. These all produce circular sectors with an apex at (0,0). And since (0,0) corresponds to the middle of the drawing area in this transformed coordinate system, that is where they end up:
<path d="M0-275A275 275 0 0 1 238 137.5L0 0Z" style="fill: rgb(17, 17, 17);"></path>
<path d="M238 137.5A275 275 0 0 1-238 137.5L0 0Z" style="fill: rgb(34, 34, 34);"></path>
<path d="M-238 137.5A275 275 0 0 1 0-275L0 0Z" style="fill: rgb(51, 51, 51);"></path>
Your <text> nodes are also drawn in this coordinate system, but offset by (100,100) because you added a transform attribute to shift them 100 pixels down and 100 pixels to the right:
<text transform="translate(100, 100)" ... >text</text>
So the end result is that all three of your text nodes are drawn at coordinates of (600,375) relative to the top left corner of the drawing area. If you want the text to appear somewhere else, you'll have specify a different offset. For example:
<text transform="translate(120,-80)" ... >text</text>
<text transform="translate(0,160)" ... >text</text>
<text transform="translate(-120,-80)" ... >text</text>
<svg width="1000" height="550">
<g transform="translate(500,275)" stroke-width="2" stroke="black">
<g>
<path d="M0-275A275 275 0 0 1 238 137.5L0 0Z" style="fill: rgb(17, 17, 17);"></path>
<text transform="translate(120,-80)" class="tooltipText" stroke-width="0" fill="white" style="text-anchor: middle;">text</text>
</g>
<g>
<path d="M238 137.5A275 275 0 0 1-238 137.5L0 0Z" style="fill: rgb(34, 34, 34);"></path>
<text transform="translate(0,160)" class="tooltipText" stroke-width="0" fill="white" style="text-anchor: middle;">text</text>
</g>
<g>
<path d="M-238 137.5A275 275 0 0 1 0-275L0 0Z" style="fill: rgb(51, 51, 51);"></path>
<text transform="translate(-120,-80)" class="tooltipText" stroke-width="0" fill="white" style="text-anchor: middle;">text</text>
</g>
</g>
</svg>

Resources