About Compare All Tools

SVG Center Content

Center SVG artwork cleanly inside the current canvas and viewport.

SVG artwork centering

Center SVG artwork inside the canvas cleanly.

Paste SVG code, upload a file or try the built-in sample. The tool computes the bounding box of your artwork and applies a single translate transform to center it inside the existing viewBox. Path coordinates, viewBox and dimensions are never rewritten.

Local only Preserves viewBox Transform only SVG output
Drop an SVG file here or paste SVG markup into the input editor below.
Alignment—
Content bounds—
Translation—
Bg ignored—
Output size—
Status—
Preview

Original vs centered SVG preview

Original SVG No SVG

Paste SVG markup or try the sample to preview the source.

Centered SVG Waiting

Click Center Content to preview the result.

Processed locally viewBox: — Content bounds: — Background: — Scripts: — Events: — External assets: —
Input

SVG markup

Paste a complete SVG document or inline SVG element. Click Center Content to center the artwork inside the existing viewBox.

Output

Centered SVG

The SVG with centered artwork appears here after clicking Center Content. Copy or download using the buttons in the Settings panel.

How It Works

SVG Center Content computes the bounding box of your visible artwork and applies a translate transform to move it to the geometric center of the existing canvas. Paste SVG markup, upload a file, or try the built-in sample. The tool parses your SVG with the browser's DOMParser and identifies the canvas dimensions from the viewBox, falling back to width and height attributes, with a 512x512 default. It then detects which direct children are background candidates — full-canvas rect elements that should not skew the artwork center. The remaining visible elements are temporarily inserted into an off-screen SVG so the browser can compute precise bounding boxes via getBBox(), which correctly handles any existing rotate, scale, or skew transforms on child groups. Once the content bounds are known, SVG Center Content calculates the dx and dy needed to align the content center with the canvas center. It then wraps all non-structural, non-background children in a single g transform=translate(dx dy) element. The original viewBox, width, height, defs, style, and script elements are preserved exactly. Everything runs in your browser — no file is uploaded.

Use Cases

  • Centering off-center icons and logos that were exported from Figma or Illustrator with accidental padding on one side, before embedding them in a design system component library
  • Aligning artwork exported from a presentation slide that shifted the artwork away from the canvas origin, making the SVG difficult to position correctly in CSS
  • Preparing SVG files for CSS background-image or mask use where the artwork must sit at the geometric center of its viewBox to scale and position correctly with background-size and background-position
  • Fixing SVG sprites where individual icon slots have artwork in an unexpected position inside their allocated viewBox slot, causing misalignment when rendered at different sizes
  • Centering SVG animations where the transform-origin is expected to be at the center of the viewport and off-center artwork causes the animation to rotate or scale around the wrong point

FAQ

How does SVG Center Content calculate the bounding box?

The tool temporarily inserts the visible artwork elements into a hidden off-screen SVG in your browser and calls the browser's native getBBox() method on a wrapper group. This accounts for all existing child transforms including rotate, scale, and skew — it is not limited to simple rectangles or paths. The bounding box is in the SVG viewBox coordinate space.

Will the tool modify path coordinates or the viewBox?

No. SVG Center Content only adds a g element with a translate transform around the visible artwork. Path coordinates, bezier handles, arc flags, viewBox values, and width and height attributes are never modified. The tool is strictly additive — it never rewrites existing geometry.

What happens to existing transforms on child elements?

Existing transforms on child elements are preserved exactly. The new translate wrapper is added as a parent group around the children. Child transforms compose correctly with the parent translate — for example, a rotated group inside the translate wrapper continues to rotate around its own origin, but the group as a whole is now positioned at the center of the canvas.

What counts as a background candidate?

A background candidate is a rect element that covers at least 95% of the canvas area, has a non-transparent fill, and appears within the first few visible elements of the SVG document. These are the full-canvas background fills that tools like Figma and Illustrator add automatically. When Ignore Background Candidates is on, these elements are excluded from the bounding box calculation and stay at the root level of the SVG — they are never removed from the output.

What does the tool do when the artwork is already centered?

If the calculated translation is less than 0.5 SVG units in both axes, the tool reports that the content is already centered and produces output with a translate(0 0) wrapper. The SVG is still valid and the output is complete — nothing is skipped.

Does SVG Center Content upload my file?

No. All processing runs entirely in your browser using DOMParser, getBBox(), and XMLSerializer. Your SVG file is never sent to any server.