Contrib.social

Optimize SVGs (Libricons)

Open on Drupal.org →
Created on 4 August 2014, almost 11 years ago
Updated 27 June 2025, 9 days ago

Follow-up to #2032773: Use Libricons (icon font) in Seven, consider using it more broadly in core →

Problem/Motivation

Drupal 8 is aiming for 100% SVG icons support. Many icons have a number of different colors. This adds quite a lot of extra HTTP requests.

Proposed resolution

There are a number of things we can do to further optimize performance and set an example for contrib with the following steps:

  1. Manual SVG optimization of icons to remove extraneous path points.
  2. Run all the SVG files through an SVG optimizer such as http://www.petercollingridge.co.uk/svg-optimiser or svgo to strip out any unnecessary tags, attributes, groups, round paths to 2 or 3 decimal places, etc. (This has already been done with the existing SVGs in core/misc/icons, yay!)
  3. Combine all colors of a given icon into a single "sprited" SVG file. Use the fill="" attribute to designate a different color for each path in the combined SVG. Use CSS background-position to determine a color within the sprite.
  4. Compress the resulting sprited SVGs to SVGZ. The duplicate path codes will compress down very nicely, adding only a few bytes for each color variant. This step is also debatable because most modern web-servers can automatically gzip the content it serves on the fly for you. The general consensus though is to compress static resources, and not depend on the web-server to do this for you. Note: serving SVGZ files does require the web-server be configured with the correct mime type. There are additions to .htaccess that can be done to achieve this.
  5. Embed (uncompressed) SVGs directly into an icon stylesheet using inline data URI: background-image: url('data:image/svg+xml;...') to reduce the number of HTTP requests. Note: SVGZ cannot be placed inline in data URIs because there is no way to denote that the content is gzipped.
  6. Automate the entire optimization process with a script that leverages other open source command line tools such as grunt, svgo, grunticon, etc so that future additions, themes, and contrib can also benefit from a single standardized and community-vetted procedure. These third party command line tools would not need to be added to the Drupal codebase, but any front end dev working on adding new icons could install the tools locally and run the generation script.

Remaining tasks

  1. Community consensus.
  2. Decide which is a better optimization: serving SVGZs or inlining SVG Data URIs.
  3. write a script as proof of concept
📌 Task
Status

Postponed: needs info

Version

11.0 🔥

Component

theme system

Created by

🇪🇨Ecuador jwilson3

Live updates comments and jobs are added and updated live.
  • stale-issue-cleanup

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

Sign in to follow issues

Comments & Activities

Not all content is available!

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

  • Comment 9 days 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