Feature #77048

Backend: Embed SVG icons and flags in css

Added by Thomas Mayer over 4 years ago. Updated over 4 years ago.

Status:
New
Priority:
Should have
Assignee:
-
Category:
Backend User Interface
Target version:
-
Start date:
2016-07-11
Due date:
% Done:

0%

Estimated time:
PHP Version:
Tags:
Complexity:
Sprint Focus:

Description

TYPO3 CMS 7 introduces usage of SVG in icons and flags. Which is great.

TYPO3 7.6 uses code like

<span class="t3js-icon icon icon-size-small icon-state-default icon-flags-de" data-identifier="flags-de">
  <span class="icon-markup">
    <img src="/typo3/sysext/core/Resources/Public/Icons/Flags/SVG/DE.svg" height="16" width="16">
  </span>
</span>

Which has disadvantages:

- Performance: One request per SVG icon/flag (compare that to sprites for .PNGs)
- URL's of icons embedded in HTML (contradicts css paradigm and blows up HTML code in size)
- Bad compression per SVG while better compression is likely over multiple SVG's (less entropy)
- Bad caching: Loading a "new" SVG still requires one request even if 99% are cached already

I suggest to encode all the icons and css into one or few css files using css syntax like

background: url('data:image/svg+xml;base64,<encoded svg>') no-repeat 1.3rem 0.25rem;

Advantages:
- a simple css class can do the trick. Like it did as of TYPO3 6.2.
- output of explicit URL (img SRC=) is obsolete
- get a better compression theoretically (larger file with bad entropy instead of many small files with better entropy per file)
- Compatibility of 7.6 and 8 without a breaking change if only css classes are used by an extension (without IconFactory or IconUtility, e.g. in javascript)
- still have all the benefits of SVG.
- improve backend's performance significantly (every time an icon is used!)

To be discussed: Browser support. I guess this is not an issue for the backend any more, at least if modern browsers can be assumed.


Related issues

Related to TYPO3 Core - Bug #76996: Language flags (css classes and sprites) got removed in 7.6.0ClosedFrank Naegler2016-07-09

Actions
Related to TYPO3 Core - Feature #69706: Add InlineSvgIconProviderClosedBenjamin Kott2015-09-11

Actions
Related to TYPO3 Core - Feature #77224: Backend: Icon registration: Cache SVG files in css fileNew2016-07-11

Actions
#1

Updated by Thomas Mayer over 4 years ago

Example with flags (encoded with SASS/Compass):

.t3-icon-flags-de {
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAwIiBoZWlnaHQ9IjYwMCIgdmlld0JveD0iMCAwIDUgMyI+PGRlc2M+RmxhZyBvZiBHZXJtYW55PC9kZXNjPjxwYXRoIGQ9Ik0wIDBoNXYzSDB6Ii8+PHBhdGggZmlsbD0iI0QwMCIgZD0iTTAgMWg1djJIMHoiLz48cGF0aCBmaWxsPSIjRkZDRTAwIiBkPSJNMCAyaDV2MUgweiIvPjwvc3ZnPg==') no-repeat 1.3rem 0.25rem;
}
.t3-icon-flags-gb {
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MCAzMCIgd2lkdGg9IjEyMDAiIGhlaWdodD0iNjAwIj48Y2xpcFBhdGggaWQ9ImEiPjxwYXRoIGQ9Ik0zMCAxNWgzMHYxNXp2MTVIMHpIMFYwelYwaDMweiIvPjwvY2xpcFBhdGg+PHBhdGggZD0iTTAgMHYzMGg2MFYweiIgZmlsbD0iIzAwMjQ3ZCIvPjxwYXRoIGQ9Ik0wIDBsNjAgMzBtMC0zMEwwIDMwIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iNiIvPjxwYXRoIGQ9Ik0wIDBsNjAgMzBtMC0zMEwwIDMwIiBjbGlwLXBhdGg9InVybCgjYSkiIHN0cm9rZT0iI2NmMTQyYiIgc3Ryb2tlLXdpZHRoPSI0Ii8+PHBhdGggZD0iTTMwIDB2MzBNMCAxNWg2MCIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEwIi8+PHBhdGggZD0iTTMwIDB2MzBNMCAxNWg2MCIgc3Ryb2tlPSIjY2YxNDJiIiBzdHJva2Utd2lkdGg9IjYiLz48L3N2Zz4=') no-repeat 1.3rem 0.25rem;
}
#2

Updated by Thomas Mayer over 4 years ago

This issue sounds to be pretty much the opposite of 69706. But 69706 allows to integrate SVGs into DOM for manipulation, presumably. HTML-inline SVG is at the cost of mitigating any sort of caching, plus blowing up the HTML code and contradicting CSS paradigm at its best. There's a use case for 69706, of course. So this feature should remain untouched.

However, DOM manipulation is not needed for static icons and flags. They're just background images. And 69706 is not applied for icons anyways in 7.6, as shown in the code example above (69706 is optional, not the default setting).

#3

Updated by Thomas Mayer over 4 years ago

This issue also does not worsen the number of round trips:

---> HTML ---> CSS (with SVG embedded as suggested by this issue)

versus current state (7.6):

---> HTML ---> CSS
---> HTML --=> SVG

versus using url() syntax in css for a request:

---> HTML ---> CSS --=> SVG

versus HTML-inline SVG (as suggested by 69706 for special use cases):

---> HTML (with SVG embedded) ---> CSS

while "--->" means that there is one round trip necessary
and "--=>" means there is one round trip necessary but with multiple requests (assumed CSS counts as one request).

So there's 2 round trips in 7.6 which does not increase by this issue (but might have been the reason for a design decision to not use url() syntax together with a http ressource/request in css because that requires 3 round trips).

While 7.6 requires one request per SVG (=> many), this issue requires none.

Upcoming HTTP/2 addresses the number of round trips and requests, however. So even the impact of using url() syntax for a request (instead of embedding SVG) could be limited by then.

#4

Updated by Riccardo De Contardi over 4 years ago

  • Category set to Backend User Interface

Also available in: Atom PDF