How to Check an SVG Icon Before Using It

An SVG extension does not prove that an icon is entirely vector, and vector geometry does not prove that it looks right. Check the file structure and the visual result separately. This checklist uses an exported ring with a transparent center so both are easy to inspect.

1. Inspect what the SVG actually contains

Open a trusted exported file in a text editor. Look for vector elements such as path, circle, rect or polygon. Also inspect any image elements and their references. SVG can contain raster images, other SVGs, or a mixture of vector geometry and images; MDN describes the image element.

An embedded PNG is not inherently an invalid SVG, but it is not the same as converting that artwork into editable paths. Conversely, finding a path element alone is not enough to conclude the entire drawing is vector. Referenced resources, patterns and other elements need review too.

In our September 15, 2026 test, the ring exported from our geometric fixture has one path, zero image elements, and 694 bytes. It uses a compound path for the outside and the center opening. This is a fact about this file, not a certification of every SVG produced by the tool.

Download the actual ring SVG, compare its source PNG, and inspect the test receipt. The source artwork was created for our own geometric test sheet.

2. Test transparency on more than one background

A white center can look like a transparent hole on a white page. Show the same SVG on both light and dark backgrounds. For this ring, the background should remain visible through the middle.

These two views load the same file. Review interior gaps, enclosed holes and fine strokes against the source. If an intended white fill disappeared during background cleanup, vector conversion cannot infer that you wanted it back. Return to the extracted result and correct the cleanup decision.

3. Check the viewBox and the intended display size

The ring file has viewBox="0 0 118 118". The four values describe the coordinate region mapped into the displayed SVG viewport; MDN explains viewBox. A valid viewBox is useful for scaling, but does not guarantee the artwork is centered or unclipped.

Check the icon at the sizes you will actually use, such as 16px, 24px and 32px, then enlarge it to inspect the contour. A clean large curve can still produce a weak or uneven-looking small icon because the detail has too little screen space.

Inspect all four boundaries. If a stroke is cut off or there is excess empty space, review the export framing before changing the drawing itself. Avoid stretching the width and height independently just to force icons into a matching box.

4. Separate editability from visual fidelity

• Try the destination application. Open the file in the design tool or browser that will consume it, and check the actual rendering.
• Inspect editable shapes. Traced outlines may be filled shapes rather than the centerline strokes or semantic layers a designer would have drawn by hand.
• Keep a raster reference. A source PNG makes it easier to identify changed corners, missing details and approximated colors.
• Consider complexity, not just extension. A large number of shapes may be awkward to edit. Fewer shapes are not automatically better if they remove important details.

This checklist is about delivery quality, not a security audit. Treat untrusted SVG files as active-document inputs and use your application's normal sanitization and import controls. Do not paste arbitrary SVG markup into a production page simply because it rendered in a preview.

To create the file in the first place, follow the PNG-to-SVG extraction walkthrough. If you are choosing between raster and vector delivery, see the format comparison.