Skip to main content
FromSVG LogoFromSVG
Back to Tools

Grayscale SVG

Convert all fill and stroke colors to grayscale values.

Input

Drag & drop SVG

Drop a .svg file here, click to browse, or paste raw markup below.

input.svg

Output

Result will appear here

Browser-local SVG Processing

The Grayscale SVG utility processes SVG content in your browser. The raw SVG is not uploaded for processing; actual processing time depends on the file and your device. See the Privacy Policy for normal website requests and hosting logs.

About Grayscale SVG

Transform colorful vector illustrations into clean grayscale graphics using the standard ITU-R luminosity formula (`0.299*R + 0.587*G + 0.114*B`). It converts fills, strokes, and gradient stops into monochrome gray shades while preserving opacity and alpha channels. Ideal for disabled UI states and print stylesheets.

How It Works

01

Paste your SVG code.

02

The engine converts color values to grayscale.

03

Download the updated SVG.

Grayscale conversion notes

Grayscale SVG converts visible color values into gray equivalents for disabled states, print-oriented variants, and visual experiments. Review contrast and opacity in the final context because a numeric conversion does not guarantee a useful interface state.

What this tool does

  • Maps supported fill, stroke, and gradient colors to grayscale values.
  • Keeps geometry, opacity attributes, and transparent paint values separate from the color conversion.
  • Produces a previewable variant that can be compared with the source artwork.

Review before publishing

  • Grayscale can collapse distinct brand colors into similar luminance values.
  • Filters, blend modes, embedded images, and external styles may not be represented by the same color conversion.
  • Do not use the output as an automatic accessibility decision; test contrast and meaning in the target UI.

Color input

<path fill='#2563eb' stroke='#f97316' d='M1 1h8v8H1z'/>

Gray result (illustrative)

<path fill='#5f5f5f' stroke='#a5a5a5' d='M1 1h8v8H1z'/>

Frequently Asked Questions

Are gradients converted?

Yes, linear and radial gradient stops are converted to grayscale values as well.

How are color values converted to grayscale?

It applies standard ITU-R luminosity weighting (`0.299*R + 0.587*G + 0.114*B`) to calculate precise gray hex values.

Does grayscale conversion preserve opacity and alpha channels?

Yes, fill-opacity and stroke-opacity properties are preserved untouched.

Related Vector Utilities

View all 39 tools
SVG to ReactConvert

Generate a production-ready React component.

SVG to SolidConvert

Convert SVG to a SolidJS component.

SVG to VueConvert

Convert SVG to a Vue SFC component.

SVG to SvelteConvert

Convert SVG to a Svelte component.