SVG & Path Tool

SVG Path Viewer

Inspect SVG paths, bounds, viewBox, and reusable vector assets before optimizing icons or graphics.

Quick start

Create, draw, select, and edit SVG

Start from a blank SVG or load an existing one. Use Select to move and edit elements, or create new rects, circles, ellipses, lines, freehand paths, and text.

Canvas

Title

Width Height

viewBox

Tool style

Fill Stroke Width Text

Object

Select an element

Fill Stroke Stroke Opacity 1

X Y Scale Rotate

transform

Inspect

viewBox-

Bounds-

Elements-

Paths-

Source inspector

Paste SVG, preview it, and inspect path data

This keeps the classic Path Viewer workflow: edit or paste SVG text on the left, then preview the graphic, viewBox, bounds, and path stats on the right.

SVG

Source input

Local parse

Open file

Preview

SVG

viewBox-

Bounds-

Elements-

Paths-

Paths

Inspect each graphic element

Select an item to highlight the matching element and copy path data, element markup, or bounds.

Details

Select an element

Type -

Length -

Commands -

Bounds -

Element markup / path data

Next step

Bring SVG into creative and dev workflows

After checking bounds, paths, and viewBox, continue by cleaning icons, importing art, or generating templates.

Sketch Board Inspect SVG exported from Sketch Board, or import vector assets into a canvas for annotation. Color Palette Helper Extract fill and stroke colors, then organize them as CSS, Swift, XAML, or C#. Drawing Practice Sheet Generator Use cleaned SVG viewBox and dimensions to prepare importable template backgrounds.

Guide

What does this tool solve?

The SVG Path Viewer is now a lightweight SVG editor too. Create a blank SVG, draw rects, circles, ellipses, lines, freehand paths, and text; or paste SVG to inspect viewBox, bounds, path counts, commands, length, and per-element geometry.

It takes inspiration from browser-based SVG editors like SVG-Edit, while staying maintainable inside this tool page: select and drag elements, adjust fill, stroke, stroke width, opacity, and transform, then duplicate or delete elements. The tool removes scripts, external references, and event attributes, then analyzes the text locally in your browser.