@@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:

<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:

<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:

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:

<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> wirklich nur ein Einzeiler ist.

LLAP 🖖