Reuse SVG elements with different path values - html

I need to make circle sectors like shown here , however i'd like to define the sector svg once and then reuse it with different values for d in path. Something like
<svg>
<defs id="circle>
<g>
<circle cx="115" cy="115" r="110"></circle>
<path d="M115,115 L115,5 A110,110 1 0,1 225,115 z"></path>
<circle cx="115" cy="115" r="50"></circle>
</g>
</defs>
</svg>
<svg>
<use d="M115,115 L115,5 A110,110 1 0,1 115,125 A110,110 1 0,1 35,190 z" xlink:href = "#circle/>
</svg>
<svg>
<use d="M115,115 L115,5 A110,110 1 0,1 115,225 A110,110 1 0,1 35,190 z" xlink:href = "#circle/>
</svg>
Is this possible?


You can't quite do it like that, but if you're willing to consider other options here's a way to get a similar visual result:
<svg class="pie">
<defs>
<g id="pie">
<circle cx="115" cy="115" r="80" stroke-dasharray="none"/>
<path id="p" transform="rotate(90, 115, 115)" d="
M 115, 115
m -80, 0
a 80,80 0 1,0 160,0
a 80,80 0 1,0 -160,0
" />
</g>
</defs>
<use xlink:href="#pie" stroke-dashoffset="52"/>
</svg>
<svg class="pie">
<use xlink:href="#pie" stroke-dashoffset="125.5"/>
</svg>
<svg class="pie">
<use xlink:href="#pie" stroke-dashoffset="300"/>
</svg>
See fiddle or this page. You could also use CSS for setting the stroke-dashoffset values on the <use> elements.
In my example each pie diagram is also transparent in the middle, as you can see from the lime green page background. The rotate transform on the path is there to get the start of the stroke to begin at 12 o'clock.


No. That isn't possible. If the paths are different you aren't really reusing them.
If you had two occurrences of the same sector angle, just different positions in the circle, you could reuse the first one just with a different rotation. But that's as near as you are going to get.

Related

Border radius in SVG

I have the following SVG:
<svg
id="Capa_1"
enable-background="new 0 0 80 70"
height="64"
width="64"
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<g>
<path
d="m256 470-195-131.976v-380.024h390v380.024zm180-140.003h.293z"
fill="#00C7B2"
/>
</g>
<path
d="m256 480 195-131.976v-380.024h-195z"
fill="#00957A"
/>
</g>
</svg>
I want to get border rounded or set border-radius. Like this:
How can I achieve that rounded corner effect? Please look into this.

I am not sure there is way to round SVG in HTML (like apply CSS?), but you can use an SVG to the editor to the edits. I use Figma to edit this, but any vector-based graphic solution should be fine I guess.
<svg width="48" height="59" viewBox="0 0 48 59" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="48" height="19" rx="4" fill="#00C7B2"/>
<path d="M25.8629 58.0196C24.6968 58.6333 23.3032 58.6333 22.1371 58.0196L2.13714 47.4942C0.822862 46.8025 0 45.4396 0 43.9545V14C0 11.7909 1.79086 10 4 10H44C46.2091 10 48 11.7909 48 14V43.9545C48 45.4396 47.1771 46.8025 45.8629 47.4942L25.8629 58.0196ZM46.1538 45.6013H46.1899H46.1538Z" fill="#00C7B2"/>
<path d="M4.40314 5.48826C2.21424 5.48826 2.8797 5.48826 4.40314 5.48826L23.7245 0.137201C21.9918 0.617057 23.9735 0.068235 24.2199 0V58.4334C24.2199 58.4334 25 58.5 27 57.5L46 47.3743C47.3063 46.6855 48 45.1546 48 43.6696V3.99145C48 1.78704 46.2255 4.52027e-06 44.0366 4.52027e-06L24.2199 0L4.40314 5.48826Z" fill="#00957A"/>
</svg>

