Start with the document structure
SVG is an XML-based language for vector graphics. An svg element can contain shapes, paths, text, groups and attributes that affect what appears on the canvas. The small example below has a 40-by-40 viewBox and a circle centered at coordinates 20,20 with radius 12. The viewBox establishes a coordinate system; it is not a declaration that the image must occupy 40 CSS pixels on a page. Because SVG is XML-based, element nesting and quoted attributes matter. The generic XML formatter may help with XML structure, but the SVG formatter checks specifically for an svg root. Use the latter when the input is meant to be an SVG image.
Format to inspect, then minify a copy
The formatting tool adds indentation and line breaks so you can inspect the circle element, its fill and the viewBox separately. This is useful during editing or review. The SVG minifier aims for a more compact serialized form, which may be useful when shipping a file; it is not an image compressor that optimizes paths or chooses a different drawing. Keep the original source and compare the results in an actual renderer. A shorter string does not automatically mean identical rendering for every unusual SVG feature, especially if a tool has limited parser coverage. Treat a formatter or minifier error as a request to inspect the input, not as permission to guess missing XML.
- SVG XML with viewBox and circle
- format to inspect structure
- minify a copy → compare rendering
Check visible and nonvisible meaning
A diagram can include text, labels or a title that matters to readers and assistive technology. Do not remove such content merely to save bytes. SVG can also include styles, links, animation and scripting, so formatting is not sanitization of an untrusted upload. If the source came from outside your project, use a suitable security review and sanitization process before embedding it into a page. The example circle is intentionally simple: it illustrates structure without claiming that every SVG feature will survive a small browser-side formatter. Compare the displayed image, its dimensions and any textual alternatives after transformation.
Verify coordinates and embedding context
Inspect the viewBox first if an SVG renders too small, cropped or blank. The four viewBox numbers describe the visible coordinate rectangle; an element outside it may not be seen even though its XML is valid. Then check width and height in the place where the SVG is embedded, as CSS can control its displayed size. A shape’s fill and stroke also affect visibility. Formatting does not change the intended coordinates, and a minified file should be compared under the same page styles as the original. Open the file as a standalone image and in its actual page context when the graphic is important.
Use the tools as a controlled workflow
Paste a small representative SVG into the embedded formatter and confirm that the result remains readable. If the file is XML but not SVG, choose the XML formatter instead. After reviewing the SVG, copy its content into the SVG minifier, keep both versions and compare them visually in a browser at several sizes. Check text alternatives and any interactive behavior if those features exist. Only then replace the deployed asset. The tool processes input in your browser, but publishing a prefilled embed would expose that input in the fragment of the embed URL; avoid using private source material in a public example. A clean format is a review aid, not a substitute for rendering tests.