img src SVG changing the styles with CSS

by

You could set your SVG as a mask. That way setting a background-color would act as your fill color.

HTML

<div class="logo"></div>

CSS

.logo {
  background-color: red;
  -webkit-mask: url(logo.svg) no-repeat center;
  mask: url(logo.svg) no-repeat center;
}

JSFiddle: https://jsfiddle.net/KuhlTime/2j8exgcb/
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/mask

Please check whether your browser supports this feature:
https://caniuse.com/#search=mask

More Related Contents:

  1. SVG data image not working as a background-image in a pseudo element
  2. CSS Image Effects
  3. Center multiple images horizontally in CSS
  4. Is there any way to hover over one element and affect a different element? [duplicate]
  5. Why does order of transforms matter? rotate/scale doesn’t give the same result as scale/rotate
  6. Preloading CSS Images
  7. CSS transparent curved shape with two rounded sides
  8. Is there a way to use SVG as content in a pseudo element ::before or ::after
  9. How to animate handwriting text on the web page using SVG?
  10. Text on image mouseover?
  11. Specify an SVG as a background image and ALSO style the SVG in CSS?
  12. Outlining and partially filling an SVG Shape
  13. Can I change the fill color of an svg path with CSS?
  14. html, css – weird invisible margin below pictures
  15. SVG in img element proportions not respected in ie9
  16. Greyscale Background Css Images
  17. SVG. Reverse image using css. Keep image at the same place
  18. Replacing H1 text with a logo image: best method for SEO and accessibility?
  19. Removing the image border in Chrome/IE9
  20. How to add animated gradient to an svg path?
  21. Transparent hollow or cut out shape in HTML
  22. CSS change d property of
  23. Fill only Half a star with SVG
  24. How to vertically align an image inside a div
  25. Tint image using CSS without overlay
  26. Why don’t CSS filters work on SVG elements in Chrome?
  27. Why is filter(drop-shadow) causing my SVG to disappear in Safari?
  28. input type=”image” shows unwanted border in Chrome and broken link in IE7
  29. Print styles: How to ensure image doesn’t span a page break
  30. Double curved shape

Leave a Comment