Diagnose a Distorted SVG Before Changing Geometry

Compare where the fault appears

Keep the original file and an approved reference. Compare a standalone view with the intended page or application at the same dimensions. If only one placement is wrong, inspect its sizing, inherited CSS and resource references before changing paths. If every viewer shows the same fault, inspect the document itself. A different rendering does not by itself prove a browser bug or a corrupt namespace.

Framing and aspect ratio: a minimal example

Owned minimal source example: compare an SVG with viewBox="10 20 100 50" and a rectangle at x="10" y="20" width="100" height="50". The nonzero origin is intentional. Replacing the viewBox with "0 0 100 50" moves the viewing window relative to the artwork and can crop its right and lower edges. Restore the intended viewing window rather than moving every object to compensate.

A 100-by-50 coordinate area has a 2:1 ratio. If it is placed in a square viewport with preserveAspectRatio="none", the horizontal and vertical scale factors differ and a circle can become an ellipse. Decide whether stretching was intended; then correct the placement or aspect-ratio behavior. Do not automatically force every viewBox to start at zero.

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="10 20 100 50"><rect x="10" y="20" width="100" height="50" fill="#175a8a"/></svg>

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 100 50"><rect x="10" y="20" width="100" height="50" fill="#175a8a"/></svg>

The two images use the exact selectable SVG sources above; no geometry was moved. Restore the original viewBox to recover the framing. This minimal browser example does not establish behavior in another browser, editor or downstream application.

Transforms can be valid

A group translated by 20 units may be how the author positioned several objects together. Deleting that transform moves them; deleting a matrix without understanding it can change position, scale, rotation or skew. Inspect parent and child transforms and compare with the reference before changing a specific value.

In Inkscape, inspect the affected object and its parent groups, using XML inspection if needed. Preserve the reference and work on a copy. An unknown namespace is not enough to diagnose a parsing failure. Do not remove every transform or invisible object as a cleanup recipe.

Holes, fill rules and references

• If a hole fills in, inspect its subpaths and fill rule. A hole made by a compound path is different from a white object placed on top.
• If a fill, mask or clip disappears, check referenced IDs and definitions. A definition can be necessary even when it is not directly painted.
• If only a stroke looks wrong, compare inherited stroke styles and scaling before editing the centerline.
• If text changes, check font availability and text layout. A path-only copy avoids font lookup for those glyphs but loses text editability.

Malformed paths and a safe recovery route

Check whether the exact file parses and whether the affected path data was truncated or edited. Restore known-good data from the source document when available. A missing coordinate is not safely repaired by deleting whichever command looks unusual. Isolate one affected object before considering manual reconstruction.

SVG Cleanup may reject malformed or unsafe input; it does not promise to strip invalid paths or repair every document. Its optimizer can apply supported transforms but does not establish that an author’s transform was unintended. After a deliberate fix, reopen the file and compare it in the relevant viewers. A smaller file alone does not prove the distortion is fixed.

Separate transform defects from path defects

Both precise corrections produce SVG bytes identical to the valid control and identical local PNG renders. The red dot remains unchanged. This is a controlled example, not evidence that an unknown transform or long coordinate is always wrong; compare with an approved reference before editing.