Servus!

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>

Zuerst: Die Dokument-Deklaration kann weg! Auch wenn SVG2 noch nicht verabschiedet ist, halten sich alle Browser-Hersteller dran.

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

Geht, zusammen mit pattern, symbols und Verläufen. Häufig habe ich die aber gar nicht und deshalb lasse ich <defs> weg.

BTW: Die ganzen filter-Elemente sind vom Code her eine Pest. Die CSS-Eigenschaft filter ist einfacher zum Schreiben und verwendet die gleichen Algorithmen!

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?

Ich glaube nicht.

Weiterhin ist mir in den Diskussionen zum Dark-Mode aufgefallen, dass bei den Bildern für das Wiki svg { background: transparent; } verwendet wird.

Nein, das wurde bisher nicht definiert und deshalb ist der weiße Hintergrund irgendwie selbstverständlich gewesen. Erst als wir die Textfarben änderten, musste auch ein Hintergrund zur Sicherstellung des Kontrasts angelegt werden.

Imho passt die Eigenschaft CSS/Eigenschaften/color-scheme dafür nicht, weil ja nicht klar ist, was der „Text“ bzw „Vordergrund“ ist.

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.

Eigentlich fill, ich hab's aber grad ausprobiert und auch einen path mit background-coloreingefärbt. Das war aber ein Quadrat - da weiß ich nicht, wie sich das bei anderen Formen verhält. [EDIT] - nein geht nicht! [/EDIT]

Herzliche Grüße
Matthias Scharwies