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

Problem/Motivation

SVG assets provided by Drupal core vary widely in code consistency and size. We don't have a standardized set of guidelines to follow for creating new optimized SVGs in core and contrib.

Proposed resolution

Optimize performance of core SVG based on a defined set of guidelines that both core and contrib can follow:

  1. Prefer fill- over stroke-style paths.
  2. Reduce extraneous points in paths. Illustrator and Figma have ways to simplify paths with redundant or "clustered" points.
  3. Combine <path>s of the same fill/stroke (when practical).
  4. Consolidate unnecessary <g> (groups) down to a single path (when practical).
  5. Use svgo to strip harmful tags (like id), strip unnecessary attributes, order attributes, combine groups and paths, and round paths to 1, 2, or 3 decimal places (see floatPrecision below).
  6. Ensure decorative SVGs contain the same attributes in the same order: xmlns, aria-hidden="true" focusable="false", viewBox="0 0 X Y" width="X" height="Y", fill and stroke (optional)
  7. For 16×16 icons, floatPrecision: 1 is reasonable as long as the optimized output is visually checked. For very simple grid-aligned icons should aim for integer precision when possible and doesn't compromise the design aesthetic; for curves or hand-tuned paths, 2 decimals may be safer.
  8. Provide a standardized optimization pipeline (leveraging svgo with explicit options) so that future additions, themes, and contrib can also benefit from a single standardized and community-vetted procedure. Add svgo to core yarn dependencies; use it to run the optimization script.
  9. (Speculative, far future) provide an automated Gitlab CI test that validates whether newly introduced SVGs are optimized.

Remaining tasks

  1. Draft MR
  2. Consolidate / close child issues.

Comments

damien tournoud’s picture

damien tournoud commented

Investigate if creating our own SVGZ files is desirable: Is the percentage of users that have browsers that don't accept gzipped files <1% yet? What happens if we serve an SVGZ to a browser that doesnt accept SVGZ?

Virtually 100% of the browsers will accept SVGs served with a Content-Encoding: gzip, because that's just a standard HTTP mechanism. On the other hand, virtually no browser supports SVGz served without the special header, or reading SVGz images from data: uris.

jwilson3’s picture

jwilson3
Primary language English
Location Ecuador
commented

Virtually no browser supports SVGz served without the special header, or reading SVGz images from data: uris.

The special header part I knew about. Good info here by the way: http://kaioa.com/node/45. The general consensus is that not compressing your own static resources and letting mod_deflate do it for you is considered wasteful.

The second part about "Reading SVGz images from data uris" I had suspected may be true, but wasn't able to turn up any documentation about it. Here is something I just found that corroborates your statement: http://benfrain.com/tips-for-using-svgs-in-web-projects/

So It looks like we would have to choose between compressing to SVGZ at their separate URLs (to reduce kilobytes), OR embedding regular SVGs as data uris inside CSS (to reduce http requests). I would lean towards the later. What do you think @Damien T?

jwilson3’s picture

jwilson3
Primary language English
Location Ecuador
commented
Status: Needs work » Active

Just noticed dreditor cloned this with the wrong status. No patch here yet. Resetting to Active.

jwilson3’s picture

jwilson3
Primary language English
Location Ecuador
commented
Issue summary: View changes

We can also optimize svgs by doing manual review of each icon in an image editor tool like inkscape or illustrator to remove extraneous path points.

jwilson3’s picture

jwilson3
Primary language English
Location Ecuador
commented
Issue summary: View changes

Incorporated feedback from #1 into issue summary.

jwilson3’s picture

jwilson3
Primary language English
Location Ecuador
commented
Related issues: +#1846970: [meta] Responsive Toolbar follow-ups, +#1849078: Replace many toolbar icon files with a single CSS sprite image
jwilson3’s picture

jwilson3
Primary language English
Location Ecuador
commented
Issue tags: +frontend performance, +sprite, +Spark, +toolbar-followup

Pulling over tags from #1849078: Replace many toolbar icon files with a single CSS sprite image for visibility.

lewisnyman’s picture

lewisnyman
he/him
commented
Related issues: +#2306499: Experiment with styling inline SVGs using CSS

Related: #2306499: Experiment with styling inline SVGs using CSS

damien tournoud’s picture

damien tournoud commented

@jwilson3: typically, we serve CSS themselves compressed, so in terms of pure size it should not make that big of a difference (needs some experimentation, of course) between separate SVGz and SVG embedded as base64 inside CSS.

Thinking about it, we might want to synchronize the base64 encoding so that SVG tags always end up at byte boundaries to improve the compression process (because base64 encodes 3 original bytes into 4 encoded bytes, you are going to get a vastly different representation for the same tag if it is not aligned on a 3-byte boundary, so we might want to add space padding so that all the tags end up on a boundary to improve compression rates).

jbrown’s picture

jbrown commented

Here is the issue for serving SVGZ with the correct encoding: #2092245: SVGZ isn't served with correct encoding.

jbrown’s picture

jbrown commented
Related issues: +#2092245: SVGZ isn't served with correct encoding
joelpittet’s picture

joelpittet
he/him
Primary language English
Location Vancouver
commented

I've gulpified and automated the SVG generation of libricons, I could also add some kind of optimize there too if you'd like. Got commit access from @ry5n.

andrewmacpherson’s picture

andrewmacpherson commented
Version: 8.0.x-dev » 8.1.x-dev

Bump version

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.

smustgrave’s picture

smustgrave commented
Status: Active » Postponed (maintainer needs more info)
Issue tags: +stale-issue-cleanup

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!

smustgrave’s picture

smustgrave commented

wanted to bump this 1 more time.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.

jwilson3’s picture

jwilson3
Primary language English
Location Ecuador
commented
Title: Optimize SVGs (Libricons) » Optimize SVGs with SVGO
Issue summary: View changes
Status: Postponed (maintainer needs more info) » Active

The issue summary and title have been updated. Several items were removed from scope, including SVGZ support, an icon stylesheet, and base64-encoded SVGs.

These days, HTTP requests are generally cheaper than the complexity of creating and maintaining SVG sprites. Supporting multiple icon colors is also better handled with inline SVGs. That is out of scope for this optimization-focused issue, but we can at least prepare core SVGs so they can be inlined safely and accessibly later.

The updated scope is therefore narrower: provide a standardized SVG optimization pipeline in core, using a Yarn dependency on SVGO, with documented commands and options for optimizing SVGs consistently.

Speculative future follow-up: add a GitLab CI check that validates whether newly introduced SVGs are optimized.

jwilson3’s picture

jwilson3
Primary language English
Location Ecuador
commented
Issue summary: View changes