Bug #86280

SVG images are not scaled in the backend page tree

Added by Thomas Löffler about 1 year ago. Updated 4 months ago.

Status:
New
Priority:
Must have
Assignee:
-
Category:
Pagetree
Target version:
-
Start date:
2018-09-17
Due date:
% Done:

0%

TYPO3 Version:
9
PHP Version:
7.2
Tags:
Complexity:
Is Regression:
Sprint Focus:

Description

When I register a SVG icon and use it as an icon for a page type, the icon will be scaled in all views but in the page tree, see attached screenshot.

Just_News__TYPO3_CMS_9_4_0_.jpg View (28.3 KB) Thomas Löffler, 2018-09-17 09:37

typo3_nomargins.svg View (2.1 KB) Thomas Löffler, 2018-09-27 11:51

Icon_in_Pagetree.png View (11.7 KB) Thomas Goetz, 2018-12-10 10:11

2019-05-19 07_21_38-Entwicklerwerkzeuge - düddelei [TYPO3 CMS 9.5.5] - https___dueddelei.local_typo3.png View - Why is the original SVG missing? (26.9 KB) Dieter Porth, 2019-05-19 07:43

2019-05-19 07_30_35-Entwicklerwerkzeuge - düddelei [TYPO3 CMS 9.5.5] - https___dueddelei.local_typo3.png View - Redefined Code with developer-tool to get normal result (73.2 KB) Dieter Porth, 2019-05-19 07:43


Related issues

Related to TYPO3 Core - Bug #87000: TYPO3 pagetree: custom SVG files aren't scaled Closed 2018-11-25
Related to TYPO3 Core - Bug #83821: SvgTree / SelectTreeElement - Various issues / improvement possibilities New 2018-02-09
Related to TYPO3 Core - Bug #88390: Icon in Pagetree too big Closed 2019-05-18

History

#1 Updated by Thomas Löffler about 1 year ago

#2 Updated by Georg Ringer 12 months ago

  • Status changed from New to Needs Feedback

hm can't really reproduce that, can you check out EXT:news which has a svg in tree as well (ext-news-folder-tree.svg)

#3 Updated by Thomas Löffler 12 months ago

The icon in EXT:news has already a viewbox with "0 0 16 16". Try a SVG image with another viewbox. Try the attached file.

#4 Updated by Saskia Schreiber 11 months ago

Thomas Löffler wrote:

The icon in EXT:news has already a viewbox with "0 0 16 16". Try a SVG image with another viewbox. Try the attached file.

I can confirm this, once the viewbox is larger than 16x16 the icon overflows. There is basically no resizing happening in the node.

#5 Updated by Riccardo De Contardi 10 months ago

  • Status changed from Needs Feedback to New

#6 Updated by Riccardo De Contardi 10 months ago

  • Related to Bug #87000: TYPO3 pagetree: custom SVG files aren't scaled added

#7 Updated by Daniel Dorndorf 10 months ago

I can confirm this too, I wanted to register a fontawesome icon for a new page type.

You'll have to register a custom svg with height width and viewbox set to 16x16px, else the icon will break out of the layout

#8 Updated by Thomas Goetz 9 months ago

The same behavior can also be observed in the category tree.
The icon I used here had a viewbox of 512x512.

#9 Updated by Lars Peter Søndergaard 6 months ago

The SVG icons are injected with some kind of IE11 workaround and the <svg> element is replace with a <g> element:

https://github.com/TYPO3/TYPO3.CMS/blob/v9.5.5/typo3/sysext/backend/Resources/Public/JavaScript/SvgTree.js#L693

This results in width/height/viewBox attributes (on the now <g> element) being completely ignored and only the natural objects position/scaling values are used.

I experimented a bit and it can be solved by applying a transform to the new <g> element or wrap it with another one. Though I'm unsure if this would be a good solution.
I used the following as guidance:

https://stackoverflow.com/questions/24470631/get-rid-of-viewbox-transform-in-an-inkscape-generated-svg

#10 Updated by Dirk Wildt 5 months ago

I tried to fix this bug like described above. But without success.

Do you have any idea?

Thanks
Dirk

