Basic SVG support

[tristanlins]

Add basic SVG support. Also resizing is supported.
I have not tested all edge cases now, but it works fine with the text and image content element :-)

This PR include #7107

[Toflar]

👯 👯 👯

[leofeyer]

Thanks a lot!

[Babelfisch]

Anmerkung: Die Größenangaben bei SVG-Bildern müssen nicht zwingend px sein, jede CSS-Einheit ist auch erlaubt. Außerdem kann der Wert ein Float sein, was bspw. Illustrator gerne macht und auch mal 42.2px hat.

Frage: Berücksichtigt die Lösung auch das Seitenverhältnis, so dass man auch mal 500px Breite ohne Höhe angeben kann und trotzdem ein richtig skaliertes SVG erhält?

[tristanlins]

@Babelfisch ja, dass mit den Größenangaben in anderen Einheiten ist mir bekannt, aber unmöglich für mich zu rechnen. Du kannst im Backend ja auch nur PX Angaben setzen, deshalb rechne ich aktuell alles nur mit PX.

Die Berechnung der neuen Größe erfolgt genau so, wie bisher. Du kannst also auch nur eine Breite oder nur Höhe angeben und es wird dann Proportional skaliert.

[Babelfisch]

Ich wollte es auch nur erwähnen. In meiner retina_images Erweiterung hatte ich mal einen einfach SVG-Support eingebaut und dort die Einheiten auch ignoriert, weil ich keinen Weg gesehen habe, das richtig zu behandeln.

Was aber vielleicht noch wichtig sein könnte wären die Float-Werte. intval knipst ja alles vor dem Komma weg und wenn es dumm kommt und als Werte bspw. width="0.5m"und height="0.3m" drin stehen, wird vermutlich das Seitenverhältnis nicht richtig ermittelt werden.

Was ich aber nicht ganz verstehe: Warum wird das SVG gecached und mit geänderten Viewport neu geschrieben? Ein SVG muss ja nicht extra skaliert werden und eigentlich reicht es doch aus, width und height im img-Element anzugeben und das Original-SVG auszugeben.

[tristanlins]

Was ich aber nicht ganz verstehe: Warum wird das SVG gecached und mit geänderten Viewport neu geschrieben?

Weil Contao die Bildgröße aus der Datei ausließt. An dem Verhalten habe ich nichts geändert (das wäre zu groß der Aufwand). Außerdem ist die Initiale Skalierung dann schon richtig gesetzt. FF neigt bspw. dazu, das SVG erst einmal in Originalgröße zu skalieren und dann erst auf die angeforderte Größe zu skalieren. Das sieht wirklich schlimm aus, wenn das Bild eine sehr große Originalgröße hat.

[Babelfisch]

Ok, ich verstehe. Firefox nutze ich nicht so häufig, da ist mir das noch nicht aufgefallen.

Danke auf jeden Fall, dass du dich dem Thema angenommen und umgesetzt hast!

[leofeyer]

@tristanlins Ich teste gerade Deinen PR und bekomme beim Resize folgenden Fehler:

Warning: Division by zero in system/modules/core/library/Contao/Image.php on line 307

$objFile->height gibt bei SVG-Bildern 0 zurück.

[tristanlins]

Also ich habs bei mir in einer Installation laufen und keine Probleme. Eventuell liegt es auch an der SVG, kannst du die eventuell mal posten? Vielleicht muss ich noch irgendwelche edge-cases Berücksichtigen.

[leofeyer]

Übernommen und entsprechend erweitert in 15201d0. Contao kann SVG-Bilder jetzt anzeigen und verkleinern und rechnet dabei die Einheiten pt, em und % entsprechend in Pixel um. Die einzige Voraussetzung für die Größenanpassung ist, dass das viewBox-Attribut in der Originaldatei gesetzt ist.

[tristanlins]

👍

[leofeyer]

@tristanlins Ich denke wir können auch SVGZ-Dateien editierbar machen und automatisch verkleinern, oder? Ist doch dasselbe XML-Format nur mit GZip komprimiert.

[leofeyer]

SVGZ-Support in 5858e97.

[tristanlins]

👍 very nice, SVG for the WIN!!! :-)