Guide · 4 min read

Change an SVG's color, in the file or with CSS.

An SVG writes each shape's color in its text. Change one fill and every shape painted with it follows: pick a color for this real file's teal.

vecsnap.svg1.5 KB · 44 anchor points
  1. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048">
  2. <path fill="#204e5e" d="M726.07 894.87c-4.73 2.28 6.23 19.91 8.64 24.2 85.27 152.41 292.53 185.18 423.11 69.77 28.63-25.3 47.14-52.37 64.46-86.18.98-1.74 1.17-3.5 1.57-4.37.41-.87-1.07-1.88-1.57-2.9 5.26 2.14 13.29 8.91 18.29 12.47a443.32 443.32 0 0 1 137.51 175.01l7.69 18.03 155.32-146.77c6.92-6.67 8.23-8.32 18.07-7.96l97.33 2.65c11.84.24 33.29-1.33 20.35 18.01l-276.11 411.03c-5.8 8.72-7.15 16.15-10.59 26.14-48.2 134.92-160.63 238.93-298.35 277.72-154.1 43.41-318.74-2.74-430.61-115.03-194.17-194.89-162.15-517.87 64.89-671.82z"/>
  3. <path fill="#e6753c" d="M1365.19 985.37c-4.37 2.18-10.43 1.09-13.71-2.92a633.89 633.89 0 0 0-52.8-60.64c-8.43-8.36-2.08-21.73.71-31.11 41.11-139.51-31.09-318.24-149.46-398.55-130.7-88.68-296.79-52.29-421.09 28.92C574.05 622.2 464.49 825.7 538.77 1008.76c4.67 11.17 19.08 34.4 14.22 45.62q-18.68 42.58-27.23 70.97c-11.74 37.43-29.46 5.67-40.86-10.37-259.77-368.33 209.99-851.77 600.67-752.44 175.67 44.66 296.54 207.91 322.31 382.72q16.09 108.45-30.76 219.16c-2.41 5.47-6.88 18.25-11.93 20.95z"/>
  4. <path fill="#e6753c" d="M1222.28 895.39c.5 1.02 1.98 2.03 1.57 2.9-.4.87-.59 2.63-1.57 4.37-17.32 33.81-35.83 60.88-64.46 86.18-130.58 115.41-337.84 82.64-423.11-69.77-2.41-4.29-13.37-21.92-8.64-24.2q3.27-2.82 10.32-7.37 92.76-57.42 194-66.46l25.35-1.81q-38.22-9.86-58.92-36.11c-51.61-65.08-6.15-161.52 77.33-161.32 86.23.21 130.62 101.75 73.61 165.71q-19.9 22.6-55.26 31.76l14.74.87c76.88 6.42 153.95 30.79 215.04 75.25z"/>
  5. </svg>
Repaint the teal

To change an SVG's color, change the fill of its shapes: in the file's text, in a vector editor, or with CSS when the SVG's code is in the page. A CSS fill beats the file's own, and fill set to currentColor makes the SVG follow the text color, on hover too. An SVG shown in an img tag keeps its colors, since the page's CSS cannot reach inside it: use a CSS mask for one color, or put its code in the page.

Updated 5 sources ↓

In the file

How do I change the color of an SVG?

Change the fill of its shapes. Each shape names its color in the file's text, so one new value repaints every shape that uses it: in a text editor, in a vector editor, or with CSS on a web page.

The teapot at the top of this page is a real file, its whole text. A color you pick there changes the drawing and its lines together.

  • A text editor

    How
    Change the fill value on each shape's line
    Best for
    One file, one new color

  • A vector editor

    How
    Select the shapes, pick a new fill
    Best for
    Many shapes, by eye

  • CSS on a web page

    How
    A fill rule on the SVG's shapes
    Best for
    Hover, themes, dark mode

  • VecSnap's Colors tab

    How
    Click a color in the drawing, pick another
    Best for
    A logo you only have as a PNG

With CSS

How do I change an SVG's color with CSS?

Put the SVG's code in the page and set fill on the shapes you want. A CSS fill beats the fill written in the file, so a rule repaints exactly the shapes it selects: all of them, or only those of one color.

A fill written in a shape's style attribute is the exception: it beats a stylesheet. Remove it from the file, and the rule takes over.

