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

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;
}

But I don't know how to centre the path in the circle, how would I do that?

user_2520800 · Answer

The moment you start with translate
you will continue to stack 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 to always see the viewBox size

End result:

One step (or giant leap) further is to write the as (part of) the d-path
using: http://complexdan.com/svg-circleellipse-to-path-converter/

user_2081719 · Answer

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;
}

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;
}

user_7897395 · Answer

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;
}

user_15373361 · Answer

Put your circle in group and use transform="translate(x, y)".

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

4 Answers