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

CommentFileSizeAuthor
css-icons.gif287.17 KBLewisNyman
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

xmacinfo’s picture

xmacinfo
he/him
Primary language French
Location Canada
CreditAttribution: xmacinfo commented

Indeed! Adding a related issue.

xmacinfo’s picture

xmacinfo
he/him
Primary language French
Location Canada
CreditAttribution: xmacinfo commented
Related issues: +#1849078: Replace many toolbar icon files with a single CSS sprite image
pixelwhip’s picture

pixelwhip CreditAttribution: pixelwhip commented

Here's some quick and not necessarily comprehensive thoughts.

Advantages

  1. Inlining SVG's would reduce the amount of HTTP requests. This could also be helped by this sprite issue.
  2. Unused icons would not be downloaded, like they would if they were in a sprite.
  3. Inline SVG's could be styled with CSS (the reason for the issue).
  4. Individual shapes within an inline SVG can be linked with the xlink attribute. Not possible with background images but not really necessarry when dealing with small icons, so this is more of a difference than an advantage.
  5. Inline SVG's provide greater animation control via CSS.

Disadvantages

  1. Inline SVG's would not be cached as a separate assets.
  2. gzip could possibly be less affective than they would in a sprite, due to fewer repeating elements. This is probably offset by the fact that unused icons wouldn't be downloaded.
  3. Inline SVG icons can not be swapped out with CSS.

My hunch is that the disadvantages are performance related. Those are probably negligible when compared to sprites, but that can and should be tested. As you pointed out, there is about a 3% difference in browser support which looks like it's mainly due to Opera Mini. Seems like the styling advantages would be worth it.

Wim Leers’s picture

Wim Leers
Location Ghent 🇧🇪🇪🇺
CreditAttribution: Wim Leers commented

If/when we do this, this issue should definitely handle the toolbar icons (see #1849078: Replace many toolbar icon files with a single CSS sprite image for prior discussion, from #41 and later).

droplet’s picture

droplet CreditAttribution: droplet commented
Related issues: +#1849712: Add theming template and prepare logic for rendering icons
jwilson3’s picture

jwilson3
Primary language English
Location Ecuador
CreditAttribution: jwilson3 commented
Issue tags: +icons

Working now on an SVG guideline doc... your contributions and input/feedback are welcome: #2433761: [meta] svg guidelines / requirements Thanks!

andrewmacpherson’s picture

andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer commented
Version: 8.0.x-dev » 8.1.x-dev

Version: 8.1.x-dev » 8.2.x-dev

Drupal 8.1.0-beta1 was released on March 2, 2016, which means new developments and disruptive changes should now be targeted against the 8.2.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.0-beta1 was released on August 3, 2016, which means new developments and disruptive changes should now be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.0-alpha1 will be released the week of January 30, 2017, which means new developments and disruptive changes should now be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.0-alpha1 will be released the week of July 31, 2017, which means new developments and disruptive changes should now be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.5.x-dev » 8.6.x-dev

Drupal 8.5.0-alpha1 will be released the week of January 17, 2018, which means new developments and disruptive changes should now be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.6.x-dev » 8.7.x-dev

Drupal 8.6.0-alpha1 will be released the week of July 16, 2018, which means new developments and disruptive changes should now be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.7.x-dev » 8.8.x-dev

Drupal 8.7.0-alpha1 will be released the week of March 11, 2019, which means new developments and disruptive changes should now be targeted against the 8.8.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.