About Compare All Tools

SVG Stroke Editor

Fine-tune strokes across every path in your SVG simultaneously.

SVG Stroke Editing

Edit SVG stroke — change colors, widths, caps and dash patterns.

Paste SVG markup, upload a file or try the built-in sample. The settings panel lists every stroke color and width found in the SVG. Change values individually, then apply changes. Everything runs locally — no upload, output is editable SVG markup.

Local only SVG output Stroke aware Fill safe
Drop an SVG file here or paste SVG markup into the input editor below.
Stroke colors—
Stroke widths—
Stroke styles—
Changed—
Output size—
Status—
Preview

Original vs edited SVG preview

Original SVG No SVG

Paste SVG markup or try the sample to preview the source.

Edited SVG Waiting

Analyze strokes and apply changes to preview the result.

Processed locally Strokes: — Inline style: — Dash: — currentColor: — Scripts: — Events: — Output: —
Input

SVG markup

Paste a complete SVG document or inline SVG element. All stroke colors, widths and style attributes are detected automatically. Fill values are never touched.

Output

Stroke-edited SVG

The stroke-edited SVG markup appears here after applying changes. Copy or download using the buttons above.

How It Works

SVG Stroke Editor scans the SVG markup for every stroke-related value across all presentation attributes — stroke, stroke-width, stroke-linecap, stroke-linejoin, stroke-dasharray and stroke-dashoffset — as well as inline style declarations on any element. It groups stroke colors by their canonical hex form and lists every unique stroke width. The settings panel lets you replace individual stroke colors using a color picker or by typing a hex value, change stroke widths by typing a new numeric value, and apply global overrides for line cap style, line join style and dash pattern. Changes are staged until you click Apply Stroke, which rebuilds the SVG markup with all pending changes applied in a single pass. Fill values are never modified. A live preview shows the edited result alongside the original. The output is standard SVG markup — no rasterization, no upload, no server round-trip.

Use Cases

  • Updating a UI icon set to a new stroke color that matches a refreshed brand palette without opening the original design file
  • Making all strokes in a vector illustration consistent by normalizing irregular width values to a single design-system stroke width
  • Converting solid-stroke paths to dashed lines for a schematic or diagram by applying a global dash pattern override
  • Adjusting stroke cap style from butt to round across an entire illustration to soften its visual style before export
  • Auditing an SVG file for all unique stroke colors and widths to identify inconsistencies before normalizing to a defined set of design tokens

FAQ

Does SVG Stroke Editor modify fill colors?

No. SVG Stroke Editor only reads and writes stroke-related attributes and style properties — stroke, stroke-width, stroke-linecap, stroke-linejoin, stroke-dasharray and stroke-dashoffset. Fill attributes and fill values in inline styles are never read or modified. This makes it safe to use on any SVG without risk of changing its filled shapes.

Does SVG Stroke Editor upload my file?

No. Every operation runs entirely in your browser. Your SVG file is never sent to any server. The DOMParser API reads the markup locally, stroke values are extracted and replaced in memory, and the output is generated client-side using string replacement.

What happens if my SVG uses inline styles for strokes?

SVG Stroke Editor detects stroke properties declared inside style="..." attributes as well as presentation attributes like stroke="...". Both forms are updated when you apply a change. The signal strip shows whether inline style strokes were detected in your SVG.

Can I change the dash pattern for only some elements?

The Dash pattern control in the Stroke Styles section applies a global override — it replaces every existing stroke-dasharray value in the SVG. If you only want to change dashes on specific elements, you will need to edit those elements directly in the SVG markup using the input textarea.

What stroke-linecap and stroke-linejoin values are supported?

The Line cap dropdown supports butt, round and square — the three values defined by the SVG specification. The Line join dropdown supports miter, round and bevel. Selecting keep in either dropdown leaves the existing values unchanged.

Can I undo a stroke change?

Yes. Each color card and width card has a reset button that removes that specific change from the pending set. Reset all changes clears every pending change and restores the state to the original analyzed SVG. The original SVG markup is kept in memory for the entire session as long as you do not clear the input or load a new file.

Why is currentColor shown but not editable?

currentColor is a CSS keyword that inherits its value from the CSS color property of the element or one of its ancestors. Its actual color depends on the render context and cannot be determined from the SVG markup alone. SVG Stroke Editor detects and flags it in the colors panel, but replacing it with a hex value without knowing the inherited context could produce unintended results.