Struggling to apply CSS to a SVG for color filling, but facing technical difficulties

I've been attempting to use CSS to fill a twitter icon SVG with its color. Although I've successfully done this in the past, for some unknown reason, it has stopped working now.

Below is the CSS code I'm using:

.svg path {
fill: #55acee;
}

And here's the HTML code:

<img title="Twitter" class="svg" src="data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512.002' height='512.002' viewBox='0 0 512.002 512.002'%3E%3Cpath d='M512.002 97.21c-18.84 8.355-39.082 14.002-60.33 16.54 21.686-13 38.342-33.584 46.186-58.114 20.3 12.04-42.777 20.78-66.705 25.49-19.16-20.415-46.46-33.17-76.674-33.17-58.012 0-105.043 47.03-105.043 105.04 0 8.232.93 16.25 2.72 23.938-87.3-4.382-164.7-46.2-216.51-109.753-9.04 15.515-14.222 33.56-14.222 52.81 0 36.444 18.544 68.596 46.73 87.433-17.22-.546-33.416-5.27-47.577-13.14-.01.44-.01.88-.01 1.322 0 50.894 36.21 93.348 84.26 103-8.812 2.4-18.093 3.687-27.673 3.687-6.77 0-13.35-.66-19.764-1.888 13.37 41.73 52.16 72.104 98.127 72.95-35.95 28.175-81.243 44.966-130.458 44.966-8.48 0-16.84-.496-25.06-1.47 46.487 29.806 101.702 47.196 161.022 47.196 193.21 0 298.868-160.062 298.868-298.872 0-4.554-.104-9.084-.305-13.59 20.526-14.81 38.335-33.31 52.417-54.373z' fill='%23FFF'/%3E%3C/svg%3E">

I have a feeling that I might be overlooking something crucial, but I can't quite pinpoint what it is. You can see the fiddle here.

htmlcsssvg

Answer №1

Instead of using it as the source for an image, directly embed it into your code

.svg path {
fill: red !important;
}
    
<svg class='svg'
xmlns='http://www.w3.org/2000/svg' width='512.002' height='512.002' viewBox='0 0 512.002 512.002'>
<path d='M512.002 97.21c-18.84 8.355-39.082 14.002-60.33 16.54 21.686-13 38.342-33.584 46.186-58.114-20.3 12.04-42.777 20.78-66.705 25.49-19.16-20.415-46.46-33.17-76.674-33.17-58.012 0-105.043 47.03-105.043 105.04 0 8.232.93 16.25 2.72 23.938-87.3-4.382-164.7-46.2-216.51-109.753-9.04 15.515-14.222 33.56-14.222 52.81 0 36.444 18.544 68.596 46.73 87.433-17.22-.546-33.416-5.27-47.577-13.14-.01.44-.01.88-.01 1.322 0 50.894 36.21 93.348 84.26 103-8.812 2.4-18.093 3.687-27.673 3.687-6.77 0-13.35-.66-19.764-1.888 13.37 41.73 52.16 72.104 98.127 72.95-35.95 28.175-81.243 44.966-130.458 44.966-8.48 0-16.84-.496-25.06-1.47 46.487 29.806 101.702 47.196 161.022 47.196 193.21 0 298.868-160.062 298.868-298.872 0-4.554-.104-9.084-.305-13.59 20.526-14.81 38.335-33.31 52.417-54.373z' fill='#FFF'/>
</svg>

Answer №2

When the "fill" attribute is present in the "path" element of an SVG file, it limits the control you have over the SVG's style from an external CSS file. In order to work around this issue:

  • (insert the svg code here)
  • remove the "fill" attribute from the "path" element
  • apply your desired styles directly to the SVG element in your CSS file

Before resorting to using "!important", take a moment to question why you feel it is necessary. There may be a better way to achieve the desired result without using this override. Understanding the reasons behind coding decisions is crucial.

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

What is the best way to select an ID element using JQuery?

Everything is going smoothly, could you please assist me with a question. Here is the HTML form code I am working with: <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <scri ...

htmlajax

Extract data from ajax and send it to php

Struggling to retrieve the value from a dropdown menu and pass it to a PHP variable when the selection changes in an HTML form. Additionally, looking to dynamically update the options in a second dropdown based on the selection in the first one. Any help w ...

javascriptphpjqueryhtmlajax

Animate a list to expand and collapse the menu options

