How do I change inline SVG stroke color?

Copy the from your HTML into Source, click Change inline stroke, then paste the updated markup back into the page.

Is inline SVG different from an img src?

Yes. Inline SVG lives in the DOM so stroke and CSS can target it directly. External SVG files need file-level edits or CSS tricks.

Yes. After recoloring, open Use currentColor or Stroke with CSS to switch to inheritance-based theming.

See Change SVG Stroke Color with JavaScript for a setAttribute snippet.

FAQ

Quick answers

How do I change inline SVG stroke color?: Copy the <svg> from your HTML into Source, click Change inline stroke, then paste the updated markup back into the page.
Is inline SVG different from an img src?: Yes. Inline SVG lives in the DOM so stroke and CSS can target it directly. External SVG files need file-level edits or CSS tricks.
Can I theme it with currentColor next?: Yes. After recoloring, open Use currentColor or Stroke with CSS to switch to inheritance-based theming.
Need a JS runtime change?: See Change SVG Stroke Color with JavaScript for a setAttribute snippet.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B