This is my SVG:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="16pt" version="1.1" xmlns="http://www.w3.org/2000/svg" height="16pt" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <linearGradient id="Grad0" y1="0" x1="0" y2="16" gradientUnits="userSpaceOnUse" x2="16">
   <stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
   <stop offset="50%" stop-color="#ff5e00" stop-opacity="1"/>
  </linearGradient>
 </defs>
 <g id="Hintergrund">
  <g transform="translate(0, -1.42109e-14)">
   <path style="fill:url(#Grad0); fill-rule:evenodd;" d="M0 0 L16 0 L16 16 L0 16 L0 0 Z"/>
   <path style="fill:none; stroke:none;" d="M0 0 L16 0 L16 16 L0 16 L0 0 Z"/>
  </g>
  <path style="fill:#ffffff; fill-rule:evenodd;stroke:none;" d="M0.00235939 2.72918 L0.00493328 2.72918 C0.00493328 2.99622 0.220282 3.21264 0.486679 3.21543 L0.486679 3.21586 L13.4331 3.21586 L13.4331 3.21564 C13.7008 3.21435 13.9176 2.99729 13.9176 2.72918 L13.9198 2.72918 L13.9198 0.485821 L13.9198 0.485821 C13.9194 0.217493 13.7016 0 13.4331 0 L13.4331 0 L0.486679 0 L0.486679 0 C0.217922 0 0 0.218137 0 0.486679 C0 0.495044 0.0021449 0.50298 0.00257389 0.511345 L0.00235939 2.72918 Z" transform="translate(1.04, 1.04043)"/>
  <path style="fill:#ffffff; fill-rule:evenodd;stroke:none;" d="M13.4329 0 L13.4329 0 L0.486679 0 L0.486679 0 C0.217922 0 0 0.218137 0 0.486679 C0 0.495044 0.0021449 0.50298 0.00257389 0.511345 L0.00257389 2.72918 L0.00514777 2.72918 C0.00514777 2.99622 0.220496 3.21264 0.486893 3.21543 L0.486893 3.21586 L13.4333 3.21586 L13.4333 3.21564 C13.701 3.21435 13.9179 2.99729 13.9179 2.72918 L13.92 2.72918 L13.92 0.485821 L13.92 0.485821 C13.9191 0.217493 13.7014 0 13.4329 0 Z" transform="translate(1.04, 6.39218)"/>
  <path style="fill:#ffffff; fill-rule:evenodd;stroke:none;" d="M13.4329 0 L13.4329 0 L0.486679 0 L0.486679 0 C0.217922 0 0 0.218137 0 0.486679 C0 0.495044 0.0021449 0.50298 0.00257389 0.511345 L0.00257389 2.72918 L0.00514777 2.72918 C0.00514777 2.99622 0.220496 3.21264 0.486893 3.21543 L0.486893 3.21586 L13.4333 3.21586 L13.4333 3.21564 C13.701 3.21435 13.9179 2.99707 13.9179 2.72896 L13.92 2.72896 L13.92 0.485606 L13.92 0.485606 C13.9191 0.217493 13.7014 0 13.4329 0 Z" transform="translate(1.04, 11.7437)"/>
 </g>
</svg>

#11 Updated by Riccardo De Contardi 4 months ago

  • Related to Bug #83821: SvgTree / SelectTreeElement - Various issues / improvement possibilities added

#12 Updated by Riccardo De Contardi 4 months ago

  • Related to Bug #88390: Icon in Pagetree too big added

#13 Updated by Dieter Porth 4 months ago

The Icon-management of TYPO3 may cause the error, because it converts the original SVG-Tag into a G-Tag. The estimated viewBox will not work and the Icon will use the coordinates of the main SVG.
In contrast to HTML the SVG allow the Usage of the SVG-Tag in the body. Embeded SVG is a common technique, to solve many problems in a simple way.
[[https://stackoverflow.com/questions/5451135/embed-svg-in-svg]]

If I use a svg instead of g in the pagetree for the node-icon-container and add the original viewbox and set an correct transfer, then the icon has normal size.
(see screenshots)

I hope, the hints will help you to solve the problem. I tried your workaround, to convert the icons to 16*16-matrix by using embeded SVG's. But the following-construction failed:

<!-- This won't work as workaround. Embeded SVG are not correctly interpreted by the Icon-Registry of TYPO3 9.5.5 -->
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
        xmlns:dc="http://purl.org/dc/elements/1.1/" 
        xmlns:cc="http://creativecommons.org/ns#" 
        xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
        xmlns:xlink="http://www.w3.org/1999/xlink" 
        xmlns="http://www.w3.org/2000/svg" 
        width="100%" 
        height="100%" 
        version="1.1" 
        viewBox="0 0 16 16" 
        preserveAspectRatio="xMinYMin meet" 
>
    <defs>
        <svg
                xmlns:dc="http://purl.org/dc/elements/1.1/" 
                xmlns:cc="http://creativecommons.org/ns#" 
                xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
                xmlns="http://www.w3.org/2000/svg" 
                xmlns:xlink="http://www.w3.org/1999/xlink" 
                id="myOriginal" 
                width="100%" 
                height="100%" 
                viewBox="0 0 64 64" 
                preserveAspectRatio="xMinYMin meet" 
        >
...
        </svg>
    </defs>
    <use xlink:href="#myOriginal" x="0" y="0" width="16" height="16"/>
</svg>

The rebuilding with the symbol-tag works, but the symbol-tag don't allow for example the usage of <LinearGradients> :-(

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
        xmlns:dc="http://purl.org/dc/elements/1.1/" 
        xmlns:cc="http://creativecommons.org/ns#" 
        xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
        xmlns:xlink="http://www.w3.org/1999/xlink" 
        xmlns="http://www.w3.org/2000/svg" 
        width="100%" 
        height="100%" 
        version="1.1" 
        viewBox="0 0 16 16" 
        preserveAspectRatio="xMinYMin meet" 
>
    <defs>
        <symbol
                xmlns="http://www.w3.org/2000/svg" 
                xmlns:xlink="http://www.w3.org/1999/xlink" 
                id="myOriginal" 
                viewBox="0 0 64 64" 
                preserveAspectRatio="xMinYMin meet" 
        >
....
        </symbol>
    </defs>
    <use xlink:href="#myOriginal" x="0" y="0" width="16" height="16"/>
</svg>

It seems to me, that TYPO3 don't wrongly allow embeded SVG.
It was really hard to find this solution, because the caching was really unpredictable.

Also available in: Atom PDF