Opposing the fill attribute with the current color

Question

Opposing the fill attribute with the current color

Is there a way to reverse or eliminate the effect of fill: currentColor?

.svg-icon * {
  /* Targeting all sub-elements to customize icons with a specific color */
  fill: currentColor;
}

.svg-icon.iconLogoGlyph * {
  /* How do I cancel out fill: currentColor further down the cascade? */
  fill: inherit;
  /* I want to display the original colors from the SVG */
}

<svg role="icon" class="svg-icon iconLogoGlyph" width="25" height="30" viewBox="0 0 25 30"><g fill="none"><path fill="#BCBBBB" d="M21 27v-8h3v11H0V19h3v8z"></path><path fill="#F48024" d="M5.402 19.101l13.561 1.96.164-2.38-13.256-2.547-.469 2.967zM7.2 12.3l12 5.6 1.1-2.4-12-5.6-1.1 2.4zm3.4-5.9l10.2 8.5 1.7-2-10.2-8.5-1.7 2zM17.1.2L15 1.8l7.9 10.6 2.1-1.6L17.1.2zM5 25h14v-3H5v3z"></path></g></svg>

I possess a series of icons created with SVG. Some of these icons include in-line styles with color indications. The common use case is to disregard these in-line fills and have them adopt the parent's color by specifying fill: currentColor in CSS. However, in certain instances, such as our logo, we'd prefer these inner colors to be visible. In other cases, like a footer, we'd like to replace the colors with a single chosen color.

Due to various reasons™, I am restrained to these classes present in the library. Each icon carries the class svg-icon and a more specific class, such as iconLogoGlyph in this scenario.

How can I nullify fill: currentColor solely using CSS, given that I am unable to modify the classes? I've tried using :not to target all classes except .iconLogoGlyph, but this approach does not allow me to utilize fill: currentColor when necessary.

What is the antithesis of fill: currentColor? It's neither fill: inherit nor fill: none. I require something along the lines of

fill: just take what's inside the SVG

🤔

css svg

Answer 1

Answer №1

If you want to optimize your SVG files, you can achieve this by slightly adjusting the structure. Instead of defining the fill directly on the path like this:

<path fill="#BCBBBB" d="..."></path>

You can wrap the path within a group tag and specify the fill on the group level like this:

<g fill="#BCBBBB"><path d="..."></path></g>

By doing this, the fill property works more efficiently as per the SVG specification:

The fill property doesn't apply to group elements, so setting it on the group level doesn't interfere with the individual path fill.
Fill is inherited, so the fill defined on the group will be inherited by the path objects inside it.

In your CSS, using *:not(g) instead of just * will optimize the default, making the path use the current color set by color properties. When using fill: inherit, the path will revert to inheriting the fill value from the parent group.

Here is an example of CSS code:

.svg-icon *:not(g) {
  fill: currentColor;
}

.svg-icon.iconLogoGlyph *:not(g) {
  fill: inherit;
}

You only need to apply this SVG structure change to icons where you want to utilize native colors. Icons that always need to use the current color do not require this adjustment.

Answer 2

If you want to optimize your SVG files, you can achieve this by slightly adjusting the structure. Instead of defining the fill directly on the path like this:

<path fill="#BCBBBB" d="..."></path>

You can wrap the path within a group tag and specify the fill on the group level like this:

<g fill="#BCBBBB"><path d="..."></path></g>

By doing this, the fill property works more efficiently as per the SVG specification:

The fill property doesn't apply to group elements, so setting it on the group level doesn't interfere with the individual path fill.
Fill is inherited, so the fill defined on the group will be inherited by the path objects inside it.

In your CSS, using *:not(g) instead of just * will optimize the default, making the path use the current color set by color properties. When using fill: inherit, the path will revert to inheriting the fill value from the parent group.

Here is an example of CSS code:

.svg-icon *:not(g) {
  fill: currentColor;
}

.svg-icon.iconLogoGlyph *:not(g) {
  fill: inherit;
}

You only need to apply this SVG structure change to icons where you want to utilize native colors. Icons that always need to use the current color do not require this adjustment.

Answer 3

Answer №2

Unfortunately, there is no specific property value for fill that meets your exact needs. To achieve the desired effect of recoloring specific icons, it is recommended to utilize CSS selectors that target those icons directly.

Answer 4

Unfortunately, there is no specific property value for fill that meets your exact needs. To achieve the desired effect of recoloring specific icons, it is recommended to utilize CSS selectors that target those icons directly.

Answer 5

Answer №3

If you're looking for an alternative approach, consider making a slight adjustment to your global fill: currentColor rule and also modify the colors of SVGs to maintain their original colors.

You can update your global rule to something similar to the following:

path:not(.important), circle:not(.important) {
    fill: currentColor;
}

Additionally, make sure to add the important class to all filled parts within your SVGs, for example:

<path class="important" fill="#FFF" ...

This method, unlike using the <g> tag, allows for easy replacement of all necessary parts automatically using editor tools.

Answer 6

If you're looking for an alternative approach, consider making a slight adjustment to your global fill: currentColor rule and also modify the colors of SVGs to maintain their original colors.

You can update your global rule to something similar to the following:

path:not(.important), circle:not(.important) {
    fill: currentColor;
}

Additionally, make sure to add the important class to all filled parts within your SVGs, for example:

<path class="important" fill="#FFF" ...

This method, unlike using the <g> tag, allows for easy replacement of all necessary parts automatically using editor tools.

Opposing the fill attribute with the current color

Answer №1

Answer №2

Answer №3

Similar questions

Stylish Material Design Icons

Tips for eliminating the page margin in Java when converting HTML using iTextPdf with HTMLConverter

Design layout in Angular Material that wraps the content within it

What are the solutions for resolving problems with the display and functionality of a multi-page form in Internet Explorer?

I am currently working on creating a timer and I am looking to position these three buttons in a circular formation

At a specific media query breakpoint, links are disabled while the rest continue to function without any

Guide for positioning buttons in front of an image using HTML and CSS

Tips for eliminating the entire link from the footer section

Unlocking the Secret to Rotating a GroundOverlay on Google Maps

What is the best way to eliminate the final border in a row that has been applied using the <

Method for eliminating double quotes from a string bound in Angular

Safari 5.1.7 causing unusual behavior on the website

Aligning the H3 and Anchor tags at the bottom of the page

Right-align SELECT-OPTIONS text

utilizing a dynamic value within CSS modules for class naming

Can the styling and variables of Bootstrap4 be altered dynamically?

text box with an immobile header

Utilizing Fancybox with a polymer paper-card: A step-by-step guide

Selection of child elements using CSS selectors

Tips for achieving a static background image while allowing scrolling on a webpage in asp.net