htmlcsssvg

How to override default color for SVG image?

I'm having trouble setting default colors for all tags and specific colors for an SVG image.

* {
  color: var(--text-primary);
  background-color: var(--bg-primary);
}

 :root {
  --text-primary: #000;
  --bg-primary: #fff;
  --text-secondary: #fff;
  --bg-secondary: #000;
}

.secondary {
  color: var(--text-secondary);
  background-color: var(--bg-secondary);
}
<svg xmlns="http://www.w3.org/2000/svg" width="75" height="75" fill="currentColor" viewBox="0 0 75 75">
    <path
      d="M21.97.262c-3.99.189-6.716.825-9.098 1.761-2.465.961-4.554 2.25-6.633 4.337-2.08 2.086-3.36 4.177-4.314 6.646C1.002 15.394.377 18.121.2 22.113c-.176 3.992-.215 5.275-.195 15.459.02 10.183.064 11.46.258 15.46.19 3.99.825 6.714 1.76 9.097.963 2.465 2.25 4.554 4.338 6.633 2.087 2.08 4.177 3.357 6.652 4.313 2.385.921 5.112 1.55 9.104 1.725 3.991.175 5.276.215 15.457.196 10.18-.02 11.462-.065 15.462-.255s6.71-.829 9.093-1.76c2.465-.965 4.555-2.25 6.634-4.338 2.078-2.088 3.357-4.18 4.31-6.651.925-2.385 1.552-5.113 1.726-9.101.174-4.003.216-5.281.196-15.463-.02-10.182-.065-11.459-.255-15.458-.19-3.999-.825-6.714-1.76-9.099-.964-2.465-2.25-4.552-4.337-6.633-2.086-2.082-4.18-3.36-6.65-4.311C59.606 1.003 56.88.374 52.889.202c-3.992-.173-5.277-.217-15.46-.198-10.185.02-11.46.063-15.46.258Zm.437 67.791c-3.656-.159-5.641-.766-6.964-1.275-1.752-.675-3-1.49-4.319-2.796-1.318-1.306-2.128-2.559-2.812-4.307-.514-1.323-1.133-3.306-1.304-6.962-.186-3.952-.225-5.138-.247-15.15-.021-10.012.017-11.197.19-15.15.156-3.653.767-5.64 1.275-6.963.675-1.754 1.488-3 2.797-4.318 1.309-1.318 2.557-2.13 4.307-2.813 1.322-.516 3.305-1.13 6.96-1.304 3.954-.187 5.14-.225 15.15-.246 10.01-.022 11.198.015 15.154.19 3.653.158 5.642.764 6.962 1.274 1.753.675 3 1.486 4.318 2.797 1.318 1.311 2.13 2.555 2.814 4.309.517 1.318 1.13 3.3 1.303 6.957.188 3.955.23 5.14.249 15.15.018 10.01-.017 11.198-.19 15.15-.16 3.656-.766 5.642-1.276 6.967-.675 1.751-1.489 3-2.798 4.317-1.31 1.317-2.557 2.128-4.307 2.812-1.32.516-3.305 1.13-6.957 1.305-3.955.186-5.14.225-15.154.246-10.014.022-11.195-.018-15.15-.19m30.57-50.595a4.5 4.5 0 1 0 9-.015 4.5 4.5 0 0 0-9 .015Zm-34.733 20.08c.021 10.634 8.658 19.236 19.291 19.216 10.633-.02 19.24-8.657 19.22-19.292-.02-10.635-8.659-19.239-19.293-19.218-10.635.021-19.238 8.66-19.218 19.293ZM25 37.523a12.5 12.5 0 1 1 25-.05 12.5 12.5 0 0 1-25 .05Z" />
  </svg>
