Experiment with styling inline SVGs using CSS

Created on 20 July 2014, about 11 years ago

Updated 27 June 2025, about 2 months ago

Problem/Motivation

At the moment we handle icons with different colours by having several different folders with alternate versions of SVGs:

.toolbar-bar .toolbar-icon-menu:before {
  background-image: url("../../../misc/icons/bebebe/hamburger.svg");
}
.toolbar-bar .toolbar-icon-menu:active:before,
.toolbar-bar .toolbar-icon-menu.active:before {
  background-image: url("../../../misc/icons/ffffff/hamburger.svg");
}

I was about manipulating svg icons with css and it seems like a way to reduce page weight and improve maintenance. The potential here is exciting:

The big difference is instead of including the SVG as a CSS background image you have to embed it into the HTML. This looks quite simple to do in PHP but it would be nice to have some way of handling this easily in the theme system.

Browser support for inline svg is not that different to svg, Opera Mini does not support it though.

Proposed resolution

Let's see how feasible and desirable it is to shift svg inline

Remaining tasks

Discuss advantages and disadvantages
Proof of concept patch

User interface changes

API changes

📌 Task

Status

Postponed: needs info

Version

11.0 🔥

Component

theme system

Created by

🇬🇧United Kingdom lewisnyman Nomadic

Live updates comments and jobs are added and updated live.

frontend

CSS
It involves the content or handling of Cascading Style Sheets.

icons

stale-issue-cleanup
To track issues in the developing policy for closing stale issues, [Policy, no patch] closing older issues

Incomplete comments

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Comment about 2 months ago →
🇺🇸United States smustgrave
Thank you for creating this issue to improve Drupal.

We are working to decide if this task is still relevant to a currently supported version of Drupal. There hasn't been any discussion here for over 8 years which suggests that this has either been implemented or is no longer relevant. Your thoughts on this will allow a decision to be made.

Since we need more information to move forward with this issue, the status is now Postponed (maintainer needs more info). If we don't receive additional information to help with the issue, it may be closed after three months.

Thanks!

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024