Inline SVG mit <use>

Hallo,
eine Frage zur Nutzung von Inline SVG mit <use> ( intern nicht als Verlinkung auf externe SVG Dateien ).

Ich habe mir im Template root Verzeichnis ala "templates/svg.html5" ein Template mit z.B. folgenden Inhalt angelegt:

Code:

---

<svg style="display: none;" xmlns="http://www.w3.org/2000/svg" >
<symbol id="logosymbol" viewBox="0 0 200 200">
<path class="symbol" fill="currentColor" d="M198.84 157.75c-1.46 1.65-3.81 1.85-5.47.4-1.2-1.05-2.27-2.29-3.5-3.3-3.76-3.08-7.9-3.32-11.87-.55-1.48 1.03-2.86 2.31-4.07 3.71-6.07 7.03-15.73 9.99-25.04 5.31-2.65-1.33-5.2-2.99-7.62-4.79-3.55-2.63-7.1-5.11-11.47-5.67-4.22-.54-8.02.63-10.73 4.23-7.27 9.66-17.97 11.06-27.63 5.39-3.11-1.82-5.97-4.18-8.93-6.31-2.41-1.73-4.99-2.97-7.83-3.51-4.58-.88-8.42.7-11.41 4.51-6.54 8.33-15.85 10.87-25.01 6.44-2.84-1.37-5.53-3.16-8.14-5.03-3.33-2.39-6.58-4.89-10.58-5.73-4.76-1-8.86.2-12.06 4.43-1.5 1.99-3.95 2.34-5.75.88-1.8-1.46-2.32-4.2-.91-6.29 2.95-4.39 7.01-6.97 11.82-8.13 1.27-.3 2.59-.33 3.88-.49 6.03.04 11.23 2.6 16.16 6.15 2.68 1.94 5.36 3.94 8.24 5.48 5.4 2.87 10.91 1.92 14.79-2.22.97-1.03 1.76-2.28 2.77-3.26 6.96-6.82 14.84-8 23.25-4 3.21 1.53 6.14 3.84 9.07 6 2.65 1.95 5.33 3.76 8.45 4.65 5.1 1.45 9.38-.08 12.88-4.33 4.51-5.47 10.11-8.37 16.82-8.25 4.86.09 9.29 2.02 13.39 4.82 2.29 1.57 4.41 3.5 6.81 4.82 2.38 1.31 4.96 2.4 7.56 2.96 4.45.96 8.18-.83 11.24-4.54 8.12-9.83 19.77-11.64 29.43-1.84.62.63 1.22 1.28 1.75 1.99 1.28 1.75 1.13 4.47-.29 6.07zm-14.52 26.41c-8.29-7.91-18.31-6.19-25.19 1.98-3.24 3.84-6.85 5.02-11.31 3.86-3.49-.91-6.3-3.23-9.19-5.38-4.09-3.03-8.48-5.19-13.5-5.29-5.82-.12-10.83 2.03-14.61 6.98-2.92 3.82-6.48 5.14-10.83 4.05-3.31-.83-6-2.97-8.69-5.11-3.27-2.6-6.75-4.75-10.76-5.64-7.26-1.6-13.4.62-18.23 6.77-2.86 3.64-6.31 4.92-10.49 3.96-3.66-.84-6.59-3.23-9.58-5.52-4.3-3.31-8.98-5.62-14.37-5.63-.37 0-.75-.02-1.12 0-5.19.38-9.53 2.7-12.87 7.09-1.73 2.27-1.48 5.16.44 6.84 1.88 1.64 4.29 1.22 6.04-1.01 2.02-2.56 4.61-3.78 7.67-3.71 3.64.08 6.68 1.92 9.65 4.05 2.68 1.93 5.34 4.02 8.24 5.44 8.24 4.01 17.24 2.07 22.95-5.81 2.13-2.94 5.16-4.1 8.61-3.71 3.62.42 6.51 2.55 9.44 4.69 2.51 1.84 5.06 3.72 7.81 5.02 8.4 3.98 16.55 1.71 22.45-5.85 2.14-2.74 5.01-3.81 8.27-3.61 3.42.21 6.33 1.88 9.14 3.9 2.26 1.62 4.52 3.28 6.91 4.63 8.28 4.67 18.12 2.89 23.96-4.61 4.2-5.4 9.58-5.5 14.38-.76.45.45.89.91 1.37 1.32 1.7 1.47 4.12 1.28 5.58-.42 1.47-1.72 1.53-4.38.07-6.15-.71-.86-1.47-1.63-2.24-2.37zM99.95 38.95c2.42-.04 4-1.93 4.03-5.01.05-4.82.01-9.65.01-14.47V5c0-.15-.01-.31-.02-.46-.22-2.87-1.91-4.63-4.35-4.53-2.3.1-3.91 2.06-3.94 4.82-.02 1.44 0 2.87 0 4.31 0 8.31-.01 16.63.01 24.94 0 3.03 1.68 4.91 4.26 4.87zm-52.84 16c1.82 1.98 4.18 2 5.86.18 1.74-1.88 1.83-4.58.02-6.59-5.97-6.64-11.97-13.25-18.03-19.8-.71-.76-1.82-1.08-2.74-1.6-1.91.28-3.37 1.27-4 3.02-.68 1.9-.36 3.64.96 5.09 5.98 6.58 11.94 13.16 17.93 19.7zm100.08.65c1.75 1.34 3.82 1.04 5.55-.86 5.78-6.34 11.56-12.7 17.33-19.05.3-.33.59-.66.84-1.03 1-1.51 1.09-3.16.35-4.8-.72-1.6-1.98-2.39-4.33-2.46-.53.34-1.72.84-2.59 1.73-2.36 2.41-4.58 4.98-6.86 7.48-3.59 3.96-7.21 7.9-10.77 11.89-1.95 2.2-1.69 5.45.48 7.1zM4.01 91.11c6.08 1.72 12.18 3.39 18.3 4.97 2.56.66 4.85-1.55 4.86-4.44 0-2.36-1.19-3.92-3.6-4.59-5.77-1.61-11.55-3.2-17.33-4.77-2.52-.69-4.7.69-5.32 3.3-.58 2.38.72 4.86 3.09 5.53zm173.21 5.02c6.24-1.63 12.47-3.33 18.68-5.09 1.89-.54 2.95-2.27 2.97-4.34.03-3.01-2.48-5.18-5.26-4.46-3.39.88-6.77 1.86-10.15 2.8-2.7.75-5.43 1.43-8.11 2.29-2.11.68-3.25 3.06-2.75 5.33.52 2.3 2.61 3.99 4.62 3.47zM36.95 114.44c1.92-21.61 10.81-38.78 26.58-51.54 11.18-9.04 23.81-13.44 37.68-13.14 10.49.22 20.3 3.37 29.4 9.16 9.13 5.82 16.54 13.64 22.22 23.41 5.66 9.73 8.85 20.4 9.74 32.1h35.51v9.07H1.64c-.04-.47-.09-.87-.1-1.27-.01-2.55 0-5.11 0-7.79h35.41zm8.65-.11h108.53c-2.01-29.99-26.39-57.05-57.02-55.27C66.35 60.83 46.4 89.9 45.6 114.33z"/>
</symbol>
</svg>

