Modifying SVG outline colors using CSS

Why is the CSS color: #ffffff not applying to my SVG?

This is how it currently looks:

https://i.sstatic.net/qh7ng.png

This is how I want it to look:

https://i.sstatic.net/6tLo5.png

Surprisingly, changing currentColor to #ffffff in the SVG itself works, but setting it in the CSS has no effect. I also attempted inline styling in the HTML (style="color:#ffffff"), and using stroke: #ffffff, both without success.

I've run out of options, so if anyone has a solution for this issue and understands why setting it in CSS is ineffective, please share your insights.

Here's my code snippet:

download.svg:

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    width="24" 
    height="24" 
    viewBox="0 0 24 24" 
    fill="none" 
    stroke="currentColor" 
    stroke-width="2" 
    stroke-linecap="round" 
    stroke-linejoin="round" 
    class="feather feather-download"
  >
    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
    <polyline points="7 10 12 15 17 10"></polyline>
    <line x1="12" y1="15" x2="12" y2="3"></line>
</svg>

My image tag:

<button type='button' class='btn btn-primary' on:click={ExportXlsx}>
  Download
  <img class='test' alt='download' src='/images/download.svg' />
</button>

My CSS style:

.test{
  color: #ffffff !important;
}
htmlcsssvgsveltebootstrap-5

Answer №1

Strategy #1

To begin, it is essential to define a specific color for the stroke attribute:

stroke="rgb(255, 255, 255)"

Demonstration:

.button {
  height: 48px;
  padding: 0 12px;
  font-size: 18px;
  line-height: 48px;
  font-weight: 900;
  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 63);
  border: none;
  border-radius: 9px;
  box-sizing: border-box;
}

.button svg {
  margin-left: 4px;
  transform: translateY(4px);
}
<button type="button">
Export

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    width="24" 
    height="24" 
    viewBox="0 0 24 24" 
    fill="none" 
    stroke="rgb(255, 255, 255)" 
    stroke-width="2" 
    stroke-linecap="round" 
    stroke-linejoin="round" 
    class="feather feather-download"
  >
    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
    <polyline points="7 10 12 15 17 10"></polyline>
    <line x1="12" y1="15" x2="12" y2="3"></line>
</svg>

</button>

Strategy #2

An alternative approach involves using CSS in place of SVG properties.

Demonstration:

.button {
  height: 48px;
  padding: 0 12px;
  font-size: 18px;
  line-height: 48px;
  font-weight: 900;
  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 63);
  border: none;
  border-radius: 9px;
  box-sizing: border-box;
}

.button svg {
  width: 24px;
  height: 24px;
  margin-left: 4px;
  transform: translateY(4px);
  stroke-width: 2px; 
  stroke-linecap: round;
  stroke-linejoin: round;
}

.button.red svg {
  stroke: rgb(255, 0, 0);
}

.button.yellow svg {
  stroke: rgb(255, 255, 0);
}

.button.green svg {
  stroke: rgb(0, 255, 63);
}
<button type="button" class="red">
Export

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
    <polyline points="7 10 12 15 17 10"></polyline>
    <line x1="12" y1="15" x2="12" y2="3"></line>
</svg>

</button>

<button type="button" class="yellow">
Export

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
    <polyline points="7 10 12 15 17 10"></polyline>
    <line x1="12" y1="15" x2="12" y2="3"></line>
</svg>

</button>

<button type="button" class="green">
Export

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
    <polyline points="7 10 12 15 17 10"></polyline>
    <line x1="12" y1="15" x2="12" y2="3"></line>
</svg>

</button>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Searching for text in a Python Selenium input field and retrieving suggested values can be achieved by using certain methods and commands

When you type a term like "apple" into the search bar on , a dropdown menu with search suggestions appears. https://i.sstatic.net/pGxzt.png I am attempting to retrieve a list, dictionary, or dataframe of the values in that dropdown box. For example: { ...

pythonhtmlcssselenium

Crafting interactive image checkboxes

At present, the checkboxes in my application are quite basic with labels. However, our app designer has requested that we revamp this feature and make it more appealing by using clickable images that still function like checkboxes. Allow me to provide an ...

javascriptjqueryhtmlcss

The previous button on Owl Carousel seems to be malfunctioning after navigating from a different page

In my case, I have two distinct pages: let's call them the first and second pages. On the first page, I utilize an owl carousel slider with a tag that links to a specific slide on the second page's owl carousel slider using an ID. Meanwhile, on ...

javascripthtmljquerycssowl-carousel

What is the best way to display multiple HTML files using node.js?

click here to see the image Here is my server.js file. Using express, I have successfully rendered the list.html and css files on my server. However, I am encountering an issue when trying to navigate from list.html to other html files by entering localho ...

htmlcssnode.jsexpressmariadb

