How to alter the color of an inline SVG within an <img> element

Is it possible to change the color of an SVG image, icon, or logo within an inline HTML <img> tag using style="..."?

Below is a snippet of my code featuring a button with a logo that I want to change the color of:

<a href="#" class="nav-link btn btn-outline-secondary d-flex border-0 w-100" style="color:#39384A;" data-toggle="tooltip" data-placement="right" title="Discord">
  <img class="m-auto" src="https://www.svgrepo.com/show/353655/discord-icon.svg" style="color:#39384A;">
</a>

Currently, despite specifying a color in the style attribute, the color remains unchanged. How can I achieve the desired color change as shown?

I require an inline solution as I do not have access to edit the CSS sheet to modify specific tags and classes due to limited customization options on the website. Any help or advice would be greatly appreciated. Thank you!

htmlcsssvgbootstrap-5inline

Answer №1

To modify the color of an external SVG file, you cannot directly use the style attribute within an <img> tag.

Instead, embed the SVG code directly into your HTML and apply the desired color using CSS. Follow these steps:

  1. Download the SVG file.
  2. Open the SVG file and copy its content.
  3. Paste the SVG content directly into your HTML.
  4. Apply the color change using CSS.

Here is a sample modified code with the embedded SVG content and styled:

<a href="#" class="nav-link btn btn-outline-secondary d-flex border-0 w-100" data-toggle="tooltip" data-placement="right" title="Discord">
  <svg width="800px" height="800px" viewBox="0 -28.5 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
    <g>
      <path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 ... (SVG path data here) ... Z" fill="#39384A" fill-rule="nonzero">
      </path>
    </g>
  </svg>
</a>

Note the usage of style="fill:#39384A;" which will adjust the SVG to the specified color.

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

Styling Images in HTML with Text Overlays and Buttons using CSS

Hello everyone, I am new to this and struggling with formatting text over an image using a CSS button. I need the code to be responsive for mobile devices as well. Any help or advice on this would be greatly appreciated. Thanks in advance, Johnny_P This ...

htmlcssbuttonformatting

What is the best way to keep a button visible at all times and active without needing to be clicked?

<v-card :style="{ textAlign: 'left' }" class="basic-card pa-6" :class="{ 'small-padding': !$vuetify.breakpoint.xl }" elevation="0" flat :height="windowHeight - 104 + 'px&ap ...

javascripthtmlvue.jsvue-componentvuetify.js

Achieving a child div to occupy the entire available space when the parent is specified as `mx-auto` can be accomplished using Vue and Tailwind CSS

Sorry if this seems like a basic question, I'm still getting the hang of Vue and tailwind. In my parent template, it looks like this: <template> <div class="mx-auto mt-4 max-w-3xl"> <slot></slot> </div> ...

htmlcssvue.jstailwind-css

Tips for positioning one set of menu buttons to the left and another set to the right

I am currently utilizing bootstrap 5 and I want to align two groups of menu buttons on the same line - one to the left and the other to the right. At the moment, my code is displaying the second group below the first group to the left. This is how it curr ...

htmlbootstrap-5

Is there a way to stop a music track from playing?

function playMusic(){ var music = new Audio('musicfile.mp3'); if (music.paused) { music.play(); } else { music.pause(); } } <input type="button" value="sound" onclick="playMusic()" ...

javascripthtmlcssaudio

Using HTML in jQuery or JavaScript: A Step-by-Step Guide

Here's the deal - I've got a bunch of buttons. https://i.sstatic.net/839MH.png What I want is, when the 4th button is clicked, to trigger a select menu option like this: The outcome I'm aiming for after clicking the button is https://i.ss ...

javascriptjqueryhtml

Issue with Bootstrap columns being misaligned on mobile devices

On my website, I've implemented a Bootstrap Grid design with three columns under the container-fluid BS attribute, along with .row .no-gutters. While the boxes are perfectly aligned in the desktop view, they stack vertically on mobile and tablet devi ...

