SVG Icons mit Farbauswahl im Templatestil ohne Overrides

Worti · 31. Januar 2017

Hallo alle zusammen,

folgendes Problem: Meine Icons für Drucken, E-Mail und so weiter bestehen zur Zeit noch aus PNGs. Ich möchte aber gerne SVG-Dateien einsetzen und im Template Stil des Templates die Farbe und Größe der Icons festlegen. Zur Zeit binde ich die Icons über die CSS-Datei so ein:

Code

.icon-print:before {  content: url(../images/printButton.png);  margin-right: 3px;}

Dieses habe ich schon in der templateDetails.xml eingebunden:

Code

<config>        <fields name="params">            <fieldset name="advanced">                <field name="iconcolor" class="" type="color" default="#5c5c5c"                    label="Icon Farbe"                    description="Hier kann die Icon-Farbe definiert werden." />            </fieldset>        </fields>    </config>

Das ist meine SVG-Datei:

XML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 3112 2723"
 xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <style type="text/css">
   <![CDATA[
    .fil0 {fill:#ff0000}
   ]]>
  </style>
 </defs>
 <g id="Ebene_x0020_1">
<path class="fil0" d="M311 0l2490 0c171,0 311,140 311,311l0 2101c0,171 -140,311 -311,311l-2490 0c-171,0 -311,-140 -311,-311l0 -2101c0,-171 140,-311 311,-311zm545 136l1400 0 0 350 -1400 0 0 -350zm1925 525l-2450 0c-97,0 -175,79 -175,175l0 876c0,96 78,175 175,175l525 0 0 700 1400 0 0 -700 525 0c97,0 175,-79 175,-175l0 -876c0,-96 -78,-175 -175,-175zm-2275 525c-97,0 -175,-78 -175,-175 0,-96 78,-175 175,-175 96,0 175,79 175,175 0,97 -79,175 -175,175zm1575 1226l-1050 0 0 -875 1050 0 0 875z"/>
 </g>
</svg>

Alles anzeigen

Und da verließen sie mich. Ich habe schon eine Menge undefinierbares Zeug probiert, besonders mit der Klasse "fil0" (in die CSS-Datei geschrieben und definiert, in der SVG-Datei die CSS-Datei geladen und so weiter).

Was muss ich machen, damit der Farbwert in der SVG-Datei übernommen wird?

Danke und Gruß
Markus

astrid · 31. Januar 2017

Wie willst du die SVG-Datei einbinden?

Wenn du sie über ein Layout, also nicht in der CSS-Datei einbindest, könntest du den Farbwert mit dem Wert im Parameter ersetzten.

Den Wert des Parameters kannst du so abfragen:

Code

$app = JFactory::getApplication();


$params = $app->getTemplate(true)->params;


$this->params->get('iconcolor')

Worti · 31. Januar 2017

Hallo astrid,

Habe gerade gelesen: SVG-Dateien, die in einer CSS-Datei geladen werden (oder direkt im <img>-Tag in HTML) können nicht nachträglich mit Klassen konfiguriert oder JS-Dateien animiert werden.

Ist das richtig?

Dann bleibt mir nur übrig die Farbwerte und Größen direkt in die SVG-Datei zu schreiben. Na ja, geht auf jeden Fall schon mal schneller als alle Icons umzufärben und jedes einzelne aus dem Grafik-Programm zu exportieren.

Gruß
Markus

astrid · 31. Januar 2017

Hallo Markus,

Zitat von Worti

Habe gerade gelesen: SVG-Dateien, die in einer CSS-Datei geladen werden (oder direkt im <img>-Tag in HTML) können nicht nachträglich mit Klassen konfiguriert oder JS-Dateien animiert werden.

Ich habe keine Idee, wie du das einfach umsetzten könntest.

Aber da du den Parameter schon hast, willst du ihn ja sicher auch nutzen. Und wenn du die SVG sofort im HTML einbindest (in einer Layoutdatei), dann kannst du per PHP den Farbwert schreiben.

Hier steht auf welche Art du SVG-Dateien einbinden kannst: https://www.mediaevent.de/svg-in-html-seiten/

Worti · 31. Januar 2017

Hallo astrid,

danke für Deine Mühen, aber ich möchte eben keine Overrides einsetzen. Der Aufwand ist viel zu groß für meine kleinen Projekte. Werde es ab jetzt wie oben beschrieben lösen.

Danke an Alle
Markus

Tags