How do I change SVG stroke color with JavaScript?

Paste the SVG, click Recolor stroke + copy JS, then adapt the copied snippet to query your inline SVG nodes.

Does this mutate the file in the editor?

Yes. Stroke colors update in Source and preview; the clipboard also gets a small JS example.

Use Change Inline SVG Stroke Color for markup aimed at HTML embeds, then wire the JS snippet to those nodes.

Open Change SVG Stroke Color with CSS for a currentColor + stylesheet approach.

FAQ

Quick answers

How do I change SVG stroke color with JavaScript?: Paste the SVG, click Recolor stroke + copy JS, then adapt the copied snippet to query your inline SVG nodes.
Does this mutate the file in the editor?: Yes. Stroke colors update in Source and preview; the clipboard also gets a small JS example.
Inline SVG in the DOM?: Use Change Inline SVG Stroke Color for markup aimed at HTML embeds, then wire the JS snippet to those nodes.
Want CSS instead of JS?: Open Change SVG Stroke Color with CSS for a currentColor + stylesheet approach.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B