Contao + svg

[thannhäuser]

Hallo zusammen,

der Titel ist die Schlagwort-Kombi nach dem ich gegoogelt habe. Leider ohne Erfolg. Deshalb stelle ich hier die Frage.
Ich arbeite mit Version 3.5.19. SVG-Dateien können als Hintergrund-Bild und über das img-tag gut eingebunden werden. SVG's als Pfade über das svg-tag scheint aber nicht zu funktionieren? Ich habe in den "Einstellungen" unter "erlaubte HTML-Tags" <svg> ergänzt. Trotzdem können nicht einmal einfachste Illustrationen à la circle etc. dargestellt werden. Muss ich irgendwo sonst noch was eintragen? Ich habe auch den svg-Namespace-Code im Seitenlayout versuchsweise eingetragen. Hilft auch nicht.

Vielend Dank für eine Antwort.
Hans

[Spooky]

<svg> alleine reicht da doch nicht, oder?

[thannhäuser]

Vielen Dank für deinen Beitrag. Aber, was soll mir diese Antwort?

[Andreas]

Ich meine das wurde vor kurzem hier behandelt https://community.contao.org/de/show...Inhaltselement

[thannhäuser]

Vielen Dank, Andreas!
Das ist mein Thema. (Wenn ich in der Community im Suchfeld "svg" eingebe, bekomme ich keinen Hinweis auf diesen Beitrag.)
Allerdings wundere ich mich, wieso animierbare svg-Pfade umständlich über ein insert-tag laufen müssen, da sie doch als ganz normale html-Elemente konzipiert wurden.

Mit freundlichem Gruß, Hans

[thannhäuser]

Lösung für diejenigen, die es interessiert – ohne insert tags – (Beispiel):
1. Der Code muss so aussehen (Werte können variieren), mittels Contao - "Elementtyp html":
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400px" height="400px" viewBox="0 0 300 300">
<circle cx="100" cy="100" r="75" />
</svg>
2. unter "Einstellungen" müssen tatsächlich alle verwendeten tags eingetragen werden. Also "erlaubte html-tags": <svg> und <circle>.
3. css:
svg circle {
fill: deepPink;
transition: fill .3s ease-out;
}

svg circle:hover {
fill: #009966;
}

Gruß Hans

[lucina]

Jain, SVG ist schon noch was anderes als HTML - auch wenn Du das auf den ersten Blick sehr ähnlich finden magst.

SVG ist XML-basiert und besitzt damit grundständig andere Funktionalitäten als HTML-Elemente; ein SVG-Objekt besitzt dabei ein eigenes DOM. Dass inzwischen moderne Browser auch das XML eines SVG parsen können ist eher ein Glücksfall.

Die Eigenständigkeit von SVG bedeutet allerdings auch, dass man es nicht einfach als erweitertes HTML betrachten und einsetzen kann (es ist viel komplexer), denn dabei kommen noch mehr Sachen - wie beispielsweise XSLT, eigene Event-Handler, etc. - zum Tragen. Mit einem Subset kann man sicher ein wenig arbeiten, aber für die volle Pracht bräuchte es dann schon auch eine erweiterte XML-Unterstützung, möglicherweise am Besten mit einem eigenen Inhaltselemente-Typ. Wenn man beispielsweise transformieren, filtern oder animieren will dann ist man mit den Möglichkeiten von Contao ziemlich fix am Ende.

Aus meiner Sicht gibt es in Contao zur Zeit zwei Möglichkeiten - die eine spielt sich im /templates-Ordner ab, die andere im Bereich Module. Ich persönlich entscheide von Fall zu Fall je nach Aufgabenstellung, ob ich mit einer eigenen Erweiterung eine Backend-Logik zur Verfügung stelle, die dann auch SVG-Ausgabetemplates besitzen kann oder einfach meine SVG-Dateien in den /files-Ordner packe und die dann innerhalb eigener Module ausgebe. SVG ist soooo komplex (und weicht dann leider in vielen Details eben doch von den Möglichkeiten innerhalb von HTML ab).

Oft finde ich den Weg, ein Basis-SVG zu haben und dem dann via JSON die Informationen zum Verhalten mitzugeben sehr gut. Das muss man sich in Contao dann aber auch selbst zusammenbauen. Man kann dabei auch Insert-Tags nutzen, man kann es aber auch anders realisieren.

[thannhäuser]

Danke Lucina,
die ausführliche Erläuterung wird so manchem weiterhelfen.
Hans

[Spooky]

Vielen Dank für deinen Beitrag. Aber, was soll mir diese Antwort?

Da bist du mittlerweile schon selbst darauf gekommen »

2. unter "Einstellungen" müssen tatsächlich alle verwendeten tags eingetragen werden. Also "erlaubte html-tags": <svg> und <circle>.

[thannhäuser]

Ja, stimmt. Später, nach Andreas' Hinweis + Nachlesen, habe ich auch verstanden was du mit deiner Antwort gemeint hast!

