EXAMPLES:
Paste a path and render
Supports all SVG path commands: M L H V C S Q T A Z// render and inspect svg path data instantly
Render and inspect SVG path data visually in the browser. Preview d= attributes, analyze commands, and debug paths before using in icons or illustrations.
Paste a path and render
Supports all SVG path commands: M L H V C S Q T A ZEnter the value of an SVG d= attribute into the input field, or click an example to load one.
Set fill color, stroke, viewBox dimensions, and toggle grid or control point overlays.
Click Render to see the path. Zoom, pan, and review the command breakdown below the preview.
SVG Path Viewer lets you paste raw SVG d= attribute data and instantly see the rendered shape in a live canvas. It breaks down every path command (M, L, C, Q, A, Z and more), shows control points, calculates the bounding box, and lets you export clean SVG markup — all in the browser, no upload needed.
d attribute?The d attribute defines the shape of an SVG <path> element using a series of drawing commands like Move (M), Line (L), Curve (C), Arc (A), and Close (Z). It's the core of all SVG icon and illustration shapes.
All standard SVG path commands are supported: M/m (moveto), L/l (lineto), H/h (horizontal line), V/v (vertical line), C/c (cubic Bézier), S/s (smooth cubic), Q/q (quadratic Bézier), T/t (smooth quadratic), A/a (arc), and Z/z (closepath).
The viewBox defines the coordinate space of your path — it sets the origin and dimensions that the path coordinates map to. For most icon sets this is 0 0 24 24 or 0 0 512 512. Set it to match the source coordinate system of your path data.
Yes. When you export or copy a vector path from Figma, Illustrator, or Inkscape, the exported SVG will contain a <path d="..."> element. Simply copy the value of the d attribute and paste it into this tool.
The bounding box (bbox) overlay draws a rectangle around the tightest bounds of the rendered path. This helps you verify alignment, padding, and whether the path fits correctly within its viewBox or container element.
Control points are the handles used by Bézier curve commands (C, S, Q, T) to define the curve shape. Enabling the control points overlay draws small circles at each anchor and handle position, making it easier to understand and debug complex curves.
The even-odd fill rule determines how overlapping sub-paths are filled. With even-odd enabled, alternating regions are transparent, which is useful for paths with holes (like the inside of a letter O, or a donut shape). Without it, the non-zero rule fills all enclosed regions.
No. This tool is entirely client-side. All rendering and analysis happens directly in your browser using the SVG DOM. Your path data is never uploaded or stored anywhere.
An SVG Path Viewer is a browser-based tool that takes raw SVG path data — specifically the value of the d attribute used in <path> elements — and renders it as a visible shape you can inspect, zoom, and analyze. Whether you're debugging an icon that renders incorrectly, verifying an exported illustration, or simply trying to understand how a particular shape is constructed, an SVG path viewer gives you instant visual feedback without needing a full design application.
💡 Looking for premium CSS templates and UI kits? MonsterONE offers unlimited downloads of templates, UI kits, and design assets — worth checking out.
SVG paths use a compact mini-language of single-letter commands and numeric arguments. Each command moves an imaginary "pen" across the canvas. Uppercase commands use absolute coordinates, while lowercase versions use relative coordinates from the current pen position. Here's a quick reference:
The bounding box of an SVG path is the smallest axis-aligned rectangle that completely contains the shape. It's calculated from the extreme X and Y coordinates of the path, including the control points of curves. Understanding the bounding box is critical when:
This SVG Path Viewer displays the bounding box as an overlay rectangle and reports its X, Y, width, and height values in the stats bar below the canvas.
When you export an icon or illustration from Figma as SVG, the file contains <path> elements with d attribute values. To inspect a specific path:
<path d="..."> element you want to inspect.d=.0 0 24 24 for a 24px icon grid).The viewer will render the path and give you an immediate visual confirmation of what the shape looks like, along with a breakdown of every drawing command in the sequence.
SVG paths can contain multiple sub-paths (separated by M commands), and when sub-paths overlap, the fill rule determines which regions appear filled and which appear transparent. This tool supports both rules:
The non-zero fill rule (default) fills all regions enclosed by the path, regardless of the direction they were drawn. The even-odd fill rule determines filling by counting how many times the path crosses a ray from the point to infinity — even counts are transparent, odd counts are filled. This is the rule behind "cut-out" shapes like hollow letters, rings, and complex icons with interior holes.
SVG paths are the foundation of all scalable vector graphics on the web. Unlike raster images, they scale perfectly at any resolution and can be styled with CSS, animated with JavaScript, and made interactive with event listeners. For web developers and designers, understanding SVG path data opens up powerful possibilities:
clip-path to create non-rectangular clipping regions on any HTML element.Path2D, making it easy to port SVG paths to canvas rendering.d attribute directly, morphing one path shape into another.This SVG Path Viewer helps you understand, verify, and prepare path data before putting it to work in any of these contexts. Render, inspect, and copy — all in one place, all in your browser.