SVG tools

SVG (Scalable Vector Graphics) is the standard format for vector illustrations on the web — icons, logos, charts, anything that needs to scale crisply at any size. The tools here handle two common editing and inspection tasks: changing colors in an SVG without opening a graphics editor, and inspecting the path data inside an SVG to understand what's actually being drawn.

The SVG color changer finds every color value in an SVG (fill, stroke, stop-color, hex codes, named colors) and lets you replace them one at a time or in bulk. Useful for adapting an icon set to your design system's palette without re-exporting from Illustrator or Figma: paste the SVG, recolor, copy the result.

The SVG path viewer parses the d attribute of an SVG path element and shows the underlying drawing commands (M move, L line, C cubic bezier, A arc, Z close). Useful for understanding existing paths before editing them, debugging path animations where the wrong control point is causing an unexpected curve, and learning SVG path syntax by inspecting paths produced by drawing tools. For full SVG editing (multiple layers, transformations, gradients, filters), a dedicated editor like Inkscape or Illustrator is the right tool; these utilities cover the common single-edit cases.