SVGs inline über Inhaltselement einbinden
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-Code:
<?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
Liste der Anhänge anzeigen (Anzahl: 1)
Danke roafl,
leider motzt der w3c Validator. >> Anhang 18969
Meine Code:
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>