---

Dies habe ich via InsertTag {{file::svg.html5}} irgendwo auf der Seite eingebunden.

Zur Nutzung benötige ich dann entsprechend:

Code:

---

<svg class="icon"><use xlink:href="#logosymbol" /></svg>

---

damit ich a) das SVG darstellen und b) dies via CSS (.icon) manipulieren kann (z.B. für Hover Events).

Grundsätzlich funktioniert dies soweit, wenn ich den Code "<svg class="icon"><use xlink:href="#logosymbol" /></svg>" ebenfalls als Template definiere und via InsertTag einbinde ala "{{file::use-svg-symbol.html5}}".

Dies würde ich gerne umgehen und den Code direkt im Tiny Editor setzen.
Allerdings entfernt der Editor die Angaben nach dem Speichern auch wenn ich unter Einstellungen <svg> und <use> als erlaubte HTML Tags eintrage.

Some Hints are welcome ...

Danke Franko

Hallo Franko,
hast Du das <use> tag auch erlaubt?
(Manchmal übersieht man ja die banalsten Dinge :-))
Gruß
Hella

Zitat:

---

Zitat von fusch

Hallo Franko,
hast Du das <use> tag auch erlaubt?
(Manchmal übersieht man ja die banalsten Dinge :-))
Gruß
Hella

---

Hm, ja - siehe

Zitat:

---

auch wenn ich unter Einstellungen <svg> und <use> als erlaubte HTML Tags eintrage

---

Habe gerade das "templates/be_tinyMCE.html5" angelegt und wie folgt geändert:

...
extended_valid_elements: 'q[cite|class|title],article,section,hgroup,figure,figcaption,svg,use',
...

dennoch werden die Angaben beim Speichern danach gelöscht ? ...

Nutze das jetzt weiterhin mit dem InsertTag {{file::}} oder, halt mit dem Inhaltselement HTML.

Auch wenn man den Tiny korrekt konfigurieren würde (s. https://wordpress.stackexchange.com/...om-svg-use-tag) -
sieht man den Eintrag ja nicht - was evtl. bei der Editierung über Redakteure blöd sein kann ...
Wurde im Zusammenhang auch hier schon mal angesprochen: https://github.com/contao/core/issues/8571

Das ist zwar keine Lösung für dein TinyMCE-Problem, aber du solltest der Referenz-ID deines SVG-Sprites noch ein {{env::request}} voranstellen, also z. B.

HTML-Code:

---

<svg class="icon"><use xlink:href="{{env::request}}#logosymbol" /></svg>

---

Sonst hast du ein Problem auf Unterseiten mit der Referenzierung wegen des Base-Tags im HEAD.
Zumindest ist das der Fall, wenn du die SVG-Datei per {{file::svg.html5}} direkt in die fe_page einbindest, um das Sprite auf allen Seiten zur Verfügung zu haben.