What could be causing spacing problems with fontawesome stars in Vue/Nuxt applications?

Currently, I am working on implementing a star rating system in Nuxt.js using fontawesome icons. However, I have encountered an issue where there is a strange whitespace separating two different stars when they are placed next to each other. For instance, ...

javascriptcssvue.jsnuxt.jsfont-awesome

Input Form Label inexplicably rounded off at odd location

I've been utilizing Bootstrap to style my page, and I used the input form classes provided by Bootstrap to create this input field. However, upon loading the page, I noticed some strange rounding occurring between the label and the input space. http ...

htmlbootstrap-5

Testing the Limits of CSS Hover

I'm having trouble figuring out how to implement this. When hovering, a yellow square/background should appear with an offset similar to the one in the image below. I am utilizing bootstrap for this project. Any assistance or guidance would be greatl ...

javascripthtmlcssuser-interfacebootstrap-4

Managing custom Bootstrap 4 styles and assets within Yii2 framework

Recently, I integrated the yii2-bootstrap4 extension into my yii2-advanced project and customized it using a Sass file named custom.css. After adding custom.css to frontend/web/css, I made modifications to frontend/assets/AppAsset.php as shown below: cla ...

cssbootstrap-4yii2

What's the best way to align three images in a row?

I am having trouble centering three social media icons next to each other. I can't seem to figure out the proper way to do it. https://i.stack.imgur.com/Zf5p9.png <div class="maintext flipInX animated"> <div class="socials wow bounce an ...

javascripthtmlcss

angular 2 checkbox for selecting multiple items at once

Issue I have been searching for solutions to my problem with no luck. I have a table containing multiple rows, each row having a checkbox. I am trying to implement a "select all" and "deselect all" functionality for these checkboxes. Below is an example o ...

javascripthtmlangulartypescript

Challenging jQuery AJAX journey

After tirelessly searching the web, I am still unable to solve this issue and cannot understand why it is not functioning. My JavaScript code seems to work only on Firefox and fails to run on any other browser. So, I have made the decision to switch to j ...

jqueryhtml

Steps for modifying the look of a button to display an arrow upon being clicked with CSS

Looking to enhance the visual appearance of a button by having an arrow emerge from it upon clicking, all done through CSS. Currently developing a React application utilizing TypeScript. Upon clicking the next button, the arrow should transition from the ...

cssreactjstypescripttailwind-css

Incorporate JavaScript to enable the transfer of text from one textarea to another upon clicking a button, while simultaneously clearing the original textarea

After working on the provided code, I have managed to create a functionality where text from one textarea is copied to another textarea when a button is clicked using JavaScript. <head> <script type="text/javascript"> function displayOut(){ ...

javascripthtmlcss

Ways to keep the footer at the bottom of the page without relying on the fixed positioning method

I’ve been tackling a responsive design issue on my website but I can't quite get the footer to stick at the bottom of the page. The 'fixed' property hides half of my text on mobile devices, so I turned to this solution (https://getbootstra ...

htmlcssbootstrap-4bootstrap-5

Creating lasting placeholder text with gaps between each word

Looking to create a unique text input with static content on the right and editable text on the left https://i.stack.imgur.com/K0YfM.png Any suggestions? ...

htmlcss

`How to perfectly place multiple text blocks and images using CSS`

Check out this screenshot to see the issue I'm facing: Here is the HTML code: <div class="parent_process"> <div class="first_process"><img src="images/exprimer-besoin-telephonie.png"/><span style="width:18%">You fi ...

htmlcss

Transforming a Bootstrap 4 dropdown navbar by replacing the caret with Fontawesome 5 icons for Plus and Minus

After spending several days trying to find a solution, I am still struggling. I have managed to create a responsive Navbar with Dropdowns using Bootstrap 4. Now, my goal is to replace the caret with a Plus and Minus sign at the end of each row on small dev ...

twitter-bootstrapcssbootstrap-4font-awesome

Next.js horizontal scrollbar appearing unexpectedly

As I work on my Next.js project, I've noticed an issue with unwanted horizontal scrollbars appearing on every subpage. These scrollbars allow scrolling about 30px horizontally, but only appear when the content extends beyond the viewport. I attempted ...

htmlcssnext.jshorizontal-scrolling

Guide to utilizing a download link for file retrieval in Python

I'm currently working on creating a script that can automatically download specific files from webpages and save them to designated folders. For the most part, I've been successful in achieving this using Python, Selenium, and FirefoxPreferences ...

htmlpython-2.7selenium-webdriverdownload

The hyperlink element is failing to load in a particular frame

I've been attempting to load the URL of an anchor tag in a specific frame. I've tried various methods through online searches, but have not found a satisfactory solution. Can someone please assist me with how to load the href URL in a particular ...

javascriptjqueryhtml