<svg class="secondary" xmlns="http://www.w3.org/2000/svg" width="75" height="75" fill="currentColor" viewBox="0 0 75 75">
    <path
      d="M21.97.262c-3.99.189-6.716.825-9.098 1.761-2.465.961-4.554 2.25-6.633 4.337-2.08 2.086-3.36 4.177-4.314 6.646C1.002 15.394.377 18.121.2 22.113c-.176 3.992-.215 5.275-.195 15.459.02 10.183.064 11.46.258 15.46.19 3.99.825 6.714 1.76 9.097.963 2.465 2.25 4.554 4.338 6.633 2.087 2.08 4.177 3.357 6.652 4.313 2.385.921 5.112 1.55 9.104 1.725 3.991.175 5.276.215 15.457.196 10.18-.02 11.462-.065 15.462-.255s6.71-.829 9.093-1.76c2.465-.965 4.555-2.25 6.634-4.338 2.078-2.088 3.357-4.18 4.31-6.651.925-2.385 1.552-5.113 1.726-9.101.174-4.003.216-5.281.196-15.463-.02-10.182-.065-11.459-.255-15.458-.19-3.999-.825-6.714-1.76-9.099-.964-2.465-2.25-4.552-4.337-6.633-2.086-2.082-4.18-3.36-6.65-4.311C59.606 1.003 56.88.374 52.889.202c-3.992-.173-5.277-.217-15.46-.198-10.185.02-11.46.063-15.46.258Zm.437 67.791c-3.656-.159-5.641-.766-6.964-1.275-1.752-.675-3-1.49-4.319-2.796-1.318-1.306-2.128-2.559-2.812-4.307-.514-1.323-1.133-3.306-1.304-6.962-.186-3.952-.225-5.138-.247-15.15-.021-10.012.017-11.197.19-15.15.156-3.653.767-5.64 1.275-6.963.675-1.754 1.488-3 2.797-4.318 1.309-1.318 2.557-2.13 4.307-2.813 1.322-.516 3.305-1.13 6.96-1.304 3.954-.187 5.14-.225 15.15-.246 10.01-.022 11.198.015 15.154.19 3.653.158 5.642.764 6.962 1.274 1.753.675 3 1.486 4.318 2.797 1.318 1.311 2.13 2.555 2.814 4.309.517 1.318 1.13 3.3 1.303 6.957.188 3.955.23 5.14.249 15.15.018 10.01-.017 11.198-.19 15.15-.16 3.656-.766 5.642-1.276 6.967-.675 1.751-1.489 3-2.798 4.317-1.31 1.317-2.557 2.128-4.307 2.812-1.32.516-3.305 1.13-6.957 1.305-3.955.186-5.14.225-15.154.246-10.014.022-11.195-.018-15.15-.19m30.57-50.595a4.5 4.5 0 1 0 9-.015 4.5 4.5 0 0 0-9 .015Zm-34.733 20.08c.021 10.634 8.658 19.236 19.291 19.216 10.633-.02 19.24-8.657 19.22-19.292-.02-10.635-8.659-19.239-19.293-19.218-10.635.021-19.238 8.66-19.218 19.293ZM25 37.523a12.5 12.5 0 1 1 25-.05 12.5 12.5 0 0 1-25 .05Z" />
  </svg>
<br>
<span>Primary</span>
<span class="secondary">Secondary</span>

The above code works fine for span tags but does not work for svg.secondary. The svg.secondary tag should apply --text-secondary and --bg-secondary but it applies --text-primary and --bg-secondary. How to solve this?

Solution

  • To color SVG paths you want to use the fill property rather than the color property.

    * {
  color: var(--text-primary);
  background-color: var(--bg-primary);
}

 :root {
  --text-primary: #000;
  --bg-primary: #fff;
  --text-secondary: #fff;
  --bg-secondary: #000;
}

.secondary {
  fill: var(--text-secondary);
  color: var(--text-secondary);
  background-color: var(--bg-secondary);
}
    <svg xmlns="http://www.w3.org/2000/svg" width="75" height="75" fill="currentColor" viewBox="0 0 75 75">
    <path
      d="M21.97.262c-3.99.189-6.716.825-9.098 1.761-2.465.961-4.554 2.25-6.633 4.337-2.08 2.086-3.36 4.177-4.314 6.646C1.002 15.394.377 18.121.2 22.113c-.176 3.992-.215 5.275-.195 15.459.02 10.183.064 11.46.258 15.46.19 3.99.825 6.714 1.76 9.097.963 2.465 2.25 4.554 4.338 6.633 2.087 2.08 4.177 3.357 6.652 4.313 2.385.921 5.112 1.55 9.104 1.725 3.991.175 5.276.215 15.457.196 10.18-.02 11.462-.065 15.462-.255s6.71-.829 9.093-1.76c2.465-.965 4.555-2.25 6.634-4.338 2.078-2.088 3.357-4.18 4.31-6.651.925-2.385 1.552-5.113 1.726-9.101.174-4.003.216-5.281.196-15.463-.02-10.182-.065-11.459-.255-15.458-.19-3.999-.825-6.714-1.76-9.099-.964-2.465-2.25-4.552-4.337-6.633-2.086-2.082-4.18-3.36-6.65-4.311C59.606 1.003 56.88.374 52.889.202c-3.992-.173-5.277-.217-15.46-.198-10.185.02-11.46.063-15.46.258Zm.437 67.791c-3.656-.159-5.641-.766-6.964-1.275-1.752-.675-3-1.49-4.319-2.796-1.318-1.306-2.128-2.559-2.812-4.307-.514-1.323-1.133-3.306-1.304-6.962-.186-3.952-.225-5.138-.247-15.15-.021-10.012.017-11.197.19-15.15.156-3.653.767-5.64 1.275-6.963.675-1.754 1.488-3 2.797-4.318 1.309-1.318 2.557-2.13 4.307-2.813 1.322-.516 3.305-1.13 6.96-1.304 3.954-.187 5.14-.225 15.15-.246 10.01-.022 11.198.015 15.154.19 3.653.158 5.642.764 6.962 1.274 1.753.675 3 1.486 4.318 2.797 1.318 1.311 2.13 2.555 2.814 4.309.517 1.318 1.13 3.3 1.303 6.957.188 3.955.23 5.14.249 15.15.018 10.01-.017 11.198-.19 15.15-.16 3.656-.766 5.642-1.276 6.967-.675 1.751-1.489 3-2.798 4.317-1.31 1.317-2.557 2.128-4.307 2.812-1.32.516-3.305 1.13-6.957 1.305-3.955.186-5.14.225-15.154.246-10.014.022-11.195-.018-15.15-.19m30.57-50.595a4.5 4.5 0 1 0 9-.015 4.5 4.5 0 0 0-9 .015Zm-34.733 20.08c.021 10.634 8.658 19.236 19.291 19.216 10.633-.02 19.24-8.657 19.22-19.292-.02-10.635-8.659-19.239-19.293-19.218-10.635.021-19.238 8.66-19.218 19.293ZM25 37.523a12.5 12.5 0 1 1 25-.05 12.5 12.5 0 0 1-25 .05Z" />
  </svg>
