Tips for modifying the color scheme of an SVG image with CSS

I am in the process of changing the color of an SVG using CSS. The code I attempted below only alters the background color, but I also need to change the text color.

This is my original SVG.

https://i.sstatic.net/7lNE0.png

The desired output should look like this:

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

However, I'm currently getting this output:

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

Is there a way to achieve this with CSS?

.mylogo2 {
  fill: yellow;
  color: red
}
<div class="mylogo2">
  <svg xmlns="http://www.w3.org/2000/svg" width="187.684" height="58.885" viewBox="0 0 187.684 58.885">
  <g id="Sample_Logo" data-name="Sample Logo" transform="translate(-475 -511)">

    ... SVG PATH Data ...

  </g>
</svg>
</div>

htmlcsssvg

Answer №1

Ensure to update the fill color for the second path:

.mylogo2 {
  fill: yellow;
}

#Path_2 {
  fill: blue;
}
<div class="mylogo2">
  <svg xmlns="http://www.w3.org/2000/svg" width="187.684" height="58.885" viewBox="0 0 187.684 58.885">
  <g id="Sample_Logo" data-name="Sample Logo" transform="translate(-475 -511)">
    <path id="Path_1" data-name="Path 1" d="M0,19.038,187.684,0V39.848L0,58.885Z" transform="translate(475 511)"/>
    <path id="Path_2" data-name="Path 2" d="M6.888-8.456-.56-19.824H4.872l4.2,7.42,4.452-7.42H18.7L11.256-8.456V0H6.888ZM19.1-9.912a11.2,11.2,0,0,1,.8-4.312,9.457,9.457,0,0,1,2.226-3.29A9.807,9.807,0,0,1,25.508-19.6a12.213,12.213,0,0,1,4.284-.728,12.213,12.213,0,0,1,4.284.728,9...

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

Chrome not handling text wrapping within table cells properly

I'm facing an issue with a table I created using the bootstrap stylesheet. For some reason, the cells are not wrapping correctly in Chrome, although they display perfectly fine in IE and Firefox. You can check it out here: <form action="todos" m ...

htmlcsstwitter-bootstraphtml-table

Automatic responsive navigation bar in mobile view

As a novice in web programming, I'm facing an issue where the navigation bar shifts to the bottom when the mobile screen size changes. Many solutions online use the hamburger style, which I find less appealing. Here is how the mobile view looks befor ...

csslaravel-8bootstrap-5

When CSS is applied, the canvas is stretched, whereas it remains normal when `width` and `height` attributes are used

I own two canvases, one is sized using HTML attributes width and height, while the other is sized using CSS: <canvas id="canvas1" width="300" height="300" onmousedown="canvasClick(this.id);"></canvas> < ...

csshtmlcanvasheightwidth

If I desire to utilize a particular font that I am aware is not readily accessible on the majority of users' computers

Is it possible to embed a specific font into my website if I know it's not commonly available on users' computers? I've seen some websites using unique fonts as text and not images, so I'm curious about how that is achieved. Thank you, ...

javahtmlcss

Responsive design of HTML forms

I'm curious about the technology or concept behind Google's animations on their forms. I'm interested in incorporating it into my personal project. The use of radio buttons, checkboxes, and placeholders is particularly appealing. Is there ...

jqueryhtmlformsresponsive-design

The bullets in the HTML unordered list are partially hidden from view

My unordered list is experiencing issues with displaying bullets correctly. In Firefox and Internet Explorer, the bullets are only partially shown, while in Chrome they are not visible at all. Adding margin-left: 5px to the <li> element resolves this ...

csshtml-lists

I successfully utilized jquery to generate the radio buttons, and I am now looking to enhance their appearance with css styling

