How to change path color of svg file?

user_1194415 0
Viewed 1202

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.

svg css html
3 Answers

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:

  1. You should'nt 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.

  2. If you are adding an SVG as a mask or background, you won't be able to adjust its styling.

  3. Even inserting the file as an src attribute inside an <img/> tag wont't work very well.

  4. 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.

user_48922060

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.

user_86834610

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>

user_86203330
Related