Question 282854 in CSS Question posted in
Some basic documentation can be found here.

How can i make the SVG color to follow my css

<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="vuesax/linear/export">
<g id="export">
<g id="Vector">
<path d="M7.48999 4.87502L9.40999 2.95502L11.33 4.87502" fill="white"/>
<path d="M7.48999 4.87502L9.40999 2.95502L11.33 4.87502" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<path id="Vector_2" d="M9.40997 10.635V3.00751" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_3" d="M3.5 9C3.5 12.315 5.75 15 9.5 15C13.25 15 15.5 12.315 15.5 9" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</g>
</svg>

I have tried putting the fill=currentColor and stroke=currentColor

but when i add the css to

color: red;
fill: red;
stroke: red;

I added then in my style.css i did .svg-icon { color: red; fill: red; stroke: red; }

it still stay black and the color is not changing. how can i fix this

i’m looking to do like adding the svg in a css then calling the css class in a tag

E.g.: style.css .icon { SVG } then in html

Tags:

2

Answers


  1. 0 
    <style>
  #Vector,
  #Vector_2,
  #Vector_3 {
    color: red;
  }
</style>
    Login or Signup to reply.
  2. 0

    If you want to change the color of an SVG using CSS, you should not use a tag to include the SVG in your HTML. Instead, you should directly include the SVG code within your HTML, and then apply the CSS to the SVG elements. Here’s how you can do it

    1. Include the SVG code directly within your HTML:

    Apply CSS styles to the SVG elements directly. For example, if you want to change the fill and stroke colors of specific paths within the SVG, you can do it like this

    By including the SVG directly in your HTML and applying CSS styles to the SVG elements, you can control the colors and other styles as desired. Using an tag to include the SVG will not allow you to apply external CSS styles to the SVG’s elements.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search