svg Icons und Font-Icons in Plugins
#1 svg Icons und Font-Icons in Plugins
#2 RE: svg Icons und Font-Icons in Plugins
vielleicht passt auch das hierhin
zum Thema SVG habe ich diesen interessanten Artikel gefunden https://wiki.selfhtml.org/wiki/SVG/Tutor...Data-URL_im_CSS
so wie man Bildchen als base64-codiert in [img]-Codes nutzen kann. z.b. 
hier der zugehörige Code (ca 250 bytes)
[img]data:image/gif;base64,%09R0lGODlhEwAYAKIEAMbGxv/MZjExMdo04gAAAAAAAAAAAAAAACH5BAEAAAQA%09LAAAAAATABgAAANlSLok7iwuF2qFUgnLb95dJ0hgaI1MSV1qeqrtZIaoVs5Y%09AwCrKOyjx473EAIfg4FjuPkdk44k9CeMSq1S5TU75WqhXuwWzBWTv1kzWhBm%09l8dpdxp+bcjX8ZRbvq9FkFN+GTaCCwkAOw==[/img]
kann man Bilder auch direkt als svg-Code definieren
hier das Beispiel aus SELFHTML: ![](data:image/svg+xml;utf-8,<svg width="22" height="22" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><polygon points="2,2 5,2 5,3 3,3 3,9 9,9 9,7 10,7 10,10 2,10"/><polygon points="6.2,2 10,2 10,5.79 8.58,4.37 6.5,6.5 5.5,5.5 7.6,3.4"/></svg>)
ein svg image 22*22
hier verkürzt
[img]data:image/svg+xml;utf-8,<svg width="22" height="22" viewBox=...</svg>[/img]
und hier komplett
[img]data:image/svg+xml;utf-8,<svg width="22" height="22" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><polygon points="2,2 5,2 5,3 3,3 3,9 9,9 9,7 10,7 10,10 2,10"/><polygon points="6.2,2 10,2 10,5.79 8.58,4.37 6.5,6.5 5.5,5.5 7.6,3.4"/></svg>[/img]
... würde es „Fussball spielen” heissen vG Bernd
#3 RE: svg Icons und Font-Icons in Plugins
Zitat von l2otbart_57 im Beitrag #2
so wie man Bildchen als base64-codiert in [img]-Codes nutzen kann.
Die Bildchen lassen sich aber nicht alle formatieren.
In Beiträge kann man das mit einem IMG-Tag und im Code auch Farbe und Größe einstellen.
Zum Beispiel so
[img]data:image/svg+xml;utf-8,<svg fill="red" width="36" height="36" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><polygon points="2,2 5,2 5,3 3,3 3,9 9,9 9,7 10,7 10,10 2,10"/><polygon points="6.2,2 10,2 10,5.79 8.58,4.37 6.5,6.5 5.5,5.5 7.6,3.4"/></svg>[/img]
![](data:image/svg+xml;utf-8,<svg fill="red" width="36" height="36" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><polygon points="2,2 5,2 5,3 3,3 3,9 9,9 9,7 10,7 10,10 2,10"/><polygon points="6.2,2 10,2 10,5.79 8.58,4.37 6.5,6.5 5.5,5.5 7.6,3.4"/></svg>)
Mein Thema handelt aber von Plugins und ist auch in der Rubrik Pluginsystem untergebracht.
Dein Beitrag wäre vielleicht bei Iconbar besser untergebracht.
#4 RE: svg Icons und Font-Icons in Plugins
wollte deinen Thread natürlich nicht sprengen, sondern nur erweitern.
hier habe ich zur demo [img] genutzt,
im CSS würde man background-image: url('data:image/svg+xml;utf-8,<svg ...') nutzen
einfärben geht so einfach nicht, skalieren schon ![](data:image/svg+xml;utf-8,<svg style="color:red" width="16" height="16" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><polygon points="2,2 5,2 5,3 3,3 3,9 9,9 9,7 10,7 10,10 2,10"/> <polygon points="6.2,2 10,2 10,5.79 8.58,4.37 6.5,6.5 5.5,5.5 7.6,3.4"/></svg>)
[rot][img=50]data:image/svg+xml;utf-8,<svg style="color:red" width="16" height="16" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><polygon points="2,2 5,2 5,3 3,3 3,9 9,9 9,7 10,7 10,10 2,10"/> <polygon points="6.2,2 10,2 10,5.79 8.58,4.37 6.5,6.5 5.5,5.5 7.6,3.4"/></svg>[/img][/rot]
vG Bernd
#5 RE: svg Icons und Font-Icons in Plugins
Zitat von l2otbart_57 im Beitrag #4
einfärben geht so einfach nicht, skalieren schon
Geht aber.
Du hast nur einen kleiner Fehler gemacht.
SVG Farben werden nicht mit color sonder fill definiert.
In Rot: [img=50]data:image/svg+xml;utf-8,<svg style="fill:red" width="16" height="16" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><polygon points="2,2 5,2 5,3 3,3 3,9 9,9 9,7 10,7 10,10 2,10"/><polygon points="6.2,2 10,2 10,5.79 8.58,4.37 6.5,6.5 5.5,5.5 7.6,3.4"/></svg>[/img]
In Grün 16x16: ![](data:image/svg+xml;utf-8,<svg style="fill:green" width="16" height="16" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><polygon points="2,2 5,2 5,3 3,3 3,9 9,9 9,7 10,7 10,10 2,10"/><polygon points="6.2,2 10,2 10,5.79 8.58,4.37 6.5,6.5 5.5,5.5 7.6,3.4"/></svg>)
In Rot 20x20: ![](data:image/svg+xml;utf-8,<svg style="fill:red" width="20" height="20" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><polygon points="2,2 5,2 5,3 3,3 3,9 9,9 9,7 10,7 10,10 2,10"/><polygon points="6.2,2 10,2 10,5.79 8.58,4.37 6.5,6.5 5.5,5.5 7.6,3.4"/></svg>)
In Blau 24x24: ![](data:image/svg+xml;utf-8,<svg style="fill:blue" width="24" height="24" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><polygon points="2,2 5,2 5,3 3,3 3,9 9,9 9,7 10,7 10,10 2,10"/><polygon points="6.2,2 10,2 10,5.79 8.58,4.37 6.5,6.5 5.5,5.5 7.6,3.4"/></svg>)
Man kann sie aber nicht nachträglich mit css ändern.
Ähnliche Themen
Jetzt anmelden!
Jetzt registrieren!