How do I centre an svg path in an svg circle? - html

Question

I have an svg of the GitHub logo (taken from Simple Icons).
I would like to centre this svg in a circle so it looks something like this:
I've tried taking the path from the svg and creating another svg with that path and a circle, like:
svg {
padding: 5px;
fill: none;
stroke: black;
stroke-width: 1px;
stroke-linejoin: round;
}
svg:hover {
stroke: red;
}
<svg height="90" width="90">
<circle cx="48%" cy="48%" r="48%" />
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
</svg>
But I don't know how to centre the path in the circle, how would I do that?

Answer 1

The moment you start with translate
you will continue to stack <g> groups and translates like empty sushi plates at a party of 10
Instead, learn to edit MDN: SVG paths
Tool of choice: SVG Path Editor https://yqnn.github.io/svg-path-editor/
Copy/paste d-path
reduced presicion to 0 (for explanation purposes, but its always good to lower precision)
The path is:
M12 0c-7 0-12 5-12 12c0 5 3 10 8 11c1 0 1 0 1-1c0 0 0-1 0-2c-3 1-4-2-4-2C4 18 4 18 4 18
c-1-1 0-1 0-1c1 0 2 1 2 1c1 2 3 1 4 1c0-1 0-1 1-2c-3 0-6-1-6-6c0-1 1-2 1-3c0 0-1-2 0-3
c0 0 1 0 3 1c1 0 2 0 3 0c1 0 2 0 3 0c2-2 3-1 3-1c1 2 0 3 0 3c1 1 1 2 1 3c0 5-3 6-6 6
c0 0 1 1 1 2c0 2 0 3 0 3c0 0 0 1 1 1C21 22 24 18 24 12c0-7-5-12-12-12
Learn SVG: M and m are moves C and c are curves
capital M and C are absolute positioned points, we don't want those when we alter the path, because they would always stay at the absolute position
Convert to relative in the path editor
The path is:
m12 0c-7 0-12 5-12 12c0 5 3 10 8 11c1 0 1 0 1-1c0 0 0-1 0-2c-3 1-4-2-4-2c-1 0-1 0-1 0
c-1-1 0-1 0-1c1 0 2 1 2 1c1 2 3 1 4 1c0-1 0-1 1-2c-3 0-6-1-6-6c0-1 1-2 1-3c0 0-1-2 0-3
c0 0 1 0 3 1c1 0 2 0 3 0c1 0 2 0 3 0c2-2 3-1 3-1c1 2 0 3 0 3c1 1 1 2 1 3c0 5-3 6-6 6
c0 0 1 1 1 2c0 2 0 3 0 3c0 0 0 1 1 1c6-1 9-5 9-11c0-7-5-12-12-12
That first m12 0 is the start DRAWING position
In the editor we see:
the top-left is 0,0
the (square) image is 24 units wide
(SVG is a vector format, they are not pixels)
to add space for a circle the image needs to be moved 6 units right and 6 units down
That changes the viewBox="0 0 24 24" to: viewBox="0 0 30 30"
A viewBox="0 0 W H" is the most comfortable for your future SVG adventures.
A viewBox="-15 -15 15 15" is great when you do a lot of drawing around a (0,0) center point.
Now instead of using transform="translate(x y)",
you change the d-path start position from M12 0 to: M15 3
new x = x + 6/2 = 12 + 3 = 15
new y = y + 6/2 = 0 + 3 = 3
since it is the first path move, it doesn't matter if its m15 3 or M15 3
use an extra <rect> to always see the viewBox size
<svg height="90" width="90" viewBox="0 0 30 30">
<rect width="100%" height="100%" fill="pink"/>
<circle r="48%" cx="50%" cy="50%" fill="none" stroke-width="1" stroke="red" />
<path d="M15 3c-7 0-12 5-12 12c0 5 3 10 8 11c1 0 1 0 1-1c0 0 0-1 0-2c-3 1-4-2-4-2c-1 0-1 0-1 0
c-1-1 0-1 0-1c1 0 2 1 2 1c1 2 3 1 4 1c0-1 0-1 1-2c-3 0-6-1-6-6c0-1 1-2 1-3c0 0-1-2 0-3
c0 0 1 0 3 1c1 0 2 0 3 0c1 0 2 0 3 0c2-2 3-1 3-1c1 2 0 3 0 3c1 1 1 2 1 3c0 5-3 6-6 6
c0 0 1 1 1 2c0 2 0 3 0 3c0 0 0 1 1 1c6-1 9-5 9-11c0-7-5-12-12-12"/>
</svg>
End result:
One step (or giant leap) further is to write the <circle> as (part of) the d-path
using: http://complexdan.com/svg-circleellipse-to-path-converter/

