@@Felix Riesterer > > Wenn das Rot nicht passt: Ein Kreuz und ein Kreis sind in SVG ein Einzeiler. > > *LOL* wo (bitte genau!) möchtest Du diesen notieren? Wie wär’s mit hier? Kreuz: ~~~xml <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"> <line x1="0.1" y1="0.1" x2="0.9" y2="0.9"/> <line x1="0.1" y1="0.9" x2="0.9" y2="0.1"/> </svg> ~~~ Kreis: ~~~xml <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"> <circle cx="0.5" cy="0.5" r="0.4" fill="none"/> </svg> ~~~ Anmerkungen: * Aus Gründen der Übersichtlichkeit hab ich den Einzeiler doch auf mehrere Zeilen aufgeteilt. ;-) * Bei der Einbettung von SVG in HTML darf die Namensraumangabe `xmlns="http://www.w3.org/2000/svg"` entfallen. Im Stylesheet: ~~~css svg { width: 2em; height: 2em; } circle, line { stroke: currentColor; stroke-width: 0.1; } ~~~ Da man die Symbole Kreuz und Kreis mehrmals benötigt, wird man sie aber besser einmal definieren und dann wiederverwenden: ~~~xml <svg xmlns="http://www.w3.org/2000/svg" style="display: none"> <defs> <symbol id="circle" viewBox="0 0 1 1"> <circle cx="0.5" cy="0.5" r="0.4" fill="none"/> </symbol> <symbol id="cross" viewBox="0 0 1 1"> <line x1="0.1" y1="0.1" x2="0.9"y2="0.9"/> <line x1="0.1" y1="0.9" x2="0.9"y2="0.1"/> </symbol> </defs> </svg> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <use xlink:href="#circle"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <use xlink:href="#cross"/> </svg> ~~~ Anmerkung: * Auch die Namensraumangabe `xmlns:xlink="http://www.w3.org/1999/xlink"` darf bei der Einbettung von SVG in HTML entfallen, sodass dann `<svg><use xlink:href="#circle"/></svg>`{: .language-html} wirklich nur ein Einzeiler ist. LLAP 🖖 -- „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“ „Hat auf dem Forum herumgelungert …“ (Wachen in Asterix 36: Der Papyrus des Cäsar)

@@Felix Riesterer > > Wenn das Rot nicht passt: Ein Kreuz und ein Kreis sind in SVG ein Einzeiler. > > *LOL* wo (bitte genau!) möchtest Du diesen notieren? Wie wär’s mit hier? Kreuz: ~~~xml <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"> <line x1="0.1" y1="0.1" x2="0.9"y2="0.9"/> <line x1="0.1" y1="0.9" x2="0.9"y2="0.1"/> </svg> ~~~ Kreis: ~~~xml <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"> <circle cx="0.5" cy="0.5" r="0.4" fill="none"/> </svg> ~~~ Anmerkungen: * Aus Gründen der Übersichtlichkeit hab ich den Einzeiler doch auf mehrere Zeilen aufgeteilt. ;-) * Bei der Einbettung von SVG in HTML darf die Namensraumangabe `xmlns="http://www.w3.org/2000/svg"` entfallen. Im Stylesheet: ~~~css svg { width: 2em; height: 2em; } circle, line { stroke: currentColor; stroke-width: 0.1; } ~~~ Da man die Symbole Kreuz und Kreis mehrmals benötigt, wird man sie aber besser einmal definieren und dann wiederverwenden: ~~~xml <svg xmlns="http://www.w3.org/2000/svg" style="display: none"> <defs> <symbol id="circle" viewBox="0 0 1 1"> <circle cx="0.5" cy="0.5" r="0.4" fill="none"/> </symbol> <symbol id="cross" viewBox="0 0 1 1"> <line x1="0.1" y1="0.1" x2="0.9"y2="0.9"/> <line x1="0.1" y1="0.9" x2="0.9"y2="0.1"/> </symbol> </defs> </svg> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <use xlink:href="#circle"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <use xlink:href="#cross"/> </svg> ~~~ Anmerkung: * Auch die Namensraumangabe `xmlns:xlink="http://www.w3.org/1999/xlink"` darf bei der Einbettung von SVG in HTML entfallen, sodass dann `<svg><use xlink:href="#circle"/></svg>`{: .language-html} wirklich nur ein Einzeiler ist. LLAP 🖖 -- „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“ „Hat auf dem Forum herumgelungert …“ (Wachen in Asterix 36: Der Papyrus des Cäsar)