SVGEditor

Free online SVG editor — preview, share, React & PNG

Open source

Align SVG to Center

Translate geometry on X only so the content midpoint sits on the viewBox center — Y and the window stay put

Align to left? Align to leftCenter path? Center path

FAQ

Quick answers

How do I align an SVG to the center?
Click Align center. The tool measures the painted content, then translates it on X so the midpoint meets the viewBox center. Y does not move.
How is Align to center different from Center SVG Path?
Center Path shifts X and Y to the middle of the viewBox. Align to center is horizontal only — the pair of Align to left — so a baseline or header row stays put.
Does Align to center change the viewBox or Y?
No. The window and vertical coordinates stay. Move to origin if you want the bounding box at (0, 0) with a retightened viewBox.
How is Align to center different from Align to left?
Align to left flushes the content’s left edge to viewBox min-x. Align to center matches midpoints on X. Neither writes preserveAspectRatio.
Align to left → Center path → Move to origin → Crop SVG →

Privacy Terms

Open full editor →

Source

Type or paste SVG markup. The preview on the right updates as you type.

Ready

Live preview

PNG export · 2× for retina