My radio buttons were created using jQuery in the following way: function load_genders(target){ genders = new Array("Male", "Female"); output = ""; i=0; for(i in genders){ output += "<input type='radio' name='gend ...

jquerycss

The appearance of HTML in JSP and CSS output in a Spring application is different from the local environment

For my web application's landing page, I created the design using HTML and CSS. Typically, I first design it on scratchpad.io before implementing it into my STS IDE. However, when I run the application, the output of the page appears different from th ...

htmlcssjspformatting

Troubleshooting the malfunction of images in Node.js located outside the HTML path

Currently, I'm developing a user profile page using nodejs where users can view their avatars after logging in. Users are able to upload files to the uploads folder which is located outside the standard htmlpath. Here's an overview of my folder s ...

htmlnode.jsexpresspugrelative-path

Including a variable in an array within a function

I'm encountering an issue with inserting a variable into my array. Below is the code snippet: var data = new Array(); google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("http://www.ntvmsnbc.com/id/24927681/device/r ...

javascripthtmlarrays

Creating a JavaScript button for text capitalization: A step-by-step guide

Is there a way to modify this script so that users are required to click a button in order for all text entered into the form to be converted to uppercase? I understand that the onclick function needs to be utilized, but I am uncertain about where and ho ...

javascripthtmlfunctionbutton

Steps for resetting the ng-multiselect-dropdown

Is it necessary to wrap the ng-multiselect-dropdown in a form in order to reset it? code - app.component.html <div> <p id = "node">Select a Root API Object - </p> <p style="width:50%"> <ng-multiselect-dropdown [placeho ...

htmlangulardrop-down-menudropdown

What could be causing the issue of JavaScript not being executed when an HTML file is converted from a string?

Working on a current project involves dealing with a DB2 database that houses an email template string of around 20,000 characters containing the HTML used for constructing forms. Previously, making changes to the string and reinserting it into the table ...

javascripthtml

What is the best way to display text from a header box across multiple line boxes in real time on an HTML page?

Looking to enhance an HTML layout with a header box and line comment boxes. <textarea name="order[header_comments]"></textarea> The line comment boxes are structured as follows: <textarea name="line_comments[0][line_comments]"></tex ...

javascriptjqueryhtmljquery-selectors

Encountering an issue following the update from Angular 8 to 12 - receiving the error message: "The 'controls' property is not present in the 'AbstractControl' type."

Previously, I had a fully operational code in Angular 8. Recently, I made the decision to upgrade from version 8 to Angular 12. The main feature of my project is a dynamic reactive form structured in a question-answer format. This form adapts based on the ...

htmlangulartypescript

What is causing the divs to not stretch across the entire width of the parent div?

Interactive Code Example: Snippet: <div style="width: 100%; overflow: hidden; height: 65px; background: #00CC00;"> <div style="width: 60%; overflow: hidden; float: left; background: #3074A3; color: #EDEDED; height: 65px; text-align: center; ...

htmlcss

Converting a JavaScript IIFE library into a React Component

Hello, I am currently in the process of learning React JS and there are two JavaScript files that I am working on: Polyfill.js -> hosted on github CustomNavbar.js -> created by me Here is the structure of polyfill.js: export default (function(win ...

javascripthtmlreactjsimportexport

Adjustable Columns in Bootstrap Table

After searching, I came across this documentation on how to make columns resizable in bootstrap tables. However, I am struggling to figure out how to actually implement this feature with an HTML table. Can someone please provide a clear example of how to ...

javascripthtmlcssbootstrap-4

What prevents Bootstrap 4 from breaking on mobile devices?

Here is the code I am working with: <div class="container-fluid"> <div class="row"> <div class="col-md-6"></div> <div class="col-md-6"></div> </div> </div> When I view this code in t ...

csstwitter-bootstrapbootstrap-4

Error in Syntax: Unforeseen symbol (Initial code)

Encountered Error: Unexpected token < Attempting to call a JavaScript function with console.log("hello world"); I am taking my initial steps into coding in Node.js without any frameworks, focusing on understanding the core and basic concepts of Node.j ...

javascripthtmlnode.js