Here's the concept I'm aiming to achieve: When "PORTFOLIO" is clicked, smoothly push down everything on the page; New links should fade in smoothly; If "PORTFOLIO" is clicked again, reverse all animations. This is my current code snippet: $( ...

javascriptjqueryhtmlcss

Trimming Picture on User's Device

Currently, I am utilizing the jQuery ImgAreaSelect 0.9.10 plugin to crop images that are uploaded by users. The data input format being used is "multipart/form-data". Upon cropping an image with the plugin, it provides me with coordinates in pixels. Howev ...

javascriptjqueryhtmlimage

Positioning the midcontent within a fullwidth image presents quite a challenge

Concerning the design I have, I am facing some uncertainties. Here are my thoughts on it: If desired, the individuals in the background can be portrayed using a static image. With a CMS system in place, my client will have the opportunity to upload images ...

csshtml

Is there a method to identify the Javascript responsible for altering a CSS property of an element?

I have a div that is toggled between hidden and visible states by clicking on another element. I can observe the changing visibility CSS property of the div using Firebug. The div is initialized using the Microsoft JavaScript library in code like this: Sys ...

javascripthtmlgoogle-chrome-devtoolsdom-eventsfirebug

Utilizing the DirectusImage tag for a stylish background effect

I'm new to Directus and I need help styling a card with a background image from a Directus Image. Can anyone guide me on how to achieve this? Here's what I have tried: <Card style={{backgroundImage:"url({someColletion.image.id})" &g ...

cssreactjsjsxdirectus

create a new div at the bottom of a designated page when printing out the content

I am facing a challenge with printing a table that has a variable number of rows via browsers. I need to ensure that the table is followed by a div which remains at the bottom of each page, adjusting its position according to the table's overflow onto ...

cssprinting

Efforts to extract data from HTML tables using rvest techniques may result in receiving

Although I've had success using rvest to scrape data from html tables before, I'm running into an issue with a specific website: . When I execute the following code snippet: url <- "http://www.sanzarrugby.com/superrugby/competition-stats/2016 ...

htmlrweb-scrapingrvest

Issue with ASP.net drop-down menu functionality when using Google Chrome

Having some issues with a dropdown list in an ASP.net application that loads reports from a database. The dropdown works fine in Internet Explorer but not in Google Chrome. Below is an image showing the issue in IE: And here is the same issue shown in Chr ...

htmlasp.nettelerik

How to create a hyperlink that only functions when JavaScript is turned off?

Exploring the realms of HTML 5, jQuery, CSS3, and the concept of manipulating elements based on JavaScript's state (<noscript> tags). In my quest for knowledge, I have two burning questions: How can I ensure a hyperlink functions ONLY when Jav ...

javascripthtmljquerycssjquery-events

Utilizing .affix for a sidebar with a fixed navigation bar

I am currently working on the development of a website that includes a fixed navigation bar. Check it out here: In addition to the fixed navbar, there is also a "sticky" sidebar featuring links that act as anchors to specific content within the same page. ...

javascriptcsstwitter-bootstrapaffix

I am searching for the vector geometric shapes svg elements that are commonly utilized in design editors. Can you point

When it comes to design editors, there are plenty of options such as Canva, Vistacreate, and Adobe Express. Each one uses a variety of styles for elements/objects/shapes. Are there any databases where I can find these resources? Some popular places include ...

typescriptsvgeditorfabricjs

Utilizing JSON for HTML conversion in Codeigniter

public function getCrew(){ $search = $this->input->post('name'); if($this->input->post('ajax') && (!empty($search))){ $result = $this->model->getNames($search); foreach($result as $r){ ...

htmlajaxjsoncodeigniter

Is it Possible to Craft a Dropdown Navigation Menu with the Nav Element?

Currently, I am in the process of developing a website for a stock plan home designer. I need to design a navigation bar using the nav tag, but unfortunately, I have been unable to find any resources online that provide guidance on how to achieve this. I ...

htmlcssnavbar

The Pop Up is displaying with half the page showing Opacity or Page Background

I'm currently working on a project that involves creating a pop-up window. CSS Styling <style type="text/css"> #modalPage { display: none; position: absolute; width: 100%; height: 100%; top: 0px; lef ...

javascriptjqueryhtmlcss

What causes the positioning difference between an HTML div element containing a p tag versus one containing an img tag?

While working on a coding project at Codecademy.com, I encountered an interesting issue. I had created several circle containers using <div> tags, which all lined up perfectly in a row when they were empty. However, when I inserted images into some o ...

htmlcssspacingparagraph

Creating a stunning image fade-in effect with CSS3

I have been working on a way to make images fade in using CSS3 once they have finished loading. However, I am facing an issue where the image fades in and out for a brief moment twice instead of just being blank and fading in. My attempt at a solution inv ...

javascriptjqueryhtmlcss

The Django view function is failing to add new records to the database

Whenever I attempt to create a record in the FinTransDetail table as an admin, I encounter errors. This is preventing me from adding records successfully. Any assistance in resolving these issues would be greatly appreciated. Additionally, since I am unabl ...

pythonhtmldjangoforeign-keysadmin

code snippet in ckeditor submission eliminating the use of specific color combinations

Currently, I am integrating a blog writing feature into my website. To achieve this, I have utilized ckeditor along with the ckeditor code snippet plugin for proper formatting of the code snippets. Everything seems to be functioning correctly while I' ...

phpjqueryhtmlckeditor