Answer 2

The easier way would be drawing the circle and the path around the origin {x:0,y:0}. For this I've added a viewBox to the svg element whete the the first 2 paramaters (from x and from y) are negative. Now the center of the svg canvas is in the origin.
Next in order to center the circle around the origin I'm removing the cx and cy attributes (dhe default = 0)
In order to center the oath around the origin I'm calculating the bounding box and transtate the shape half width and half height to the left: transform="translate(-12,-12)"
console.log(pth.getBBox())
svg {
fill: none;
stroke: black;
stroke-width: 1px;
stroke-linejoin: round;
}
svg:hover {
stroke: red;
}
<svg height="90" width="90" viewBox="-20 -20 40 40">
<circle r="48%" />
<path id="pth" transform="translate(-12,-12)" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
</svg>

Answer 3

I used Illustrator to center the path and the circle
svg {
padding: 5px;
fill: none;
stroke: black;
stroke-width: 8;
stroke-linejoin: round;
}
svg:hover {
stroke: red;
}
<svg width="90" height="90" viewBox="0 0 600 600">
<circle cx="258.96" cy="258.96" r="257.88"/>
<path d="M258.96 81.73a181.74 181.74 0 00-57.47 354.15c9.09 1.71 12.42-3.91 12.42-8.74 0-4.32-.15-15.75-.23-30.89-50.55 11-61.21-24.38-61.21-24.38-8.27-21-20.22-26.58-20.22-26.58-16.46-11.27 1.27-11 1.27-11 18.25 1.27 27.84 18.72 27.84 18.72 16.2 27.79 42.54 19.76 52.93 15.11 1.64-11.75 6.32-19.76 11.51-24.31-40.36-4.54-82.78-20.17-82.78-89.81 0-19.84 7-36 18.7-48.76-2-4.59-8.18-23.06 1.59-48.1 0 0 15.22-4.88 50 18.63a171.34 171.34 0 0190.87 0c34.53-23.5 49.75-18.63 49.75-18.63 9.77 25 3.63 43.51 1.82 48.1 11.55 12.72 18.6 28.89 18.6 48.72 0 69.82-42.48 85.19-82.92 89.65 6.36 5.45 12.27 16.6 12.27 33.62 0 24.32-.23 43.86-.23 49.76 0 4.77 3.18 10.45 12.49 8.63a181.1 181.1 0 00124.73-172.16c0-100.36-81.37-181.73-181.73-181.73"/>
</svg>
Edit: An alternative way, numbers needed to be fine-tuned though, using a div instead of the circle:
div {
width: 90px;
height: 90px;
border: 3px solid black;
border-radius: 50%;
position: relative;
}
svg {
fill: none;
stroke: black;
stroke-width: 1;
stroke-linejoin: round;
}
svg path {
transform: translate(11px, 10.5px) scale(2.8);
}
.svg-container:hover {
border-color: red;
}
.svg-container:hover svg {
stroke: red;
}
<div class="svg-container">
<svg height="90" width="90">
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
</svg>
</div>

Answer 4

Put your circle in group and use transform="translate(x, y)".
<svg viewBox="0 0 400 400">
<g transform="translate(200, 200)">
<circle cx="0" cy="0" r="200" style="" fill="darkOrange"></circle>
</g>
</svg>