Don't use a text editor to do that. Use an SVG editor like Inkscape. This is particularly important in this case because there is no easy way to make a <path> round. If it would be a box then it would be possible. Opening it in Inkscape and converting the corners into Beziers you can achieve something this:
<svg
height="100"
width="100"
viewBox="0 0 1000 1000"
version="1.1"
id="svg4690">
<g
id="g4663">
<g
id="g4659"
transform="translate(91.89342,225.31329)">
<path
d="M 256,470 61,338.024 61.42095,-0.4989023 c 0,0 -3.857948,-17.6595987 10.573732,-32.2960387 14.431681,-14.636439 34.702398,-12.24525 34.702398,-12.24525 L 354.62126,-43.308172 398.3299,-5.9441259 451,338.024 Z M 436,329.997 h 0.293 z"
id="path4657"
inkscape:connector-curvature="0"
style="fill:#00c7b2"
sodipodi:nodetypes="ccczcccccccc" />
</g>
<path
d="m 347.89342,694.05631 195,-131.976 V 226.67058 c 0,0 2.47881,-17.96849 -12.88028,-31.30308 -15.3591,-13.33459 -38.72388,-11.98828 -38.72388,-11.98828 L 347.89342,182.0563 Z"
id="path4661"
inkscape:connector-curvature="0"
style="fill:#00957a"
sodipodi:nodetypes="ccczccc" />
</g>
</svg>
Also, note that the original SVG is incorrectly positioned and the top of the green and dark-green areas do not match:
However in the snippet this is not visible because this area is out of the viewbox. This is another good reason to use Inkscape.
Another option to make round corners is to use boxes. Boxes can be rounded through the ry attribute. Here are 3 boxes with mildly rounded, rounded and extra rounded settings. You only need to position them in the right place.
<svg
height="100"
width="100"
viewBox="0 0 1000 1000"
version="1.1"
id="svg4690">
<g
id="g4663">
<g
id="g4659"
transform="translate(91.89342,225.31329)">
<path
d="M 256,470 61,338.024 61.42095,-0.4989023 c 0,0 -3.857948,-17.6595987 10.573732,-32.2960387 14.431681,-14.636439 34.702398,-12.24525 34.702398,-12.24525 L 354.62126,-43.308172 398.3299,-5.9441259 451,338.024 Z M 436,329.997 h 0.293 z"
id="path4657"
inkscape:connector-curvature="0"
style="fill:#00c7b2"
sodipodi:nodetypes="ccczcccccccc" />
</g>
<path
d="m 347.89342,694.05631 195,-131.976 V 226.67058 c 0,0 2.47881,-17.96849 -12.88028,-31.30308 -15.3591,-13.33459 -38.72388,-11.98828 -38.72388,-11.98828 L 347.89342,182.0563 Z"
id="path4661"
inkscape:connector-curvature="0"
style="fill:#00957a"
sodipodi:nodetypes="ccczccc" />
<rect
style="opacity:0.5;fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:8;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
id="rect4694"
width="81.383575"
height="81.383575"
x="170.25067"
y="196.41048"
ry="8.6862621" />
<rect
ry="13.363494"
y="291.82568"
x="170.25067"
height="81.383575"
width="81.383575"
id="rect4696"
style="opacity:0.5;fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:8;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
<rect
style="opacity:0.5;fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:8;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
id="rect4698"
width="81.383575"
height="81.383575"
x="170.25067"
y="386.77319"
ry="33.007805" />
</g>
</svg>

SVG doesn't display correctly

