Skip to content
Fix Code Error

How to change the color of an svg element?

March 13, 2021 by Code Error
Posted By: Anonymous

I want to use this technique and change the SVG color, but so far I haven’t been able to do so. I put this in the CSS, but my image is always black, no matter what.

My code:

.change-my-color {
  fill: green;
}
<svg>
    <image class="change-my-color" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src="ppngfallback.png" />
</svg>

Solution

You can’t change the color of an image that way. If you load SVG as an image, you can’t change how it is displayed using CSS or Javascript in the browser.

If you want to change your SVG image, you have to load it using <object>, <iframe> or using <svg> inline.

If you want to use the techniques in the page, you need the Modernizr library, where you can check for SVG support and conditionally display or not a fallback image. You can then inline your SVG and apply the styles you need.

See :

#time-3-icon {
   fill: green;
}

.my-svg-alternate {
  display: none;
}
.no-svg .my-svg-alternate {
  display: block;
  width: 100px;
  height: 100px;
  background-image: url(image.png);
}
<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="time-3-icon" d="M256,50C142.229,50,50,142.229,50,256c0,113.77,92.229,206,206,206c113.77,0,206-92.23,206-206
	C462,142.229,369.77,50,256,50z M256,417c-88.977,0-161-72.008-161-161c0-88.979,72.008-161,161-161c88.977,0,161,72.007,161,161
	C417,344.977,344.992,417,256,417z M382.816,265.785c1.711,0.297,2.961,1.781,2.961,3.518v0.093c0,1.72-1.223,3.188-2.914,3.505
	c-37.093,6.938-124.97,21.35-134.613,21.35c-13.808,0-25-11.192-25-25c0-9.832,14.79-104.675,21.618-143.081
	c0.274-1.542,1.615-2.669,3.181-2.669h0.008c1.709,0,3.164,1.243,3.431,2.932l18.933,119.904L382.816,265.785z"/>
</svg>

<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />

You can inline your SVG, tag your fallback image with a class name (my-svg-alternate):

<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="time-3-icon" .../>
</svg>

<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />

And in CSS use the no-svg class from Modernizr (CDN: http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js ) to check for SVG support. If there is no SVG support the SVG block will be ignored and the image will be displayed, otherwise the image will be removed from the DOM tree (display: none):

.my-svg-alternate {
  display: none;
}
.no-svg .my-svg-alternate {
  display: block;
  width: 100px;
  height: 100px;
  background-image: url(image.png);
}

Then you can change the color of your inlined element:

#time-3-icon {
   fill: green;
}
Answered By: Anonymous

