Einsatz von SVG-Dateien
Die »SVG-Datei«
Die Nutzung von Dateien im SVG-Format bietet zahlreiche Vorteile. Als reines Vektorformat werden diese, im Gegensatz zu anderen Formaten, verlustfrei skaliert. Häufig werden SVG-Dateien daher zur Darstellung eines Logos oder von Symbolen eingesetzt.
Du möchtest deine SVG-Datei in Contao einsetzen?
Für unser Beispiel verwenden wir das Contao-Logo im SVG-Format (contao.svg):
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M45.4 305c14.4 67.1 26.4 129 68.2 175H34c-18.7 0-34-15.2-34-34V66c0-18.7 15.2-34 34-34h57.7C77.9 44.6 65.6 59.2 54.8 75.6c-45.4 70-27 146.8-9.4 229.4zM478 32h-90.2c21.4 21.4 39.2 49.5 52.7 84.1l-137.1 29.3c-14.9-29-37.8-53.3-82.6-43.9-24.6 5.3-41 19.3-48.3 34.6-8.8 18.7-13.2 39.8 8.2 140.3 21.1 100.2 33.7 117.7 49.5 131.2 12.9 11.1 33.4 17 58.3 11.7 44.5-9.4 55.7-40.7 57.4-73.2l137.4-29.6c3.2 71.5-18.7 125.2-57.4 163.6H478c18.7 0 34-15.2 34-34V66c0-18.8-15.2-34-34-34z"/>
</svg>
Kopiere die SVG-Datei hierzu in ein als »Öffentlich« gekennzeichnetes Verzeichnis unterhalb von »files«. Genau wie bei anderen Bild-Formaten wird dir innerhalb der Dateiverwaltung eine Vorschau angezeigt.
Anschließend kannst du die SVG-Datei u. a. im Inhaltselement vom Typ “Bild” auswählen. Optional können hier auch die Einstellungen für die »Bildgröße«, analog zu anderen Bild-Formaten, festgelegt werden. Contao erstellt folgenden Quelltext:
<div class="ce_image first last block">
<figure class="image_container">
<img src="files/myfolder/myfile.svg" alt="" itemprop="image">
</figure>
</div>
Mit unterschiedlichen Einstellungen der »Bildgröße«
erhalten wir folgende Darstellung(en) über das »img« HTML-Element:
Die »inline« Alternative
Die Einbindung von SVG-Dateien über das HTML-Element »img« ist eine Variante. Weitere Möglichkeiten ergeben sich,
wenn du die SVG-Datei »inline« einsetzt. Der Inhalt der SVG-Datei »<svg>...</svg>« wird dabei direkt im
HTML-Quelltext hinterlegt. In dieser Form kannst du dann die Darstellung mit CSS-Angaben beeinflussen.
Zur Umsetzung benutzen wir ein Template zusammen mit dem
Insert-Tag {{file::*}}. Erstelle dir ein neues
Template »mysvgicon.html5« im Verzeichnis »mysvgfolder« unterhalb des Verzeichnis »Templates« und kopiere den vollständigen
SVG-Code in die Template-Datei.
Anschließend kannst du die Datei in einem Inhaltselement über das
Insert-Tag {{file::mysvgfolder/mysvgicon.html5}} einbinden und mit CSS-Angaben kontrollieren. Die Ausgabe
bei Nutzung innerhalb des Inhaltslements vom Typ »Text« (verkürzt):
<div class="ce_text first block">
<p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> . . . </svg>
</p>
</div>
Im Gegensatz zu den Contao eigenen Template-Dateien kannst du hierbei diese Dateien in beliebig verschachtelte Verzeichnisse unterhalb von »Templates« legen. Die relativen Pfadangaben definierst du im Insert-Tag.
SVG über CSS colorisieren
Du könntest unser Beispiel mit der CSS-Angabe »svg { fill: #ff0000; }« einfärben. Allerdings möchten wir lieber
die CSS-Eigenschaft color verwenden. Hierzu ergänzen wir den SVG-Code im Template mit der Eigenschaft fill
und dem Wert currentColor:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M45.4 305c14.4 67.1 26.4 129 68.2 175H34c-18.7 0-34-15.2-34-34V66c0-18.7 15.2-34 34-34h57.7C77.9 44.6 65.6 59.2 54.8 75.6c-45.4 70-27 146.8-9.4 229.4zM478 32h-90.2c21.4 21.4 39.2 49.5 52.7 84.1l-137.1 29.3c-14.9-29-37.8-53.3-82.6-43.9-24.6 5.3-41 19.3-48.3 34.6-8.8 18.7-13.2 39.8 8.2 140.3 21.1 100.2 33.7 117.7 49.5 131.2 12.9 11.1 33.4 17 58.3 11.7 44.5-9.4 55.7-40.7 57.4-73.2l137.4-29.6c3.2 71.5-18.7 125.2-57.4 163.6H478c18.7 0 34-15.2 34-34V66c0-18.8-15.2-34-34-34z"/>
</svg>
In deinen CSS-Angaben könnest du jetzt folgendes verwenden:
.ce_text {
color: #000000;
}
Das Schlüsselwort currentColor folgt dabei der CSS-Kaskade. Daher übernimmt unser SVG-Symbol den Farbwert des übergeordneten »div« Blocks mit der CSS-KLasse »ce_text«. Wenn du gezielt das SVG-Symbol ändern möchtest:
.ce_text {
color: #000000;
}
.ce_text svg {
color: #f47c00;
}
Das »{{file::*}}« Insert-Tag mit Argument
Mit CSS kannst du deine »inline« verwendeten SVG-Dateien farblich gestalten. Möchtest du ohne weitere CSS Anpassungen gezielt eine SVG-Datei über das Inhaltselement ändern?
Das Insert-Tag {{file::*}} unterstützt die Übergabe von
Argumenten. Du kannst hierüber z. B. den Farbwert definieren:
{{file::mysvgfolder/mysvgicon.html5?color=#ff0000}}
In der Template Datei ersetzen wir den Wert der Eigenschaft fill mit einer PHP-Abfrage. Wird ein übergebenes Argument
gefunden wird dieses eingetragen, ansonsten bleibt es beim Schlüsselwort currentColor. Deine CSS-Angaben werden
hiermit im entsprechenden Inhaltselement gezielt überschrieben.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="<?= \Contao\Input::get('color') ?: 'currentColor' ?>"
d="M45.4 305c14.4 67.1 26.4 129 68.2 175H34c-18.7 0-34-15.2-34-34V66c0-18.7 15.2-34 34-34h57.7C77.9 44.6 65.6 59.2 54.8 75.6c-45.4 70-27 146.8-9.4 229.4zM478 32h-90.2c21.4 21.4 39.2 49.5 52.7 84.1l-137.1 29.3c-14.9-29-37.8-53.3-82.6-43.9-24.6 5.3-41 19.3-48.3 34.6-8.8 18.7-13.2 39.8 8.2 140.3 21.1 100.2 33.7 117.7 49.5 131.2 12.9 11.1 33.4 17 58.3 11.7 44.5-9.4 55.7-40.7 57.4-73.2l137.4-29.6c3.2 71.5-18.7 125.2-57.4 163.6H478c18.7 0 34-15.2 34-34V66c0-18.8-15.2-34-34-34z"/>
</svg>
