Un-inline SVGs in pcss.css files, add build tool to inline them when compiled

Created on 2 October 2019, about 5 years ago
Updated 15 September 2023, over 1 year ago

Problem/Motivation

Originally from
From #3079738-49: Add Claro administration theme to core ā†’ :

  1. +++ b/core/themes/claro/css/dist/components/action-link.css
    @@ -0,0 +1,276 @@
    +  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14px' height='16px' viewBox='0 0 14 16'%3E%3Cpath fill='%23545560' d='M13.9,2.9c-0.1-0.4-0.2-0.6-0.2-0.6c-0.1-0.4-0.4-0.4-0.8-0.5l-2.3-0.3c-0.3,0-0.3,0-0.4-0.3 C9.8,0.5,9.7,0,9.3,0H4.7C4.3,0,4.2,0.5,3.8,1.3C3.7,1.5,3.7,1.5,3.4,1.6L1.1,1.9C0.7,1.9,0.4,2,0.3,2.3c0,0-0.1,0.2-0.2,0.5 C0,3.4-0.1,3.3,0.4,3.3h13.2C14.1,3.3,14,3.4,13.9,2.9z M12.4,4.7H1.6c-0.7,0-0.8,0.1-0.7,0.6l0.8,10.1C1.8,15.9,1.8,16,2.5,16h9.1 c0.6,0,0.7-0.1,0.8-0.6l0.8-10.1C13.2,4.8,13.1,4.7,12.4,4.7z'/%3E%3C/svg%3E");
    

    šŸ¤“ Have these SVGs been optimized?

    šŸ¤”šŸ¤”šŸ¤” More importantly: why are these inlined already? (These were done in #3036732: Action link component ā†’ .) I'm sure that the build tools ( #3060153: Use PostCSS in core, initially only for Claro ā†’ ) allow this to happen at build time? That'd make it much easier to inspect the SVGs, to apply SVG optimization tools, to encourage reuse, etc. It also allows us to decide whether we truly want to inline these as data: URIs, or whether it makes more sense to let them be loaded by HTTP requests. This particular CSS file is 24 KB ungzipped and unminified. That's ā€¦ a lot. Most of that is due to these inlined SVG files (this CSS file is the single largest CSS file in Claro).

    In other words: for developer ergonomics and for web performance optimization reasons I think we should consider changing this.

    In #3083657: Devise strategy to address several SVG loading+usage issues ā†’ , it was agreed this was a sound approach.

Proposed resolution

Evaluate a build tools that will inline the SVGs from the .pcss.css files when compiled to their .css counterparts.

For each inlined svg either:

  1. Un-inline
  2. Or document why it's inlined

For all of them, regardless of the above choice: optimize them. Using for example https://imageoptim.com.

Remaining tasks

User interface changes

None.

API changes

None.

Data model changes

None.

Release notes snippet

N/A

šŸ“Œ Task
Status

Fixed

Version

9.1

Component
ClaroĀ  ā†’

Last updated 1 day ago

Created by

šŸ‡§šŸ‡ŖBelgium wim leers Ghent šŸ‡§šŸ‡ŖšŸ‡ŖšŸ‡ŗ

Live updates comments and jobs are added and updated live.
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.

Production build 0.71.5 2024