Related Articles

  • Best way to extract messy HTML tables using BeautifulSoup
  • How to blur the background after click on the button…
  • Use multiple instances of same polymer custom element
  • Active tab issue on page load HTML
  • Bootstrap - center child when parent isn't centered…
  • Fix top buttons on scroll of list below
  • Having trouble with my nav bar/header, It used to…
  • Animating Elements in One by One
  • How do i update a javascript variable as its value changes?
  • VueJS masonry layout
  • SVG Mask is "bleeding" on canvas edges
  • After a little scroll, the sticky navbar just is not…
  • How to show title in hover - css / jquery
  • Navbar not filling width of page when reduced to mobile view
  • Adobe XD to responsive html
  • How to use html template with vue.js
  • VueJs not displaying SVGs
  • How to vertically align an image inside a div
  • Chrome / Safari not filling 100% height of flex parent
  • Blazor Can't Update UI
  • Lit-Element binding to svg image. TypeError: Cannot…
  • Layout doesn't expand more than initial size it was…
  • Polymer SVG as CSS background-image not working
  • Javascript validate all checkboxes are selected
  • Jquery fadeToggle Trouble
  • How can I make an svg scale with its parent container?
  • Centering in CSS Grid
  • The theme changer for my code does not seem to work
  • including regression coefficient and pvalue in the ggplot2
  • python 3.2 UnicodeEncodeError: 'charmap' codec can't…
  • How to make the overflow CSS property work with…
  • How do I do a drag and drop using jQuery to move…
  • Is it possible to apply CSS to half of a character?
  • Increasing size of semi circle using css
  • Using Auto Layout in UITableView for dynamic cell…
  • How to access SVG elements with Javascript
  • Why this SVG not working in the EPUB file
  • Not submit any value if checkbox is empty
  • geoXML3 "not a LatLngBounds" error in custom…
  • What does this symbol mean in JavaScript?
  • Make Iframe to fit 100% of container's remaining height
  • Move base 64 definition of svg image into an external file
  • Vertically align an image inside a div with…
  • d3.js - draw arrow line from border to border
  • HTML table with 100% width, with vertical scroll…
  • Keeping the User logged in
  • CSS grid wrapping
  • Text size and different android screen sizes
  • Capture div containing inline svg and download it as image
  • iron-iconset-svg and var(--primary-text-color);
  • Error 'Map', but got one of type 'Null' flutter web…
  • Smart way to truncate long strings
  • Filter data in DataTable Flutter
  • Resizing an image in an HTML5 canvas
  • How to pull out an element to the right in…
  • SQL query return data from multiple tables
  • Create and Manipulate SVG in Vue project
  • Greyscale Background Css Images
  • how to use canvas in JavaScript flappy bird code
  • Why doesnt my table sort my div variable in numerical order?
  • Trying to keep dropdown menus flush to the edge of…
  • Why doesn't the height of a container element…
  • HTTP Status 500 - org.apache.jasper.JasperException:…
  • Adding multiple dropdown menu's next to each other…
  • Image Greyscale with CSS & re-color on mouse-over?
  • D3 chart integration into Vuejs
  • Twitter Bootstrap tabs not working: when I click on…
  • C Argument number to create PGM images
  • Onclick event not happening when slick slider is…
  • Uncaught ReferenceError: $ is not defined
  • XMLHttpRequest cannot load ✘✘✘ No…
  • Setting width and height of svg in Polymer element
  • Polymer 1.0 Trying to make a splitter which works…
  • Web colors in an Android color xml resource file
  • How do I stretch the slideshow/Carousel in terms of height?
  • How to specify height of nested web component custom…
  • Why my "title" bloc doesn't go to bottom?
  • React client tries to access server resource without…
  • HTML5 Canvas Resize (Downscale) Image High Quality?
  • render function or template not defined in…
  • Get the class list from a containerless custom…
  • Modify SVG fill color when being served as Background-Image
  • VUE Error when run test unit
  • Flutter: RenderBox was not laid out
  • How to specify line breaks in a multi-line flexbox layout?
  • Reset/remove CSS styles for element only
  • How to add mixin for height in mwc textfield?
  • How can we load color from a sequential scale into a…
  • Second animation with @keywords does not apply to div
  • center 3 items on 2 lines
  • Vuetify v-tabs v-tab-item overflows window width
  • Sort table rows In Bootstrap
  • Daisy is overlapping the other contents of the div
  • Embedding SVG into ReactJS
  • Unresponsive hamburger icon in HTML
  • How to change color of SVG image using CSS (jQuery…
  • javascript minesweeper issue with revealing tiles…
  • How can I call vue.js variable in a svg fill attribute?
  • Construct a manual legend for a complicated plot
  • How to use hex color values

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

SQL: IF clause within WHERE clause

Next Post:

Android 8: Cleartext HTTP traffic not permitted

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

.net ajax android angular arrays aurelia backbone.js bash c++ css dataframe ember-data ember.js excel git html ios java javascript jquery json laravel linux list mysql next.js node.js pandas php polymer polymer-1.0 python python-3.x r reactjs regex sql sql-server string svelte typescript vue-component vue.js vuejs2 vuetify.js

  • you shouldn’t need to use z-index
  • No column in target database, but getting “The schema update is terminating because data loss might occur”
  • Angular – expected call-signature: ‘changePassword’ to have a typedeftslint(typedef)
  • trying to implement NativeAdFactory imports deprecated method by default in flutter java project
  • What should I use to get an attribute out of my foreign table in Laravel?
© 2022 Fix Code Error