How to change path color of svg file?

Question

Is it possible to change the svg path color (not background!) if the svg is loaded from local file.

.status-icon1 {
  width: 48px;
  height: 48px;
  display: inline-block;
  background-color: green;
  mask: url(https://gitlab.com/gitlab-org/gitlab-svgs/blob/main/sprite_icons/status_success.svg) no-repeat 50% 50%;
  -webkit-mask: url(https://gitlab.com/gitlab-org/gitlab-svgs/blob/main/sprite_icons/status_success.svg) no-repeat 50% 50%;
}

.status-icon2 {
  width: 48px;
  height: 48px;
  background: url(https://gitlab.com/gitlab-org/gitlab-svgs/blob/main/sprite_icons/status_success.svg) no-repeat;
  background-size: cover;
  display: inline-block;
}

<html>

<body>
  <div class="status-icon1"></div>
  <div class="status-icon2"></div>
</body>

</html>

Sidenote: I lateron want to reference the svg files locally, not from the web.

The output is blank in my case. What should be visible there? — Michael W. Czechowski, Commented Aug 6, 2020 at 9:07
if the file is local, edit it and set whatever colour you want in that file. — Robert Longson, Commented Aug 6, 2020 at 9:13
It could be that, GitLab blocks such requests, because it is not a host. — Michael W. Czechowski, Commented Aug 6, 2020 at 9:14
Yes but the url include is not the problem, as written I have to file locally. The problem is that I cannot set the path color. — membersound, Commented Aug 6, 2020 at 9:30

Michael W. Czechowski · Accepted Answer · 2023-12-04 08:33:59Z

The best way to implement SVG's into your HTML code and modify it with CSS is another. SVG files contain attributes like stroke or fill. You can try by referencing these attributes with CSS to change its styling. Also a were frequent method is to put as values into these attributes currentColor. So the color is corresponding to its CSS color parameter. Just by changing the wrappers style to color: green you will be able to change the currentColor inside your SVG.

.status {
  fill: #ff11ac;
  width: 10rem;
  height: 10rem;
  color: green;
  
  img {
    fill: #ff11ac;
    width: 10rem;
    height: 10rem;
  }
}

<h2>Change fill paremter with CSS</h2>
<div class="status">
  <svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF" style="fill: var(--svg-status-bg, #fff);"/><path d="M6.278 7.697L5.045 6.464a.296.296 0 0 0-.42-.002l-.613.614a.298.298 0 0 0 .002.42l1.91 1.909a.5.5 0 0 0 .703.005l.265-.265L9.997 6.04a.291.291 0 0 0-.009-.408l-.614-.614a.29.29 0 0 0-.408-.009L6.278 7.697z"/></g></svg>
</div>

<h2>Change currentColor with CSS</h2>
<div class="status">
  <svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd" fill="currentColor"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF" style="fill: var(--svg-status-bg, #fff);"/><path d="M6.278 7.697L5.045 6.464a.296.296 0 0 0-.42-.002l-.613.614a.298.298 0 0 0 .002.42l1.91 1.909a.5.5 0 0 0 .703.005l.265-.265L9.997 6.04a.291.291 0 0 0-.009-.408l-.614-.614a.29.29 0 0 0-.408-.009L6.278 7.697z"/></g></svg>
</div>

<h2>IMG "solution" (won't work)</h2>
<div class="status">
  <img 
    src="https://gitlab.com/gitlab-org/gitlab-svgs/-/raw/main/sprite_icons/status_success.svg"/>
</div>

There are also some other issues:

You shouldn't reference a file inside a repository directly. This won't be allowed by default. So change https://gitlab.com/gitlab-org/gitlab-svgs/blob/main/sprite_icons/status_success.svg to https://gitlab.com/gitlab-org/gitlab-svgs/-/raw/main/sprite_icons/status_success.svg.
If you are adding an SVG as a mask or background, you won't be able to adjust its styling.
Even inserting the file as an src attribute inside an <img/> tag wont't work very well.
Changing the width and height of the SVG that already holds that information (have a look on the SVG code) isn't really possible; not in an elegant.

Solution

So, after all I would recommend you to just copy the SVG code (it isn't really long), remove some attributes like width and height, but leave the viewBox and resize its wrapper or the <svg/> directly with some CSS rulesets.

Last but not least change the fill parameter. That's it.

Great. Is there any (dis)advantage using fill or currentColor property? — membersound, Commented Aug 6, 2020 at 9:46
currentColor makes it more flexible. Imagine a scenario where you don't know the content of some HTML tags. It could be some text or whatever. So, you adjust color of that wrapper and everything will change its color according to the color property. This makes it more general to use. In contrast using fill will only effect SVGs. Nothing else. There will be usecases, where you'd like to change the color of a SVG but not some text, that is in the same place; the same wrapper. So, it is up to your use case :) Enjoy! — Michael W. Czechowski, Commented Aug 6, 2020 at 11:18

MarvinLeRouge · Accepted Answer · 2020-08-06 10:03:21Z

1

If you use your svg as image (which seems to be the case here), you can't affect its content : it's a standalone document. If you use it inline, you can style it : simply put classes inside your svg, and use them in your css. In this case, if i understand correctly, you wish to use an svg as a mask in order to show a background color (which would then be a pseudo svg fill color). If it's that, you could use your svg inlined, and style it.

answered Aug 6, 2020 at 10:03

MarvinLeRouge

5141 gold badge6 silver badges16 bronze badges

Add a comment |

Temani Afif · Accepted Answer · 2020-08-06 09:33:21Z

There is a solution using mask-mode and mask-composite but it works only on Firefox actually.

The idea is to use luminance (since your SVG is black/white) so we mask with the white part then we use exclude with a white background to invert the mask and keep the black part of the SVG.

.status-icon1 {
  width: 48px;
  height: 48px;
  display: inline-block;
  border-radius:50%;
  background-color: green;
  mask: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCI+CiAgPGcgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxwYXRoIGQ9Ik0wIDdhNyA3IDAgMSAxIDE0IDBBNyA3IDAgMCAxIDAgN3oiLz4KICAgIDxwYXRoIGQ9Ik0xMyA3QTYgNiAwIDEgMCAxIDdhNiA2IDAgMCAwIDEyIDB6IiBmaWxsPSIjRkZGIiBzdHlsZT0iZmlsbDogdmFyKC0tc3ZnLXN0YXR1cy1iZywgI2ZmZik7Ii8+CiAgICA8cGF0aCBkPSJNNi4yNzggNy42OTdMNS4wNDUgNi40NjRhLjI5Ni4yOTYgMCAwIDAtLjQyLS4wMDJsLS42MTMuNjE0YS4yOTguMjk4IDAgMCAwIC4wMDIuNDJsMS45MSAxLjkwOWEuNS41IDAgMCAwIC43MDMuMDA1bC4yNjUtLjI2NUw5Ljk5NyA2LjA0YS4yOTEuMjkxIDAgMCAwLS4wMDktLjQwOGwtLjYxNC0uNjE0YS4yOS4yOSAwIDAgMC0uNDA4LS4wMDlMNi4yNzggNy42OTd6Ii8+CiAgPC9nPgo8L3N2Zz4K) center/contain, 
  linear-gradient(#fff,#fff);
  mask-composite: exclude;
  mask-mode: luminance;
}

.status-icon2 {
  width: 48px;
  height: 48px;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCI+CiAgPGcgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxwYXRoIGQ9Ik0wIDdhNyA3IDAgMSAxIDE0IDBBNyA3IDAgMCAxIDAgN3oiLz4KICAgIDxwYXRoIGQ9Ik0xMyA3QTYgNiAwIDEgMCAxIDdhNiA2IDAgMCAwIDEyIDB6IiBmaWxsPSIjRkZGIiBzdHlsZT0iZmlsbDogdmFyKC0tc3ZnLXN0YXR1cy1iZywgI2ZmZik7Ii8+CiAgICA8cGF0aCBkPSJNNi4yNzggNy42OTdMNS4wNDUgNi40NjRhLjI5Ni4yOTYgMCAwIDAtLjQyLS4wMDJsLS42MTMuNjE0YS4yOTguMjk4IDAgMCAwIC4wMDIuNDJsMS45MSAxLjkwOWEuNS41IDAgMCAwIC43MDMuMDA1bC4yNjUtLjI2NUw5Ljk5NyA2LjA0YS4yOTEuMjkxIDAgMCAwLS4wMDktLjQwOGwtLjYxNC0uNjE0YS4yOS4yOSAwIDAgMC0uNDA4LS4wMDlMNi4yNzggNy42OTd6Ii8+CiAgPC9nPgo8L3N2Zz4K) no-repeat;
  background-size: cover;
  display: inline-block;
}

<div class="status-icon1"></div>
<div class="status-icon2"></div>

@membersound as far as I know, it would be difficult especially if you will dealing with random SVG .. the solution I provided wroks here because your SVG is black/white and is circular. Another case will fail with this solution — Temani Afif, Commented Aug 6, 2020 at 9:30
Unfortunately the svg is just an example, I want to apply path color on multiple svgs. Is it possible to change the path color statically eg in the file or in the html include? — membersound, Commented Aug 6, 2020 at 9:31
@membersound you need to have the SVG inside your code to do this. As external source, it's impossible — Temani Afif, Commented Aug 6, 2020 at 9:34

Collectives™ on Stack Overflow

How to change path color of svg file?

3 Answers 3

Solution

Not the answer you're looking for? Browse other questions tagged
html
css
svg
or ask your own question.

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Solution

Not the answer you're looking for? Browse other questions tagged htmlcsssvg or ask your own question.

Related

Not the answer you're looking for? Browse other questions tagged
html
css
svg
or ask your own question.