Grundsatzfrage zur Struktur von SVG-Grafiken

[Auge]

Hallo

Hier wird ja in den letzten Wochen fleißig an der Umstellung vieler Grafiken von Rastergrafiken auf SVG im SelfHTML-Wiki gearbeitet und über die dabei auftretenden Probleme diskutiert. Ich verfolge das Thema aufmerksam, auch wenn ich nicht bis in jede der diskutierten Ecken vorstoße. Dabei ist mir bei meinen eigenen Bildern etwas aufgefallen.

Zur bestimmung des Aussehens benutze ich aktuell eine Mischung aus SVG-Attributen und CSS. Den CSS-Block binde ich direkt im Dokument ein.

<?xml version="1.0" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 264 264" width="264" height="264">
 <style type="text/css">
  <![CDATA[
  /* CSS-Angaben */
  ]]>
 </style>
 <g>
  <!-- die Bildelemente -->
 </g>
</svg>

Hier wird, so hatte ich das irgendwo erspäht, der CSS-Block innerhalb <defs> notiert.

<?xml version="1.0" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 264 264" width="264" height="264">
 <defs>
  <style type="text/css">
  <![CDATA[
  /* CSS-Angaben */
  ]]>
  </style>
 </defs>
 <g>
  <!-- die Bildelemente -->
 </g>
</svg>

So habe ich das auch schon in Bildern aus anderen Quellen gefunden, das aber auch nicht durchgehend. Beides funktioniert. Gibt es da den einen richtigen Weg?

Weiterhin ist mir in den Diskussionen zum Dark-Mode aufgefallen, dass bei den Bildern für das Wiki svg { background: transparent; } verwendet wird. Ich habe den Bildhintergrund bisher mit svg { fill: transparent; } durchsichtig gemacht. Die Frage ist hier also ebenfalls, ob es dafür einen „richtigeren“ Weg gibt.

Tschö, Auge