Change svg color of a specific path

Question

I have an SVG image (World map) in my root folder and I'm adding it to my background of my website using css background-image: url(.....) . My issue is my SVG image has about 200 paths (each country in the world). I want to modify just specific colors of specific country. I'm loadin ti to my page doing

<link href="css/signin2.css" rel="stylesheet">

and

body {
  display: flex;
  align-items: center;
  background-image: url("../resources/world-pacific.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

You can't do this with a background image, only an actual SVG in the HTML — Paulie_D, Feb 19 '20 at 18:50
https://stackoverflow.com/questions/22252472/how-to-change-the-color-of-an-svg-element?rq=1 — Paulie_D, Feb 19 '20 at 18:51

score 0 · Answer 1 · answered Feb 19 '20 at 18:51

0

You cannot change the colors within an SVG if you are importing it as an image or background image. My suggestions are:

Change the colors in an SVG editing program like Adobe Illustrator. (recommended)
Or if you want to be able to dynamically change the specific countries, load it in as inline <svg>. But, you will need to clean up the XML code within the SVG file and provide classes for the specific paths you want to affect. (I would not recommend this route since you have 200 paths)

answered Feb 19 '20 at 18:51

Julie Xiong

150
6

Hi juliexiong thanks for the clarification! As for number 2 in your explanation how would I do it with inline svg? I have the file directly saved in my root folder and can't find the attribute of how to load it into the html and how to target one of the paths... – Richard Jimenez Feb 19 '20 at 19:21
You can open the SVG file in your text editor of choice (like Notepad, Sublime Text, Visual Studio Code, etc.) and copy the ` – Julie Xiong Feb 19 '20 at 19:39

Change svg color of a specific path

1 Answers1