How to Center Elements in SVG

Center any SVG element â€” text, shapes, or groups â€” horizontally and vertically using SVG attributes and CSS, with no guesswork.

Preset:

Colors:

Drop your image here

Supports PNG, JPG, BMP, WEBP up to 5MB

VTracer vectorization + SVGO optimizationPrivacy protected

Center Text in SVG

Centering text in SVG uses specific attributes for both axes.

Horizontal center: x='50%' text-anchor='middle' (center on the mid-axis)
Vertical center: y='50%' dominant-baseline='middle' (vertical center on y)
Full center: <text x='50%' y='50%' text-anchor='middle' dominant-baseline='middle'>
Percentage x/y works relative to the SVG coordinate space
Dynamic: use getBBox() to get text dimensions and calculate center position in JS

Center Shapes Using transform

For shapes like circles, rectangles, and groups, use SVG transform to center.

Circle: set cx and cy to the center of your SVG â€” no transform needed
Rect: calculate x = (svgWidth - rectWidth) / 2, y = (svgHeight - rectHeight) / 2
Group: use transform='translate(centerX, centerY)' and define internal coordinates from origin
JS: getBBox().x + getBBox().width/2 for any element's center point
Inkscape: select element, Align and Distribute > Center on Vertical Axis + Center on Horizontal Axis

Center SVG in HTML Container (CSS)

Centering an SVG in its HTML container uses standard CSS layout.

Flexbox: .container { display: flex; justify-content: center; align-items: center; }
Grid: .container { display: grid; place-items: center; }
Inline SVG in text flow: vertical-align: middle on the <svg> element
img SVG: add display: block; margin: 0 auto; for block-level horizontal center
Absolute positioning: top: 50%; left: 50%; transform: translate(-50%, -50%)

Frequently Asked Questions

How do I center an SVG icon in a button?

Use Flexbox on the button: button { display: inline-flex; align-items: center; justify-content: center; }. The SVG icon centers automatically within the button.

Why is my SVG text not centering correctly?

Check that text-anchor='middle' is set AND that the x position is at the center of the desired text area. text-anchor controls alignment around the x position, not the container center.

How do I center a group of paths within an SVG?

Use transform on the <g> element. Calculate the group's center with getBBox(), then: g.setAttribute('transform', `translate(${cx - bboxCx}, ${cy - bboxCy})`).

Can I use CSS margin: auto to center an SVG element within SVG?

No â€” CSS margin doesn't apply to SVG elements inside the SVG coordinate space. Use SVG attributes (x, y, cx, cy) or transform for positioning within SVG.

How do I center an SVG logo in a navbar?

Place the SVG inside a nav container with display: flex and align-items: center. For absolute centering in the navbar, use position: absolute; left: 50%; transform: translateX(-50%) on the logo wrapper.

Ready to Convert Your Image to SVG?

Free online converter — no sign-up, no watermarks, results in under 3 seconds.

Try It Free — Convert Image to SVG