Here's the how my SVG is supposed to look like.
below is how it looks when I code it in my web.
I'm not really sure what's going on here. Any help would be much appreciated. Below is my SVG code. Thanks in advance.
<svg class="product-icon" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 900">
<defs>
<style>.cls-1,.cls-2{fill:#fff;}.cls-1,.cls-2,.cls-4,.cls-5{stroke:#333;stroke-miterlimit:10;}.cls-1{stroke-width:3.79px;}.cls-2{stroke-width:5px;}.cls-3{fill:#333;}.cls-4,.cls-5{fill:none;stroke-linecap:round;}.cls-4{stroke-width:3px;}.cls-5{stroke-width:2.27px;}</style>
</defs>
<circle class="cls-1" cx="460.7" cy="282.87" r="48.53"/>
<circle class="cls-2" cx="519.36" cy="325.31" r="64.01"/>
<rect class="cls-3" x="262.17" y="399.01" width="384.48" height="31.32" rx="15.66"/>
<path class="cls-3" d="M284.36,441.13,301.1,552.91a45,45,0,0,0,44.51,38.34h217.6a45,45,0,0,0,44.5-38.34l16.74-111.78Z"/>
<path class="cls-3" d="M453,392.53h-82.8c0-9.35,3.12-21.17,8.36-28.06a0,0,0,0,0,0,0,41,41,0,0,1,32.67-16.19H412a40.87,40.87,0,0,1,29,12C448.43,367.71,453,381.19,453,392.53Z"/>
<path class="cls-3" d="M436.92,302.87a13.9,13.9,0,0,1-15.47,21.65l-8.06,17.27L410.85,284l-3.54,55.67-7.06-15.13a13.92,13.92,0,0,1-4.44.74,13.53,13.53,0,0,1-1.81-.12,13.9,13.9,0,0,1-9.22-22.27q-.36-.31-.69-.66a16.43,16.43,0,0,1,11.25-28,17.85,17.85,0,0,1,32.62.12,16.44,16.44,0,0,1,9,28.52Z"/>
<path class="cls-3" d="M366.71,392.53H288.56l-4-7.39a41.4,41.4,0,0,1,24.28-53.27c.82-.31,1.64-.59,2.47-.84a41.62,41.62,0,0,1,26.77.94C364.37,341.79,366.71,392.53,366.71,392.53Z"/>
<path class="cls-3" d="M391.58,348.27c-14.7,3.83-23,19.65-23,19.65s-9.68-51-51.63-41.93c1.2-6.61,2.68-12.13,4.41-14.4a38.86,38.86,0,0,1,31-15.34H353a38.71,38.71,0,0,1,25.09,9.18q.33.35.69.66A13.9,13.9,0,0,0,388,328.36C389.39,335,390.92,342.11,391.58,348.27Z"/>
<path class="cls-3" d="M381.81,241.65a15.59,15.59,0,0,0-13.64-15.47,16.94,16.94,0,0,0-30.93-.12,15.57,15.57,0,0,0-10,27.15,13.18,13.18,0,0,0,10.45,21.23,13.32,13.32,0,0,0,4.21-.7l6.69,14.34L352,235.31l2.41,54.79L362,273.74a13.19,13.19,0,0,0,14.66-20.53A15.5,15.5,0,0,0,381.81,241.65Z"/>
<path class="cls-3" d="M317.43,267.16a16.46,16.46,0,0,0-19.2-10.26,17.86,17.86,0,0,0-30.6,11.31,16.43,16.43,0,0,0,.14,30.53,13.9,13.9,0,0,0,18.17,17.11,13.67,13.67,0,0,0,3.9-2.25l11.91,11.71-16.18-53.39,22.63,53.26,1.5-19a13.7,13.7,0,0,0,4.41-.86,13.92,13.92,0,0,0,2.5-24.84A16.38,16.38,0,0,0,317.43,267.16Z"/>
<path class="cls-3" d="M559.1,334.45a52.33,52.33,0,0,0-10.77,1.11,11.64,11.64,0,0,0-9.16,10.58,20.41,20.41,0,0,0,7.43-2.49,1.5,1.5,0,0,1,1.49,2.6,23.18,23.18,0,0,1-23.09,0,1.5,1.5,0,1,1,1.49-2.6,20.66,20.66,0,0,0,5,2,11.73,11.73,0,0,0-9.72-10.5,53,53,0,0,0-8.78-.73,52.3,52.3,0,0,0-52,58.08H611.1a54.68,54.68,0,0,0,.32-5.76A52.31,52.31,0,0,0,559.1,334.45Z"/>
<path class="cls-4" d="M535.58,351.74a54.85,54.85,0,0,1,2.64-23.52A52.17,52.17,0,0,1,543,318.16"/>
<path class="cls-3" d="M533.18,301.9c-.09-.11-.19-.21-.28-.31-7.58-8.15-15.6-5.68-23.23-5.15a28.59,28.59,0,0,1-3.33.08c-20.51-.81-21-14.8-21-14.8s-6.13,24,10.4,40.7c13.35,13.48,30.33,10,38,1-18.15-2.45-25.58-9.82-25.58-9.82s5.16,1.91,16.59,3.35c2.19.27,4.37.44,6.46.53a32.26,32.26,0,0,1,5.28.63S537.19,306.68,533.18,301.9Z"/>
<polygon class="cls-3" points="372.55 318.16 372.31 318.16 372.44 317.77 372.55 318.16"/>
<polygon class="cls-3" points="357.37 317.77 357.5 318.16 357.26 318.16 357.37 317.77"/>
<path class="cls-4" d="M524.8,274.42a54.68,54.68,0,0,0-2.64-23.52,52.15,52.15,0,0,0-4.75-10.06"/>
<path class="cls-3" d="M527.2,224.58c.09-.11.19-.21.29-.31,7.58-8.15,15.59-5.68,23.22-5.15a28.59,28.59,0,0,0,3.33.08c20.52-.81,21-14.8,21-14.8s6.13,24-10.39,40.7c-13.35,13.48-30.34,10-38,1,18.15-2.45,25.58-9.82,25.58-9.82s-5.16,1.91-16.59,3.35c-2.19.27-4.36.44-6.46.53a32,32,0,0,0-5.27.63S523.19,229.36,527.2,224.58Z"/>
<path class="cls-5" d="M463.65,244.29a41.6,41.6,0,0,1,2-17.84,38.84,38.84,0,0,1,3.61-7.62"/>
<path class="cls-3" d="M461.83,206.49l-.22-.23c-5.75-6.18-11.82-4.31-17.61-3.9a23.68,23.68,0,0,1-2.52.06c-15.56-.62-15.93-11.23-15.93-11.23s-4.64,18.22,7.89,30.86c10.12,10.22,23,7.58,28.82.77-13.76-1.85-19.4-7.45-19.4-7.45s3.92,1.45,12.58,2.54c1.66.21,3.31.34,4.9.41a23.37,23.37,0,0,1,4,.48S464.87,210.12,461.83,206.49Z"/>
</svg>

Remove the value of the class attribute in the svg element.
Looks like you have defined a style for that class and that is causing the svg to have a border specified.
So:
<svg class=“product-icon”
Becomes
<svg class=“”
Or you can leave the class in there and revisit the product-icon style definition and correct it. Not sure what it’s made of but perhaps removing the border property if it has it specified...
Also check if you have any other style rules that are targeting the svg element...
Inspect the the svg element in developer tools and check what styles are being applied. The actual svg code is correct.

SVG honeycomb polygon filling animation

Can I fill the SVG using path with animation?
Like this
<svg width="31" height="29" viewBox="0 0 31 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.00035 7.55536L2.02871 11.4285C1.39378 11.7812 1 12.4505 1 13.1768V21.8232C1 22.5495 1.39378 23.2188 2.02871 23.5715L9.00035 27.4446C9.61973 27.7887 10.3749 27.7794 10.9857 27.4202L17.514 23.58C18.1249 23.2206 18.5 22.5648 18.5 21.8561V13.1439C18.5 12.4352 18.1249 11.7794 17.514 11.42L10.9857 7.57981C10.375 7.22056 9.61973 7.21126 9.00035 7.55536Z" stroke="white" />
<g opacity="0.5">
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="10" y="0" width="21" height="17">
<path d="M10 17V6.5L11 0L30.5 13.5L22 10L10 17Z" fill="white" />
</mask>
<g mask="url(#mask0)">
<path d="M9.00035 7.55536L2.02871 11.4285C1.39378 11.7812 1 12.4505 1 13.1768V21.8232C1 22.5495 1.39378 23.2188 2.02871 23.5715L9.00035 27.4446C9.61973 27.7887 10.3749 27.7794 10.9857 27.4202L17.514 23.58C18.1249 23.2206 18.5 22.5648 18.5 21.8561V13.1439C18.5 12.4352 18.1249 11.7794 17.514 11.42L10.9857 7.57981C10.375 7.22056 9.61973 7.21126 9.00035 7.55536Z" fill="white" />
</g>
</g>
</svg>

For the animation I'm using a circle path (#test) and I'm animation the stroke-dasharray property. The path is clipped bu the hexagon path.
As an observation the radius of the animated path is 5 (half the needed radius) and the width of the stroke is 10. When using a stroke-width =10 the stroke is covering the path from the center and give the appearance of a circle with a radius r=10
let l = test.getTotalLength();// the total length of the path
let stroke = 0;// the initial length of the stroke
function Animation(){
requestAnimationFrame(Animation);
if(stroke < l){stroke += .1}else{stroke= 0};//increase the length of the stroke
//the stroke-dasharray's stroke (first parameter) == stroke
//the stroke-dasharray's gap (second parameter) == the total length of the path (l) minus the length of the stroke
test.setAttribute("stroke-dasharray",`${stroke} ${l-stroke}`)
}
Animation()
svg{border:solid; overflow:visible}
body{background:#ccc}
<svg viewBox="-1 0 22 23" width="200">
<clipPath id="clip">
<path id="thePath" d="M9.00035 1.55536L2.02871 5.42849C1.39378 5.78123 1 6.45047 1 7.17681V15.8232C1 16.5495 1.39378 17.2188 2.02871 17.5715L9.00035 21.4446C9.61973 21.7887 10.3749 21.7794 10.9857 21.4202L17.514 17.58C18.1249 17.2206 18.5 16.5648 18.5 15.8561V7.14389C18.5 6.43516 18.1249 5.77936 17.514 5.42002L10.9857 1.57981C10.375 1.22056 9.61973 1.21126 9.00035 1.55536Z"/>
</clipPath>
<desc>The next path is drawing a circle with the radius = 5. When using a stroke-width =10 the stroke is covering the path from the center and give the appearance of a circle with a radius r=10</desc>
<path d="M10,6.5 A5,5 0 0 1 10,16.5 A5,5 0 0 1 10,6.5 " id="test" fill="none" stroke="black" stroke-dasharray="0 62.43" stroke-width="10" clip-path="url(#clip)" />
<use xlink:href="#thePath" stroke="white" fill="none" />
</svg>

The idea is from #enxaneta answer, but I implement it without JavaScript and with original path. The explanation you can find in his answer. If you want to have the duration in 60 seconds then you can change dur="10s" to dur="60s".
svg{background:#956}
<svg width="180" viewBox="0 0 31 29">
<g transform="translate(6 -3)">
<clipPath id="clip">
<path id="path" d="M9.00035 7.55536L2.02871 11.4285C1.39378 11.7812 1 12.4505 1 13.1768V21.8232C1 22.5495 1.39378 23.2188 2.02871 23.5715L9.00035 27.4446C9.61973 27.7887 10.3749 27.7794 10.9857 27.4202L17.514 23.58C18.1249 23.2206 18.5 22.5648 18.5 21.8561V13.1439C18.5 12.4352 18.1249 11.7794 17.514 11.42L10.9857 7.57981C10.375 7.22056 9.61973 7.21126 9.00035 7.55536Z"/>
</clipPath>
<path d="M10,12.5A5,5 0 0 1 10,22.5A5,5 0 0 1 10,12.5" fill="none" stroke="#cab" stroke-dasharray="0 62.84" stroke-width="10" clip-path="url(#clip)">
<animate attributeName="stroke-dasharray"
values="0 31.4;10 21.4;20 11.4;31.4 0" begin="0s" dur="10s" fill="freeze"/>
</path>
<use xlink:href="#path" stroke="#fff" fill="none"/>
</g>
</svg>

How to draw S- Curve in SVG?

Please help me to draw something like this using SVG.
<svg class="slide__overlay" viewbox="0 0 100 100" preserveAspectRatio="none"><path class="slide__overlay-path" d="M0,0 L100,0 C25,50 50,75 0,100z" /></svg>
I got this code from an old question. But i need to rotate this.
Thanks

so the easiest way to do this is to just rotate your shape:
transform="(-90, 50, 50)"
<svg viewbox="0 0 100 100" width="200" height="200">
<path transform="rotate(-90, 50, 50)" d="M0,0 L100,0 C25,50 50,75 0,100z"/>
</svg>
but let me explain to you how the path commands work... in the end, we will have a much nicer solution to your rotation problem...
so let's look at your path commands.
"M0,0 L100,0 C25,50 50,75 0,100z"
M0,0 means move to the coordinate 0,0 which is the top left corner of your image.
L100,0 is the line to command which draws a line from our current point (0,0) to point 100,0. 100 to the right and 0 down is the right to corner.
next up is the curve to command C25,50 50,75 0,100. the last two numbers are the coordinates your path will end at. 0,100 is your bottom left corner. and then you have the two control points. to understand these a bit better I have added a circle at each of these coordinates to your original drawing:
<svg viewbox="0 0 100 100" width="200" height="200">
<path d="M0,0 L100,0 C25,50 50,75 0,100z" opacity="0.5"/>
<g>
<line x1="100" y1="0" x2="25" y2="50" stroke="green" stroke-width="0.5"/>
<circle cx="25" cy="50" r="2" fill="green"/>
</g>
<g>
<line x1="0" y1="100" x2="50" y2="75" stroke="blue" stroke-width="0.5"/>
<circle cx="50" cy="75" r="2" fill="blue"/>
</g>
</svg>
as you can see, the control points determine the angle of the curve at the endpoints as well as the slope of the curve itself.
so to rotate your curve we start with the endpoints again:
what was your top left corner (0,0) will end up on the bottom left (0,100).
M0,100
then the line to command will end up in the top left corner L0,0
and the curve to command will end up in the bottom right corner (100,100)
Cx1,y1 x2,y2 100,100
but where to draw your control points?
your first control point (25,50) will end up 25 from the bottom and 50 from the left so at 50,75
your second control point will have to end up 25 from the right and 50 from the bottom. so at 75,50
so the curve to command looks like this: C50,75 75,50 100,100
to wrap it all up, here is your rotated path:
<svg viewbox="0 0 100 100" width="200" height="200">
<path d="M0,100 L0,0 C50,75 75,50 100,100z" opacity="0.5" fill="red" />
<g>
<line x1="0" y1="0" x2="50" y2="75" stroke="red" stroke-width="0.5"/>
<circle cx="50" cy="75" r="2" fill="red"/>
</g>
<g>
<line x1="100" y1="100" x2="75" y2="50" stroke="red" stroke-width="0.5"/>
<circle cx="75" cy="50" r="2" fill="red"/>
</g>
</svg>

In order to exactly repeat the shape of the curve as in the figure, you need to load the image into a vector editor.
And draw nodal points along the contour
Save file as SVG.
And copy only path to another file
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100vw" height="100vh" viewBox="0 0 688 535" preserveAspectRatio="xMinYMin meet">
<path d="m4.8 11.6c0 0 34.3 55.4 56.1 79.3 25.6 28.2 55.7 52.3 86.6 74.5 36.1 26 75.7 46.7 114.6 68.1 26.5 14.5 54 27.3 81 40.9 27 13.6 54.2 26.8 81 40.9 23.2 12.2 46.6 23.9 68.9 37.7 27.6 17 54.9 35 80.1 55.3 25.6 20.6 50.3 42.7 72.1 67.3 13.2 14.9 35.3 48.1 35.3 48.1H4.8Z" style="fill:#5B7E95;stroke:none"/>
</svg>

You can use any of the online PNG to SVG convertor tools available. Also there are many opensource sites available for free hand drawing.
Examples
https://shapeshifter.design/
https://editor.method.ac/
For conversion of PNG to SVG you can use
https://image.online-convert.com/convert-to-svg
https://www.pngtosvg.com/

Why is SVG not rendering the object referenced by the <use> tag?

I've been trying to learn how to create graphics with SVG recently, and I am coming up against a problem when trying to display an image with the 'use' tag.
I've successfully played around with the 'use' tag to create duplicate objects in other svgs, so I'm not sure what's going on here.
My attempt to display this symbol with 'use' tag results in an invisible object with 0x0 as width x height
<svg xmlns="http://www.w3.org/2000/svg" width="466" height="466" viewBox="-40 -40 80 80">
<g id="yinyang">
<circle r="39"/>
<path d="M0,38a38,38 0 0 1 0,-76a19,19 0 0 1 0,38a19,19 0 0 0 0,38" fill="#fff"/>
<circle cy="19" r="5" fill="#fff"/>
<circle cy="-19" r="5"/>
<g/>
<use href="#yinyang" transform="scale(20)"/>
</svg>
How could i fix this?

Could be just a typo with your closing group tag <g/>
<svg xmlns="http://www.w3.org/2000/svg" width="466" height="466" viewBox="-40 -40 80 80">
<defs>
<g id="yinyang">
<circle r="39"/>
<path d="M0,38a38,38 0 0 1 0,-76a19,19 0 0 1 0,38a19,19 0 0 0 0,38" fill="#fff"/>
<circle cy="19" r="5" fill="#fff"/>
<circle cy="-19" r="5"/>
</g>
</defs>
<use href="#yinyang" transform="scale(0.9)"/>
</svg>
Also, the use block will repeat the shape that is already visible. If you just want to define it somewhere, and re-use it elsewhere, you can put inside of a <defs> block