SVG-Grafiken direkt inline in Joomla-Beiträge per JCE

Expired

Problembeschreibung SVG-Grafiken in Joomla-Beiträgen

Aus Performance-Gründen geht der Trend beim Bau von Websites dahin, Grafiken nicht mehr als separate Sourcen vom Server zu laden, sondern diese wo möglich direkt in den Code zu schreiben. So reduziert man die Anzahl der Serverrequests. Wenn man z.B. Social-Media-Icons als SVG-Klickbuttons einfügen will, kann man das über sehr unterschiedlche Methoden erreichen, als CSS-image-URLs (base64 codiert), oder noch einfacher aus Awesome-Font-Icons oder man schreibt den SVG-Code direkt in den DOM-Baum der Website. Wie das gemeint ist sieht man in diesem Beispiel für einen Facebook-Button:

<div>
<a href="https://www.2343ec78a04c6ea9d80806345d31fd78-gdprlock/mediadesign.sk/">
  <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 48 48" width="6vW" height="6vW">
    <path fill="#3F51B5" d="M42,37c0,2.762-2.238,5-5,5H11c-2.761,0-5-2.238-5-5V11c0-2.762,2.239-5,5-5h26c2.762,0,5,2.238,5,5V37z"></path>
    <path fill="#FFF" d="M34.368,25H31v13h-5V25h-3v-4h3v-2.41c0.002-3.508,1.459-5.59,5.592-5.59H35v4h-2.287C31.104,17,31,17.6,31,18.723V21h4L34.368,25z"></path>
  </svg>
</a>
</div>

Das Problem hierbei ist, wenn man in den Joomla-Content-Editor (JCE) oder auch in den Joomla-Standard-Editor MCE solchen SVG-Code einfügt, dann wird der HTML-Code i.d.R. bei den Grundeinstelungen beim Speichern bereingt, d.h. unser SVG-Code fliegt komplett raus.

Leider gibt es für SVG-Code im JCE keine prinzipielle Erlaubnis-Option wie z.B. für das Zulassen von Java-Script- (<script>...</script>) oder CSS-Style-Containern (<style>...</style>). Das wird damit zusammenhängen, dass SVG selbst wieder Tags enthalten kann.

Was kann man tun, um die Bereinigung für SVG-Code zu verhindern

Zumindest der JCE bietet sehr flexible Möglichkeiten das Verhalten auch beider HTML-Code-Bereinigung zu konfigurieren. Also eine mögliche Lösung für dieses Problem, ruft man die Komponenten JCE auf, geht dort in die Profile-Verwaltung, dort auf den Registerreiter Editor Parameters. Nun muss man ziemlich weit nach unten scrollen. Man findet dort eine unter der Zwischenüberschrift Erweitert ein Text-Area-Feld mit dem Label Erweiterte Elemente.

Leider genügt es nicht dort einfach nur svg als erlaubtes erweitertes Element einzutragen, denn innerhalb des SVG-Container gibt es weitere Tags, und davon sehr viele und unterschiedliche. Im obigen Beispiel muss also auch noch path hinzugefügt werden. Das Facebook-Icon ist dabei noch sehr einfach strukturiert. Kompliziert wird es z.B. beim Instagram-Icon mit seinen Farbverläufen. Hierfür sehe die Liste der erweiterten Elemente ggf. so aus: svg,path,circle,g,radialgradient,stop. Man muss sich also den Code seiner SVG-Inlines genau anschauen, um alle Tags zu finden und in die Liste aufzunehmen.

 

Wichtig:

  • Wie im Hinweistext zu dem Feld beschrieben, gelten diese Bereinigungsregeln nur wenn die Option HTML bereinigen auch auf aktiv/ja gesetzt wurde.
  • Außerdem sollten die Editor-Profil-Optionen Enable Code Blocks und Allow Custom XML aktiviert sein um jegliche Form von XML-Tags, also auch SVG zuzulassen, was ja nichts anderes ist als XML-Code-Block.

Nach dem Speichern der JCE-Profileinstellungen kann man seinen Joomla-Beitrag erneut öffnen, den SVG-Code einfügen und durch Umschalten zwischen HTML-Code-Modus und Editor-Modus schnell die Codebereinigung ausführen lassen und somit prüfen, ob der Code unangetastet bleibt. Wenn man das für sich bestätigt hat, kann man den Beitrag speichern und sich das Resultat im Frontend anschauen.

Fertig sieht das z.B. so aus:

Ein Manko dieser Methode haben Sie sicher schon erkannt. Der Administrator muss ggf. ziemlich viele verschieden SVG-Tags erlauben und eine ggf. umfangreiche Liste aufbauen. Allerdings sehe ich hier auch keine so übliche Aufgabe, SVG-Grafiken durch Autoren einbinden zu lassen. Für Autoren-Beiträge ist das doch eher unüblich. Wer als Joomla-Administrator seinen Autoren eine elegante schnelle Möglichkeit bieten möchte um Icons  einzufügen, sollte dann ggf. doch mit Awesome-Font-Icons arbeiten. Dazu habe ich meinen Kunden ein Editor-Button-Plugin programmiert, mit dem diese sehe einfach ein Awesome-Icon auswählen und in den Beitrag einsetzen können. Wer Interesse an diesem Plugin-Package hat, kann es bei mir erfragen.

 

Ergänzungen:

  • Aktuell gibt es für die beschriebene Verfahrensweise noch ein störendes ungelöstes Problem: Diese funktioniert wenn man den Editor in Eigenen Modulen verwendet, jedoch nicht bei Joomla-Beiträgen.
  • Natürlich kann man mit oben beschriebener Methode beliebige andere HTML-Tags und Strukturen zulassen, die ggf. vom Editor herausgefiltert werden würden aber unbedingt benötigt werden.
  • Ggf. kann man wie in der JCE-Beschreibung angegeben zu den SVG-Tags auch noch zulässige Attribute hinzufügen, z.B. in dieser Form:
    svg[xmlns|viewBox|width|height],path[fill|d],circle[cx|cy|r|fill],g,radialgradient[id|cx|cy|r|gradientTransform|gradientUnits],stop[offset|stop-color|stop-opacity]

 

Das JCE-Plugin zur Unterstützung von SVG

Unter GITHUB ist ein JCE-Plugin verfügbar, welches den Support von SVG im Editor inkl. der Anzeige im Editormodus ermöglichen soll. Es ist hier beschrieben https://www.joomlacontenteditor.net/support/forum/107608-inline-svg und hier herunterladbar: https://github.com/widgetfactory/jce-editor-svg/releases/tag/1.0.3.