How can I change the color of an ‘svg’ element?

by

2020 answer

CSS Filter works on all current browsers

To change any SVGs color

  1. Add the SVG image using an <img> tag.

    <img src="dotted-arrow.svg" class="filter-green"/>

  2. To filter to a specific color, use the following Codepen (click here to open the codepen) to convert a hexadecimal color code to a CSS filter:

    For example, output for #00EE00 is

    filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);

  3. Add the CSS filter into this class.

    .filter-green{
    filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
}

More Related Contents:

  1. How to change the color of an svg element?
  2. Transparent arrow/triangle indented over an image
  3. Transparent text cut out of background
  4. SVG data image not working as a background-image in a pseudo element
  5. Why does order of transforms matter? rotate/scale doesn’t give the same result as scale/rotate
  6. How can I make an svg scale with its parent container?
  7. CSS :before on inline SVG
  8. CSS transparent curved shape with two rounded sides
  9. Is there a way to use SVG as content in a pseudo element ::before or ::after
  10. How to animate handwriting text on the web page using SVG?
  11. Triangle shape with background image
  12. Specify an SVG as a background image and ALSO style the SVG in CSS?
  13. How do I center an SVG in a div?
  14. Can I change the fill color of an svg path with CSS?
  15. How to make a element expand or contract to its parent container?
  16. Convert 8-digit hex colors to rgba colors?
  17. Background-size with SVG squished in IE9-10
  18. Chrome renders colours differently from Safari and Firefox
  19. Add ellipses to overflowing text in SVG?
  20. How to Include CSS style when converting svg to png
  21. div background color, to change onhover
  22. Transparent hollow or cut out shape in HTML
  23. 3d transforms on SVG element
  24. CSS change d property of
  25. Fill only Half a star with SVG
  26. How do you style a external svg with css
  27. How does hexadecimal color work?
  28. Why is filter(drop-shadow) causing my SVG to disappear in Safari?
  29. Background color of tspan element
  30. Double curved shape

Leave a Comment