HTML and CSS
<style>
  .logo [fill="#204e5e"] { fill: #c21875; }
</style>

<svg class="logo" viewBox="0 0 512 512">
  <path fill="#204e5e" d="M…"/>
  <path fill="#e6753c" d="M…"/>
</svg>

currentColor

What does currentColor do in an SVG?

It paints a shape in the text color around it. Set fill to currentColor in the file, and the SVG takes the color of whatever holds it, so one color line in CSS changes it.

It works when the SVG's code is in the page. An icon set in currentColor follows a link's color, its hover color and a dark theme with no rule of its own.

HTML and CSS
<style>
  .logo { color: #204e5e; }
  .logo:hover { color: #c21875; }
</style>

<svg class="logo" viewBox="0 0 512 512">
  <path fill="currentColor" d="M…"/>
  <path fill="#e6753c" d="M…"/>
</svg>

When it will not change

Why won't my SVG change color?

Usually because it is shown as an image. An SVG in an img tag or a CSS background is its own document, and the page's CSS cannot reach its shapes. Put its code in the page, or use it as a mask.

Two other causes: a fill in a style attribute, which beats your stylesheet, and a color set on the svg element while each shape names its own fill. Pick a color below: the same file, three ways.

Paint the pot with CSS
<svg class="logo">…</svg>.logo [fill="#204e5e"] { fill: …; }
  • Takes it, shape by shapeIts code is in the page, so a rule can reach the pot alone and leave the rest.
A deep teal teapot with a tangerine lid knob and a tangerine handle arc, as <img src="logo.svg">: keeps its own colors
<img src="logo.svg">
  • Keeps its own colorsAn image is a closed document: no rule of the page gets in.
mask-image: url(logo.svg)
  • One color, every shapeThe file cuts the color out as one silhouette: no shape keeps its own.

From a picture

How do I get an SVG I can recolor?

Convert the picture you have. VecSnap draws it again as shapes, one fill for each color, and its Colors tab changes any of them in every format you download.

Drop your picture. Get its SVG.

  1. Drop the picture of your logo or icon.
  2. Open Colors on the result and click a color, in the drawing or in its list.
  3. Pick the new color: every shape painted with it follows.
  4. Download the SVG, the PDF or a PNG, each in the new colors.

Questions

SVG colors, answered.

Sources

Not with the page's CSS, which stops at the image. Use the file as a CSS mask for one color, or paste its code into the page.

More guides

Keep reading

Favicon size and format

Sizes, formats and the HTML, shown on one icon in a tab, a search result and a home screen.

Guide · 5 min read

What is an SVG file?

What the format is, and how to open, make and edit one, on a real file read line by line.

Guide · 4 min read

What is a vector file?

What one is, its formats, and how to tell a real one from pixels.

Guide · 3 min read

Image Trace in Illustrator, step by step

The steps, the settings and Expand, and what to do when Image Trace is grayed out.

Guide · 3 min read

How to change a logo's color

Change a logo's colors, make a white or a black version, and why a recolored PNG grows a halo.

Guide · 4 min read

How to fix a pixelated logo

Why a logo pixelates, the pixels each place asks for, and the fixes, shown on one small JPEG.

Guide · 5 min read

SVG viewBox, width and height

The viewBox, width and height, a responsive SVG, and why yours will not scale, shown on one file.

Guide · 4 min read

SVG vs PNG

Which format each job needs, shown on one drawing saved both ways.

Guide · 3 min read

How to add a sticker border

A white edge and a smooth cut line, in Cricut, Illustrator, Inkscape or one step.

Guide · 5 min read

Inkscape Trace Bitmap, step by step

The steps, the modes and the settings, and what Trace Bitmap leaves on a real PNG.

Guide · 4 min read

How to vectorize an image in Photoshop

Make Work Path, color by color, and where it stops: what Photoshop can vectorize.

Guide · 4 min read

SVG vs EPS

What differs, which to send a printer, and one logo opened both ways.

Guide · 3 min read

How to vectorize an image in Canva

Canva's own apps, why a PNG saved as an SVG stays pixels, and an SVG you can recolor in Canva.

Guide · 4 min read

How to turn a Procreate drawing into a vector

Procreate shares no vector file: export the PNG that converts best, and draw for it.

Guide · 2 min read

How to make an SVG for Cricut

Why Design Space wants an SVG, and how to make one with a layer for each color.

Guide · 4 min read

Image Trace in Affinity, step by step

The steps, the two settings, where it is, and why traced corners come out round.

Guide · 4 min read

How to make an SVG for laser cutting

Why a traced SVG engraves some areas twice, and the file each laser app wants.

Guide · 5 min read

How to vectorize an image in Figma

Figma's own Vectorize, how to import or paste an SVG, and what makes a file easy to edit there.

Guide · 3 min read

How to reduce anchor points

Why a traced SVG has thousands, what they cost, and how to keep only the few a shape needs.

Guide · 2 min read

Drop an image. Check the file.

Converting is free. You see the whole result before you spend anything.