.png Icon durch .svg ersetzen

[Linuchs]

Moin,

ich bitte um eine kleine Hilfestellung, ohne SVG-Lehrgang.

Neben <input /> Feldern kann man die verpixelte Grafik icon_info.png anklicken, per ajax wird ein Helptext geholt.

Diese Grafik möchte ich gerne ersetzen durch icon_info.svg . Da habe ich auch was gefunden, aber der Kreis sollte gelb hinterlegt sein. Die Darstellung ist etwa so groß wie der Buchstabe M. Aber bei SVG ist das unwichtig?

Welche Ergänzung muss ich dem SVG hinzufügen?

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" height="160" width="160" version="1.0">
 <g fill="#4b4b4b">
  <path d="m80 15c-35.88 0-65 29.12-65 65s29.12 65 65 65 65-29.12 65-65-29.12-65-65-65zm0 10c30.36 0 55 24.64 55 55s-24.64 55-55 55-55-24.64-55-55 24.64-55 55-55z"/>
  <path d="m57.373 18.231a9.3834 9.1153 0 1 1 -18.767 0 9.3834 9.1153 0 1 1 18.767 0z" transform="matrix(1.1989 0 0 1.2342 21.214 28.75)"/>
  <path d="m90.665 110.96c-0.069 2.73 1.211 3.5 4.327 3.82l5.008 0.1v5.12h-39.073v-5.12l5.503-0.1c3.291-0.1 4.082-1.38 4.327-3.82v-30.813c0.035-4.879-6.296-4.113-10.757-3.968v-5.074l30.665-1.105"/>
 </g>
</svg>

Kann ich den Zugriff auf http://www.w3.org/2000/svg vermeiden?

Danke und Gruß, Linuchs

[Tabellenkalk]

Hallo,

Welche Ergänzung muss ich dem SVG hinzufügen?

Z.B. ein

<circle cx="80" cy="80" r="60" fill="yellow" />

vor dem <g?

Gruß
Kalk

[Linuchs]

Hallo Tabellenkalk,

danke.

[Gunnar Bittersmann]

@@Tabellenkalk

Z.B. ein

<circle cx="80" cy="80" r="60" fill="yellow" />

vor dem <g?

Dann kann man es aber auch gleich richtig machen und den circle nicht nur für die gelb gefüllte Fläche nehmen, sondern auch für die graue Kreislinie:

<circle cx="80" cy="80" r="60" stroke="#4b4b4b" stroke-width="10" fill="yellow"/>

und das erste path-Element entsorgen, was den Kreis aus unzähligen Stückchen zusammensetzt. (Sowas kommt halt aus Zeichenprogrammen wie Illustrator raus.)

☞ Codepen

Und wenn wir schon dabei sind, machen wir den i-Punkt auch noch als circle und schmeißen auch das zweite path-Element weg. Ja, das mit transform="matrix(…)". (Sowas kommt halt aus Zeichenprogrammen wie Illustrator raus.)

☞ Codepen 2

Anmerkung: SVG sollten i.d.R. nicht width- und height-Attribute haben, sondern viewBox.

😷 LLAP

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Und wenn wir schon dabei sind …

Vermutlich ist es auch sinnvoll, im SVG nur die Geometrie anzugeben, nicht die Farben. Die bekommt das Icon per CSS.

☞ Codepen 3

😷 LLAP

[Rolf B]

Hallo Gunnar,

und es ist faszinierend, wieviel Bitmüll man vermeiden kann, wenn man die krummen Werte von Inkscape oder ähnlichem rundet und etwas an den Kontrollpunkten der Bezierkurven (das C Kommando) zupft.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140">
  <circle stroke="currentColor" stroke-width="10" cx="70" cy="70" r="60"/>
  <circle cx="69" cy="39" r="11" fill="currentColor" />
  <path fill="currentcolor"	
        d="M80 100c0 3 1.6 3.9 4 4l5 0.1v5h-38v-5l5-0.12.4-0.1 4-1 4-4v-31c0-4.4-6-4-9-3.9v-5l29-1"/>
</svg>

Der alte Path hatte

        d="m90.665 110.96c-0.069 2.73 1.211 3.5 4.327 3.82l5.008 0.1v5.12h-39.073v-5.12l5.503-0.1c3.291-0.1 4.082-1.38 4.327-3.82v-30.813c0.035-4.879-6.296-4.113-10.757-3.968v-5.074l30.665-1.105"

Sieht genauso aus. Eigentlich sogar besser. Ich habe die Viewbox um 20 Einheiten verkleinert und die Grafikelemente verschoben, damit das Icon weniger intrinsischen Rand hat. Das i war nicht zentriert, es war rechtsverschoben, während der i-Punkt zu weit links hing, das sah kippelig aus. Er ist jetzt nicht ganz über dem vertikalen Balken; die Serifenfonts, die ich mir angeschaut habe, haben den Punkt alle einen Tick nach links geschoben.

Rolf

[Matthias Scharwies]

Hallo Gunnar und Rolf,

auch wenn Linuchs explizit keinen Lehrgang wollte, wäre das imho doch etwas für's Wiki. Ich sehe zwei mögliche Andockstellen:

1. SVG/Tutorials/Icons
   • Dort wird erklärt wie man mehrfarbige Icons erzeugen kann. Evtl. könnte dies hier eine kurze Einführung in Icons und sein.
2. SVGs_optimieren
   • Hier würde es auch gut reinpassen. Dieser Artikel steht irgendwie nur so rum.

Oder als Blog-Beitrag?

Herzliche Grüße

Matthias Scharwies

PS: Für den Adventskalender schreibe ich grade was zu barrierefreien SVGs.

[Linuchs]

Hallo Matthias,

auch wenn Linuchs explizit keinen Lehrgang wollte

Damit war gemeint: Ich habe einen Platten, möchte ihn flicken, ohne selbst Fahrradschläuche herstellen zu müssen.

Doch das Thema ist langfristig interessant, habe erst kürzlich svg Pfeile „hergestellt“, die Positionen auf einer Webseite verbinden.

[dedlfix]

Tach!

Kann ich den Zugriff auf http://www.w3.org/2000/svg vermeiden?

Da greift nichts zu. Das ist nur ein Namespace, nichts wovon der Renderer irgendwas brauchbares bekommen kann.

dedlfix.