svg Icons exportieren, die in Wordpress wie webicons nutzbar sind

[ATTk20]

Hallo, 

ich möchte für eine Webseite (Wordpress mit Elementor) einige Icons erstellen, deren Farbe in Wordpress änderbar ist. Also wie bei den Iconsets von bspw. Font Awesome. Die Icons habe ich als svg-Dateien, aber immer wenn ich diese in Wordpress hochlade, ist die Farbe nicht mehr änderbar in Wordpress. 

Ich habe dazu einmal ein Tutorial gefunden und dieses Problem auch gelöst, aber ich suche seit Stunden danach, kann es aber nicht mehr finden und komme nicht weiter. 

Hat jemand eine Idee? Das Problem müssten doch einige haben, die Icons fürs Web designen. 

Danke im Voraus! 😎

[v_kyr]

Siehe auch Deinen anderen Thread hierzu.

BTW Du brauchst nicht diverse neue separate Threads erstellen nur um EN oder DE zu schreiben. Schreibe einfach beides (EN + DE) in ein und denselber Thread. - Zu der Frage siehe u.a. ...

• Can you change the color of svg icons to the global color I choose from Wordpress?
• How can I make my Admin Icon SVG color correctly?
• How to Change Custom SVG Icons Color in Elementor?
• ... and so on ...
• wordpress SVG icons color  <--- ***

 

[thomaso]

2 hours ago, v_kyr said:

separate Threads (...) nur um EN oder DE zu schreiben

Aber der Thread-Titel in der globalen Community!! … | exporter des icônes svg utilisables dans Wordpress comme des webicons | WordpressでWebアイコンのように使用できるsvgアイコンをエクスポートします … | …

[v_kyr]

4 hours ago, thomaso said:

Aber der Thread-Titel in der globalen Community!! … | exporter des icônes svg utilisables dans Wordpress comme des webicons | WordpressでWebアイコンのように使用できるsvgアイコンをエクスポートします … | …

Soll bedeuten?

Der Thread-Titel besagt für mich, das der OP SVG icons exportieren möchte die er dann in Wordpress farblich verändert wiederverwenden kann.

Wenn der OP also von sagen wir mal ADe SVG code exportiert also als "flatten transforms" bekommt er etwas in der Art wie das hier ...

<svg width="100%" height="100%" viewBox="0 0 167 134" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
	<g id="Pic_icon">
	  <path id="Pic_icon1" serif:id="Pic_icon" d="M166.667,0l-166.667,0l0,133.333l166.667,0l-0,-133.333Zm-158.276,70.89l32.771,-33.148l48.814,49.375l31.519,-19.575l36.781,32.176l-0,-91.3l-149.885,0l-0,62.472Zm84.426,-36.017c11.25,0 20.384,9.164 20.384,20.451c0,11.287 -9.134,20.451 -20.384,20.451c-11.25,0 -20.384,-9.164 -20.384,-20.451c0,-11.287 9.134,-20.451 20.384,-20.451Z" style="fill:#08e1ea;"/>
	</g>
</svg>

... wobei hier im SVG "path" halt die style-Anweisung bereits eine Füllfarbe (fill) setzt. Diese kann oftmals mittels CSS Anweisungen ...

path {
    fill: #333 !IMPORTANT;
}

... überschrieben werden wenn das CSS in einem jeweiligen Kontext (Wordpress) den Vorrang hat. - Ansosnten kann man die style-Anweisung selbst in einer SVG-Datei auch via manueller editierung in einem Texteditor entfernen (quasi weglassen bzw. weglöschen) ...

<svg width="100%" height="100%" viewBox="0 0 167 134" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
	<g id="Pic_icon">
	  <path id="Pic_icon1" serif:id="Pic_icon" d="M166.667,0l-166.667,0l0,133.333l166.667,0l-0,-133.333Zm-158.276,70.89l32.771,-33.148l48.814,49.375l31.519,-19.575l36.781,32.176l-0,-91.3l-149.885,0l-0,62.472Zm84.426,-36.017c11.25,0 20.384,9.164 20.384,20.451c0,11.287 -9.134,20.451 -20.384,20.451c-11.25,0 -20.384,-9.164 -20.384,-20.451c0,-11.287 9.134,-20.451 20.384,-20.451Z"/>
	</g>
</svg>

... dann sollte zumindest das was in einer CSS-Datei von aussen als Farbe für einen path gesetzt wird auf jeden Fall greifen! - Alles andere ist dann Wordpress spezifisch, wie z.B. Berechtigungen für die Nutzung einer aufgesetzten CSS Datei etc. Für weitere SVG + CSS Beispiele siehe u.a. ...

• Changing the SVG color in CSS

Ein paar allgemein sinnvolle Dinge über SVG findet man ansonsten auch noch hier in diesem engl. Artikel ...

• Using SVG

 

[thomaso]

Agree. Werden versch. Threads in jeweils versch. Sprachen eröffnet, kann die Idee dahinter stecken, dass bereits die Titelzeile das Publikum teasern soll. Mehrsprachig hätte der Titel aber nicht mit 1 Post geklappt und die Klickrate für fehlende Sprachen verringert, … deshalb mehrere Posts. – Ironie des Schicksals: Weder die Frage noch die Lösung hat direkt mit Affinity zu tun, sondern ist ein Thema der Webseiten-Programmierung. Und: wenn ich das Problem früher schon mal gelöst habe, würde ich dort nachsehen. Bemerkenswert auch, wenn unter Webdesignern noch nicht komplett bekannt ist, dass Browser-Plugins heute Übersetzungen des kompletten Bildschirminhalts per 1-Klick anbieten. 🦄