[ro-a-fi]

Da mich das Thema auch schon lange beschäftigt, hier mal einen Ansatz, den ich seit einiger Zeit Verfolge.
Damit lässt sich die SVG Datei inline, auch mit Breite und Höhe, wie gewohnt über das Inhaltselement Bild einpflegen.

Ich lege unter Templates ein neues Template "ce_image-svg.html5" an, dass für Bild-Inhaltselement mit SVG Grafiken verwendet wird. Das Template sieht wie folgt aus:

<?php $this->extend('block_searchable'); ?>
<?php $this->block('content'); ?>
  <figure class="image_container"<?php if ($this->margin): ?> style="<?= $this->margin ?>"<?php endif; ?>>
    <?php if ($this->href): ?>
      <a href="<?= $this->href ?>"<?php if ($this->linkTitle): ?> title="<?= $this->linkTitle ?>"<?php endif; ?><?= $this->attributes ?>>
    <?php endif; ?>

    <!-- SVG Verwendung //-->
    <?php
        $xml = new SimpleXMLElement(file_get_contents($this->singleSRC));
        $xml->addAttribute("width",$this->picture["img"]["width"]);
        $xml->addAttribute("height",$this->picture["img"]["height"]);
        echo $xml->asXML();
    ?>

    <?php if ($this->href): ?>
      </a>
    <?php endif; ?>
    <?php if ($this->caption): ?>
      <figcaption class="caption"><?= $this->caption ?></figcaption>
    <?php endif; ?>
  </figure>
<?php $this->endblock(); ?>

Prinzipiell wird einfach der Teil, der sich normalerweise um das Rendern das Bildes kümmert, mit dem Auslesen einer SVG Datei ersetzt:
1. file_get_content liest den Inhalt der SVG Datei aus der Dateiverwaltung (über das im Inhaltselement gewählten Bild-Pfad [$this->singleSRC] )
2. addAttribute fügt dem svg Tag "width" und "height" hinzu (mit den Werten, die im Inhaltselement dem Bild mitgegeben werden) (sind width und height im SVG bereits vorhanden, sollte man diese einfach entfernen, oder natürlich die addAttribute Zeilen auskommentieren)
3. echo gibt das Ganze dann aus, sodass schließlich im Code das SVG inline als <svg>...</svg> ausgegeben wird

Auf diese Weise lässt sich die SVG Datei inline, als auch Breite und Höhe wie gewohnt über das Inhaltselement Bild einpflegen.

Im Script besteht durchaus noch Verbesserungspotential:
1. theoretisch könnte das Standard ce_image Template benutzt werden und eine Abfrage integriert, die ausliest, ob es sich um ein SVG Bild handelt, und es dann auf die vorgestellte Weise inline einbindet
2. addAttribute fügt width und height hinzu, auch wenn in der SVG Datei bereits width und height Attribute vorhanden sind, hier könnte man entsprechende Attribute dann eigentlich überschreiben

Ich hoffe es hilft irgendwem – und an Kommentaren und Verbesserungsvorschlägen zur Vorgehensweise bin ich natürlich sehr interessiert!

Grüße

[Grossvater]

Danke roafl,
leider motzt der w3c Validator. >> w3cval-err.png

Meine Code:

 <?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="320" height="512" viewBox="0 0 320 512">
<path d="M296 208h-8v-96c0-52.935-43.065-96-96-96h-64c-52.935 0-96 43.065-96 96v96h-8c-13.2 0-24 10.8-24 24v240c0 13.2 10.8 24 24 24h272c13.2 0 24-10.8 24-24v-240c0-13.2-10.8-24-24-24zM96 112c0-17.645 14.355-32 32-32h64c17.645 0 32 14.355 32 32v96h-128v-96z"/>
</svg>

[Spooky]

$xml->asXML(); 

liefert natürlich auch den korrekten XML Header - der darf aber bei inline SVG nicht mit ausgegeben werden.

[Grossvater]

Wie liefere ich inline svgs ohne xml header aus?

[Spooky]

Du könntest zB den String prozessieren und die erste Zeile nicht ausgeben bzw. löschen lassen.

[Grossvater]

OK, ich habe es mit meinen wenigen PHP Kenntnissen (und Freund Google) hinein-macgyver'ed:
picture_default_svg-inline.html5

$xml = new SimpleXMLElement(file_get_contents($this->img['src']));
$dom = dom_import_simplexml($xml);
echo $dom->ownerDocument->saveXML($dom->ownerDocument->documentElement); 

[mlweb]

