Druckbare Version
Ein Hallo in die Runde,
gerne möchte ich, wie der Titel schon verrät, eine svg Grafik als solche einbinden, um über CSS fill/stroke usw. steuern zu können. Welchen Codeschnipsel benötige ich dazu, damit es nicht im img tag landet?
In diesem Fall binde ich ein normales Bild folgendermaßen ein:
Wie schaut es bei einer svg aus?HTML-Code:<img src="<?= $this->getImageObject($this->category_image)->src ?>">
Da müsstest du den Inhalt mit file_get_contents (oder ähnlichem) auslesen und ausgeben.
Für "reines" Inline SVG erstelle ich im Contao templates Verzeichnis ein template ala "icon-xyz.html5" mit den optimierten SVG Daten und binde das dann über das InsertTag {{file::icon-xyz.html5}} ein.
Via css kann man das dann variieren .icon svg {fill: red;} etc. bzw. wenn das SVG fill="currentColor" beinhaltet auch ganz normal über .icon {color: red;} zum Beispiel ...
Allerdings unhandlich bei vielen Icons ...
Mit folgenden Infos bietet sich an die SVG Icons als encoded background url's zu pflegen und damit dann gegebenenfalls in der data url mit verschiedenen color fills zu arbeiten:
https://css-tricks.com/probably-dont-base64-svg/
https://codepen.io/tigt/post/optimiz...s-in-data-uris
https://hackernoon.com/how-to-use-sa...g-3ecdfc53ea91
Hat zwar so nichts mit der Erweiterung zu tun - ist eher eine grundsätzliche Frage zur Vorgehensweise ...
Ich wäre auch an eurer "best proofed" Vorgehensweise hierzu interessiert.
Franko