About This Tool
SVG Path Viewer helps you inspect icon outlines and complex curves. Paste standalone path data or select a path from an SVG to view its shape, command counts, and geometric bounds, then save a static preview.
How to Use
- Choose SVG mode to read a file, or path mode to paste the path data from a d attribute.
- Select a path from the SVG, or check that your standalone path is valid.
- Set the fill, stroke color, and stroke width, then adjust the background or zoom.
- Review command counts and geometric bounds, then download path-preview.svg if needed.
Features
- Supports path commands including M, L, H, V, C, S, Q, T, A, and Z.
- Shows command counts and geometric bounds, with specific messages for invalid paths.
- Fits the preview to the path with some padding. The download includes the selected path and styles.
Path commands and bounds
- M moves to a point; L, H, and V draw lines; C and S draw cubic curves; Q and T draw quadratic curves; A draws elliptical arcs; Z closes the current subpath. Lowercase commands generally use relative coordinates.
- Bounds cover the path geometry, excluding strokes, markers, shadows, and filters. Paths from complete SVGs account for parent transforms, but isolated previews do not reproduce every clipping or compositing effect.
- Statistics are available for long paths, but the detailed command list is limited to keep the page responsive.
SVG Safety
Previews use a filtered static copy. Scripts, click events, animations, external images, fonts, and styles do not run or load. External references, embedded web pages, and unsupported content are removed, so the preview may differ from the original. Documents with a DOCTYPE or custom entities are not supported.
SVG files and UTF-8 source are limited to 2 MiB, 20,000 nodes including elements and text, and 96 nesting levels. Simplify files that are too large or complex before trying again.
Privacy
Your SVG stays in your browser and is never uploaded to a server.
Inputs and results are not saved automatically. Download anything you want to keep before clearing the tool or leaving the page, and keep a copy of your original.
FAQ
What is the d attribute of an SVG path?
The d attribute stores commands and coordinates that describe lines, curves, arcs, and closed outlines.
What do M, L, C, Q, and A mean?
M moves to a starting point, L draws a line, C draws a cubic Bézier curve, Q draws a quadratic Bézier curve, and A draws an elliptical arc.
What does Z mean?
Z closes the current subpath by returning to its starting point. A single d attribute can contain multiple subpaths.
Does Path Viewer run SVG scripts?
No. Complete SVGs are filtered, and standalone path previews use only valid path data and the selected static styles.