Viele Grafikprogramme haben inzwischen auch die Möglichkeit SVGs für Web zu speichern, dann ist der XML-Header gar nicht da. Sogar der früher für seine SVG-Generierung arg gescholtene Adobe Illustrator kann das inzwischen.
Daneben gibt es einige hilfreiche Online-Tools die SVG fürs Internet aufbereiten/optimieren (z.B. https://jakearchibald.github.io/svgomg/), da wird glaub ich auch der XML-Header eliminiert (gestet hab ich es aktuell allerdings nicht)
Für einzelne SVGs kann man auch einen einfachen Code-Editor nutzen und den überflüssigen Code weglöschen.

[Spooky]

Viele Grafikprogramme haben inzwischen auch die Möglichkeit SVGs für Web zu speichern, dann ist der XML-Header gar nicht da. Sogar der früher für seine SVG-Generierung arg gescholtene Adobe Illustrator kann das inzwischen.
Daneben gibt es einige hilfreiche Online-Tools die SVG fürs Internet aufbereiten/optimieren (z.B. https://jakearchibald.github.io/svgomg/), da wird glaub ich auch der XML-Header eliminiert (gestet hab ich es aktuell allerdings nicht)
Für einzelne SVGs kann man auch einen einfachen Code-Editor nutzen und den überflüssigen Code weglöschen.

Das spielt in diesem Fall keine Rolle. Das Problem ist dieser Code:

<?php
        $xml = new SimpleXMLElement(file_get_contents($this->singleSRC));
        $xml->addAttribute("width",$this->picture["img"]["width"]);
        $xml->addAttribute("height",$this->picture["img"]["height"]);
        echo $xml->asXML();
    ?>

Egal welchen Content die SVG Datei hatte, mit dieser vorgehensweise wird, wie schon der Name der Funktion sagt, immer gültiges XML ausgegeben, also inklusive XML Header.

[fiedsch]

Vielen Dank für deinen Beitrag. Aber, was soll mir diese Antwort?

Daß Du für

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

nicht nur <svg> sondern auch <circle> erlauben müsstest. (usw. natürlich für alle weiteren Elemente Deiner SVG-Grafik).

Edit: eben erst gesehen, daß ich "zuweit oben" in der Historie des Threads war.

[Sahel]

nur zur Info: Der hier http://draw-svg.appspot.com/drawsvg.html generierte Code funktioniert direkt in Contao ( <img src='data:image/svg+xml...)

[Grossvater]

Mein obiges Beispiel funktioniert anscheinend im cdn-Betrieb nicht. Also sobald ich eine andere files und asset URL eingebe, erscheint die Fehlermeldung:

Warning: file_get_contents(//cdn.xxxx.dev/files/assets/svg/xxxxt-xxxxx.svg): failed to open stream: No such file or directory in templates/frontend/picture_default_svg.html5 on line 2
#0 [internal function]: __error(2, 'file_get_conten...', '/Applications/M...', 8, Array)
#1 templates/frontend/picture_default_svg.html5(8): file_get_contents('//cdn.xxxx.d...')
#2 system/modules/core/library/Contao/BaseTemplate.php(88): include('/Applications/M...')
#3 system/modules/core/library/Contao/Template.php(277): Contao\BaseTemplate->parse()
#4 system/modules/core/classes/FrontendTemplate.php(46): Contao\Template->parse()
#5 system/modules/core/library/Contao/BaseTemplate.php(281): Contao\FrontendTemplate->parse()
#6 templates/frontend/mod_random_image_svg.html5(11): Contao\BaseTemplate->insert('picture_default...', Array)
#7 system/modules/core/library/Contao/BaseTemplate.php(88): include('/Applications/M...')
#8 system/modules/core/library/Contao/Template.php(277): Contao\BaseTemplate->parse()
#9 system/modules/core/classes/FrontendTemplate.php(46): Contao\Template->parse()
#10 system/modules/core/modules/Module.php(311): Contao\FrontendTemplate->parse()
#11 system/modules/core/modules/ModuleRandomImage.php(61): Contao\Module->generate()
#12 system/modules/core/library/Contao/Controller.php(321): Contao\ModuleRandomImage->generate()
#13 system/modules/core/library/Contao/InsertTags.php(447): Contao\Controller::getFrontendModule('60')
#14 system/modules/core/library/Contao/Controller.php(692): Contao\InsertTags->replace('...', false)
#15 system/modules/core/classes/FrontendTemplate.php(100): Contao\Controller::replaceInsertTags('...', false)
#16 system/modules/core/pages/PageRegular.php(190): Contao\FrontendTemplate->output(true)
#17 system/modules/core/controllers/FrontendIndex.php(285): Contao\PageRegular->generate(Object(Contao\PageModel), true)
#18 index.php(20): Contao\FrontendIndex->run()
#19 {main}

picture_default_svg:

<?php
$xml = new SimpleXMLElement(file_get_contents($this->img['src'])); <---- hier ist etwas verkehrt
$dom = dom_import_simplexml($xml);
echo $dom->ownerDocument->saveXML($dom->ownerDocument->documentElement);

[Spooky]

Das Problem ist, dass Contao Protocol-Relative URLs erzeugt, also "//cdn.xxxx.dev/…" (ohne http: oder https:). Die Funktion file_get_contents braucht jedoch vollwertige URLs. Dein PHP Script sollte daher nicht $this->img['src'] verwenden.