<svg class="secondary" xmlns="http://www.w3.org/2000/svg" width="75" height="75" fill="currentColor" viewBox="0 0 75 75">
    <path
      d="M21.97.262c-3.99.189-6.716.825-9.098 1.761-2.465.961-4.554 2.25-6.633 4.337-2.08 2.086-3.36 4.177-4.314 6.646C1.002 15.394.377 18.121.2 22.113c-.176 3.992-.215 5.275-.195 15.459.02 10.183.064 11.46.258 15.46.19 3.99.825 6.714 1.76 9.097.963 2.465 2.25 4.554 4.338 6.633 2.087 2.08 4.177 3.357 6.652 4.313 2.385.921 5.112 1.55 9.104 1.725 3.991.175 5.276.215 15.457.196 10.18-.02 11.462-.065 15.462-.255s6.71-.829 9.093-1.76c2.465-.965 4.555-2.25 6.634-4.338 2.078-2.088 3.357-4.18 4.31-6.651.925-2.385 1.552-5.113 1.726-9.101.174-4.003.216-5.281.196-15.463-.02-10.182-.065-11.459-.255-15.458-.19-3.999-.825-6.714-1.76-9.099-.964-2.465-2.25-4.552-4.337-6.633-2.086-2.082-4.18-3.36-6.65-4.311C59.606 1.003 56.88.374 52.889.202c-3.992-.173-5.277-.217-15.46-.198-10.185.02-11.46.063-15.46.258Zm.437 67.791c-3.656-.159-5.641-.766-6.964-1.275-1.752-.675-3-1.49-4.319-2.796-1.318-1.306-2.128-2.559-2.812-4.307-.514-1.323-1.133-3.306-1.304-6.962-.186-3.952-.225-5.138-.247-15.15-.021-10.012.017-11.197.19-15.15.156-3.653.767-5.64 1.275-6.963.675-1.754 1.488-3 2.797-4.318 1.309-1.318 2.557-2.13 4.307-2.813 1.322-.516 3.305-1.13 6.96-1.304 3.954-.187 5.14-.225 15.15-.246 10.01-.022 11.198.015 15.154.19 3.653.158 5.642.764 6.962 1.274 1.753.675 3 1.486 4.318 2.797 1.318 1.311 2.13 2.555 2.814 4.309.517 1.318 1.13 3.3 1.303 6.957.188 3.955.23 5.14.249 15.15.018 10.01-.017 11.198-.19 15.15-.16 3.656-.766 5.642-1.276 6.967-.675 1.751-1.489 3-2.798 4.317-1.31 1.317-2.557 2.128-4.307 2.812-1.32.516-3.305 1.13-6.957 1.305-3.955.186-5.14.225-15.154.246-10.014.022-11.195-.018-15.15-.19m30.57-50.595a4.5 4.5 0 1 0 9-.015 4.5 4.5 0 0 0-9 .015Zm-34.733 20.08c.021 10.634 8.658 19.236 19.291 19.216 10.633-.02 19.24-8.657 19.22-19.292-.02-10.635-8.659-19.239-19.293-19.218-10.635.021-19.238 8.66-19.218 19.293ZM25 37.523a12.5 12.5 0 1 1 25-.05 12.5 12.5 0 0 1-25 .05Z" />
  </svg>
<br>
<span>Primary</span>
<span class="secondary">Secondary</span>