htmlcssbootstrap-4

Troubles arise when the left column shifts to the top with widths larger than 1440

Having a WordPress site with the Divi theme, I encounter an issue where the menu on the left-hand side is being displayed above the page content when the screen width exceeds around 1440 pixels. This problem persists on every page that contains this colum ...

csswordpressresolution

Relative positioning can break the background-clip attribute for text elements

I am experimenting with using background-clip: text on an element that contains some child <p> elements. I wanted to enhance the design by adding some absolutely positioned :after elements to the <p> tags, covering up the text for animation eff ...

htmlcssbackgroundlinear-gradients

Utilizing jQuery and DOM to interact with form elements

Below is the form content <form method="post"> <input type="hidden" name="resulttype" value="Create"> <table> <tr> <td>Full Name</td> <td><input ...

javascriptjqueryhtmldom

Utilizing the CSS grid framework to efficiently create repetitive rows and columns in code

When I work with CSS frameworks like Bootstrap or Materialize, I often find myself repeatedly typing the same HTML code: <div class="row"> <div class="col s12"> <!-- Some text/ a button / something --> </div> </d ...

htmlcsstwitter-bootstrapframeworksmaterialize

Trigger an input file click automatically using vanilla JavaScript with an AJAX request in Google Chrome

Currently, my webapp operates in a way that every button click triggers an ajax request to the server. The server then validates and sends JavaScript code back to the client. Unfortunately, the framework I am using does not allow me to incorporate jQuery a ...

javascripthtmlajaxgoogle-chrome

Achieving a bold border on top of an image without altering the image's dimensions

I'm in need of Photoshop-like selection functionality, but when I add a border to the enclosing div that holds the image, the image ends up smaller by twice the thickness of the border. How can I fix this issue? I have attempted a solution by adding ...

htmlcss

dealing with a problem with the bootstrap navigation bar concept

I’ve been struggling to align the menu and company name in a single row. Initially, I tried setting the company name followed by some spaces before adding the menu items, but it didn't work out as expected. I've been spending the last couple of ...

htmlcssbootstrap-4

Is it possible to target the last child element in CSS without relying on nesting

Is there a way to select the very last child of an element and apply a specific class without using nesting? For instance, how can I target only the final div in the structure below, nothing more and nothing less. <body> <div class="very-last- ...

csssass

Learn how to create an animated refreshing icon in React when clicked

I have a refresh icon in my React app that utilizes Material UI. I want the icon to spin for a second after it is clicked, but I am unsure of how to achieve this. Despite attempting some solutions, none have been successful. const useStyles = makeStyles(( ...

javascriptcssreactjsmaterial-ui

Understanding CSS classes in ReactJS Material UI componentsJust wanted to clarify some things

When it comes to styling Material UI components, the recommended approach is to utilize their useStyles function. Here's an example: const useStyles = makeStyles(theme => ({ root: { marginTop: '15px', display: 'f ...

cssreactjsmaterial-ui

The content is being pushed down by the responsive navigation bar

While the navbar is in normal non-responsive mode (I'm not sure if that's the right terminology) on Chrome and you scroll down, the logo image stays behind the menu. However, when the screen width shrinks and the menu collapses, clicking the icon ...

cssnavbar

Is there a problem with the Drag and Drop API?

So here's the deal: I've encountered a problem with the HTML5 Drag and Drop API. In short, besides the essential dragstart, dragover, and drop events, there are three more events - mousedown, mouseup, and mouseleave - that are crucial for achiev ...

javascriptjqueryhtmldraggable

Eliminate certain inline styles using jQuery

I am facing an issue with an asp menu I am using. It is automatically inserting style="width:3px;" into my menu table tds, creating an unsightly gap between my tabs. Instead of asking our developer to customize the menu just to fix this cosmetic flaw, I am ...

jquerycssinline-styles