SVG TRANSFORMS TO PNG

Why did my SVG shape move in the PNG?

If a transformed SVG shape moves or gets cut off in the PNG, check its coordinate system, rotation center, and root viewBox before changing output resolution. Exporting more pixels does not bring artwork back inside the SVG viewport. First make the SVG preview show the entire transformed shape, then download the PNG and compare the two.

Preview and convert your SVG

QUICK TRIAGE

Separate position, orientation, and clipping

What you see	Inspect first	Small test
Shape rotates around an unexpected point	The center values in `rotate(angle cx cy)`, or the CSS transform origin.	Draw a dot at the intended center; temporarily remove other transforms.
Shape is present but partly cut off	The root `viewBox` after rotation or scaling.	Give a copy more viewport space on every side and compare previews.
Shape is the wrong size or position	Nested group transforms and their order.	Disable one transform at a time, starting with the innermost group.
Preview and downloaded PNG differ	Whether the preview displays the same SVG file and selected output settings.	Use the minimal SVG below, convert it, then inspect the actual downloaded PNG.

Keep a copy of your original SVG. These checks change only the diagnostic copy, so you can identify the responsible transform before editing production artwork.

CONTROLLED EXAMPLE

Rotate a rectangle around a known center

This complete SVG puts a visible center dot at (80, 60). The rectangle is rotated around that point and remains inside the 160 by 120 viewBox. Paste it into the converter, inspect the preview, and download the PNG as a baseline.

<svg xmlns="http://www.w3.org/2000/svg" width="320" height="240" viewBox="0 0 160 120">
  <rect width="160" height="120" fill="#f1f5f9"/>
  <rect x="50" y="40" width="60" height="40"
        rx="4" fill="#087f8c" transform="rotate(30 80 60)"/>
  <circle cx="80" cy="60" r="3" fill="#ed5b2d"/>
</svg>

The rotation center is in the SVG's viewBox coordinate space, not in the final PNG's pixel dimensions. Changing only the export scale should make the same composition larger, not move the center dot relative to the rectangle.

EXPORT WORKFLOW

Bring a complex design back in stages

Make a copy of the SVG and note its root width, height, and viewBox. Do not confuse the rendered pixel size with viewBox units.
Keep one transformed object and a center dot. If it rotates correctly, add its parent groups back one at a time.
For a rotate() attribute, check the angle and explicit center. For CSS transforms, inspect both transform-origin and transform-box; their reference box can differ from the SVG attribute example.
Look at the farthest corners of the transformed shape. Expand the root viewBox if the composition intentionally extends beyond its previous bounds.
Convert at the intended output settings, download, and open the PNG. Verify edges and alignment there, not just in the source editor.

Do not flatten blindly. Removing a transform may put artwork back at its untransformed coordinates but alter the intended design. Isolate the incorrect coordinate or clipping boundary first.

FAQ

Transform and PNG questions

Will a higher-resolution PNG fix a clipped rotated shape?

No. First include the transformed geometry in the SVG viewBox. A larger raster export only samples the same visible composition at more pixels.

Why does a CSS rotation behave differently from rotate() in an SVG attribute?

They may use different reference boxes or origins. Compare the explicit SVG rotation center with the CSS transform-origin and transform-box settings in your file.

Should I remove all nested group transforms?

Not by default. Temporarily disable them one at a time in a copy, find the first one that changes the symptom, then correct only that transform or its surrounding viewBox.

Check the geometry before choosing the PNG size.

Open the SVG to PNG converter

Published October 11, 2026.