6 Häufige SVG-Fehler (und wie man sie behebt)

Vor kurzem fragte mich jemand, wie ich mit der Fehlersuche bei Inline-SVGs umgehe. Da sie Teil des DOM sind, können wir jedes Inline-SVG in den Browser-Entwicklertools inspizieren. Und deshalb haben wir die Möglichkeit, Dinge einzugrenzen und potenzielle Probleme oder Optimierungsmöglichkeiten für das SVG aufzudecken.

Aber manchmal sehen wir unsere SVGs überhaupt nicht. In diesen Fällen achte ich bei der Fehlersuche auf sechs bestimmte Dinge.

1. Die viewBox-Werte

Die viewBox ist ein häufiger Verwirrungspunkt bei der Arbeit mit SVG. Es ist technisch in Ordnung, Inline-SVG ohne sie zu verwenden, aber wir würden einen ihrer bedeutendsten Vorteile verlieren: die Skalierung mit dem Container. Gleichzeitig kann sie uns bei unsachgemäßer Konfiguration gegen uns arbeiten und zu unerwünschtem Clipping führen.

Die Elemente sind vorhanden, wenn sie geclippt werden – sie befinden sich nur in einem Teil des Koordinatensystems, den wir nicht sehen. Wenn wir die Datei in einem Grafikbearbeitungsprogramm öffnen würden, könnte es so aussehen

Der einfachste Weg, dies zu beheben? Fügen Sie overflow="visible" zum SVG hinzu, sei es in unserer Stylesheet, inline im style-Attribut oder direkt als SVG-Präsentationsattribut. Aber wenn wir dem SVG auch eine background-color geben oder andere Elemente darum herum haben, sieht die Sache vielleicht etwas seltsam aus. In diesem Fall wäre die beste Option, die viewBox zu bearbeiten, um diesen Teil des Koordinatensystems anzuzeigen, der verborgen war

Es gibt noch ein paar zusätzliche Dinge über die viewBox, die es wert sind, behandelt zu werden, solange wir beim Thema sind

Wie funktioniert die viewBox?

SVG ist eine unendliche Leinwand, aber wir können kontrollieren, was wir sehen und wie wir es durch das Viewport und die viewBox sehen.

Das **Viewport** ist ein Fensterrahmen auf der unendlichen Leinwand. Seine Abmessungen werden durch die Attribute width und height definiert oder in CSS mit den entsprechenden Eigenschaften width und height. Wir können jede Längeneinheit angeben, die wir wollen, aber wenn wir einheitenlose Zahlen angeben, werden sie standardmäßig auf Pixel gesetzt.

Die **viewBox** wird durch vier Werte definiert. Die ersten beiden sind der Startpunkt in der oberen linken Ecke (x- und y-Werte, negative Zahlen erlaubt). Ich bearbeite diese, um das Bild neu zu rahmen. Die letzten beiden sind die Breite und Höhe des Koordinatensystems innerhalb des Viewports – hier können wir die Skalierung des Rasters bearbeiten (was wir im Abschnitt über Zoomen behandeln werden).

Hier ist ein vereinfachter Markup, der die SVG viewBox und die Attribute width und height zeigt, die beide auf dem <svg> gesetzt sind

<svg viewBox="0 0 700 700" width="700" height="700">
  <!-- etc. -->
</svg>

Neuerahmen

Also, das

<svg viewBox="0 0 700 700">

…entspricht diesem

<svg viewBox="start-x-axis start-y-axis width height">

Das sichtbare Viewport beginnt dort, wo 0 auf der x-Achse und 0 auf der y-Achse zusammentreffen.

Wenn Sie dies ändern

<svg viewBox="0 0 700 700">

...zu diesem:

<svg viewBox="300 200 700 700">

…bleiben die Breite und Höhe gleich (jeweils 700 Einheiten), aber der Beginn des Koordinatensystems liegt nun bei 300 auf der x-Achse und 200 auf der y-Achse.

Im folgenden Video füge ich einen roten <circle> zum SVG hinzu, dessen Mittelpunkt bei 300 auf der x-Achse und 200 auf der y-Achse liegt. Beachten Sie, wie die Änderung der viewBox-Koordinaten auf dieselben Werte auch die Platzierung des Kreises in der oberen linken Ecke des Rahmens verändert, während die gerenderte Größe des SVG gleich bleibt (700×700). Alles, was ich getan habe, war, die Dinge mit der viewBox neu zu rahmen.

Zoomen

Wir können die letzten beiden Werte in der viewBox ändern, um in das Bild hinein- oder herauszuzoomen. Je größer die Werte, desto mehr SVG-Einheiten werden hinzugefügt, um in das Viewport zu passen, was zu einem kleineren Bild führt. Wenn wir ein Verhältnis von 1:1 beibehalten möchten, müssen die Breite und Höhe unserer viewBox mit den Werten für Breite und Höhe unseres Viewports übereinstimmen.

Schauen wir uns an, was in Illustrator passiert, wenn wir diese Parameter ändern. Das Zeichenbrett ist das viewport, das durch ein weißes 700px Quadrat dargestellt wird. Alles andere außerhalb dieses Bereichs ist unsere unendliche SVG-Leinwand und wird standardmäßig geclippt.

Abbildung 1 unten zeigt einen blauen Punkt bei 900 auf der x-Achse und 900 auf der y-Achse. Wenn ich die letzten beiden viewBox-Werte von 700 auf 900 ändere, wie hier:

<svg viewBox="300 200 900 900" width="700" height="700">

…dann ist der blaue Punkt fast wieder vollständig sichtbar, wie in Abbildung 2 unten zu sehen ist. Unser Bild wird verkleinert, da wir die viewBox-Werte erhöht haben, aber die tatsächlichen Breiten- und Höhenabmessungen des SVG blieben gleich, und der blaue Punkt rückte näher an den unbegrenzten Bereich heran.

Es gibt ein rosa Quadrat als Beweis dafür, wie sich das Gitter an das Viewport anpasst: Die Einheit wird kleiner, und mehr Gitterlinien passen in denselben Viewport-Bereich. Sie können mit denselben Werten im folgenden Pen spielen, um diese Funktion in Aktion zu sehen

2. Fehlende width und height

Eine weitere häufige Sache, die ich bei der Fehlersuche von Inline-SVG überprüfe, ist, ob das Markup die Attribute width oder height enthält. Das ist in vielen Fällen keine große Sache, es sei denn, das SVG befindet sich in einem Container mit absoluter Positionierung oder einem flexiblen Container (da Safari den SVG-width-Wert mit 0px anstelle von auto berechnet). Das Ausschließen von width oder height in diesen Fällen hindert uns daran, das vollständige Bild zu sehen, wie Sie durch Öffnen dieser CodePen-Demo und Vergleichen in Chrome, Safari und Firefox (Bilder für größere Ansicht antippen) sehen können.

Die Lösung? Fügen Sie eine Breite oder Höhe hinzu, sei es als Präsentationsattribut, inline im style-Attribut oder in CSS. Vermeiden Sie es, nur die Höhe zu verwenden, insbesondere wenn sie auf 100% oder auto gesetzt ist. Ein weiterer Workaround ist, die Werte right und left zu setzen.

Sie können mit dem folgenden Pen spielen und die verschiedenen Optionen kombinieren.

3. Unbeabsichtigte fill- und stroke-Farben

Es kann auch sein, dass wir dem <svg>-Tag Farbe geben, sei es als Inline-Stil oder aus CSS. Das ist in Ordnung, aber es könnten andere Farbwerte im Markup oder in den Stilen vorhanden sein, die mit der Farbe des <svg> kollidieren und Teile unsichtbar machen.

Deshalb neige ich dazu, nach den Attributen fill und stroke im SVG-Markup zu suchen und sie zu entfernen. Das folgende Video zeigt ein SVG, das ich in CSS mit einer roten fill gestylt habe. Es gibt ein paar Fälle, in denen Teile des SVG direkt im Markup weiß gefüllt sind, die ich entfernt habe, um die fehlenden Teile sichtbar zu machen.

4. Fehlende IDs

Diese mag sehr offensichtlich erscheinen, aber Sie würden sich wundern, wie oft ich sehe, dass sie auftaucht. Nehmen wir an, wir haben eine SVG-Datei in Illustrator erstellt und waren sehr sorgfältig bei der Benennung unserer Ebenen, so dass wir beim Exportieren der Datei schöne, übereinstimmende IDs im Markup erhalten. Und nehmen wir an, wir planen, dieses SVG in CSS zu stylen, indem wir uns an diese IDs hängen.

Das ist eine gute Vorgehensweise. Aber es gibt viele Fälle, in denen ich dieselbe SVG-Datei ein zweites Mal an denselben Ort exportiert sehe und die IDs unterschiedlich sind, meistens beim Kopieren und Einfügen der Vektoren. Vielleicht wurde eine neue Ebene hinzugefügt, oder eine der vorhandenen wurde umbenannt oder so etwas. Was auch immer der Fall ist, die CSS-Regeln stimmen nicht mehr mit den IDs im SVG-Markup überein, was dazu führt, dass das SVG anders gerendert wird als erwartet.

In großen SVG-Dateien kann es schwierig sein, diese IDs zu finden. Dies ist ein guter Zeitpunkt, die DevTools zu öffnen, den Teil der Grafik zu inspizieren, der nicht funktioniert, und zu sehen, ob die IDs noch übereinstimmen.

Ich würde also sagen, es lohnt sich, eine exportierte SVG-Datei in einem Code-Editor zu öffnen und sie mit dem Original zu vergleichen, bevor man Dinge austauscht. Apps wie Illustrator, Figma und Sketch sind schlau, aber das bedeutet nicht, dass wir nicht dafür verantwortlich sind, sie zu überprüfen.

5. Checkliste für Clipping und Masking

Wenn ein SVG unerwartet geclippt ist und die viewBox in Ordnung ist, schaue ich normalerweise in die CSS nach clip-path- oder mask-Eigenschaften, die das Bild stören könnten. Es ist verlockend, sich weiterhin mit dem Inline-Markup zu beschäftigen, aber es ist gut zu wissen, dass das Styling eines SVG auch woanders stattfinden kann.

CSS Clipping und Masking ermöglichen es uns, Teile eines Bildes oder Elements zu "verstecken". In SVG ist <clipPath> eine Vektoroperation, die Teile eines Bildes ohne Zwischenergebnisse abschneidet. Das <mask>-Tag ist eine Pixeloperation, die Transparenz, halbtransparente Effekte und unscharfe Kanten ermöglicht.

Hier ist eine kleine Checkliste für die Fehlersuche bei Fällen, in denen Clipping und Masking beteiligt sind

• Stellen Sie sicher, dass der Clipping-Pfad (oder die Maske) und die Grafik sich überlappen. Die überlappenden Teile sind das, was angezeigt wird.
• Wenn Sie einen komplexen Pfad haben, der Ihre Grafik nicht schneidet, versuchen Sie, Transformationen anzuwenden, bis sie übereinstimmen.
• Sie können den inneren Code immer noch mit den DevTools inspizieren, auch wenn der <clipPath> oder <mask> nicht gerendert wird, also nutzen Sie ihn!
• Kopieren Sie das Markup innerhalb von <clipPath> und <mask> und fügen Sie es vor dem schließenden </svg>-Tag ein. Fügen Sie dann fill zu diesen Formen hinzu und überprüfen Sie die SVG-Koordinaten und -Abmessungen. Wenn Sie das Bild immer noch nicht sehen, versuchen Sie, overflow="hidden" zum <svg>-Tag hinzuzufügen.
• Überprüfen Sie, ob eine **eindeutige** ID für den <clipPath> oder <mask> verwendet wird und ob dieselbe ID auf die Formen oder Gruppen von Formen angewendet wird, die geclippt oder maskiert werden. Eine falsche ID bricht das Erscheinungsbild.
• Überprüfen Sie auf Tippfehler im Markup zwischen den <clipPath>- oder <mask>-Tags.
• fill, stroke, opacity oder andere Stile, die auf die Elemente innerhalb von <clipPath> angewendet werden, sind nutzlos – der einzige nützliche Teil ist die Füllregionsgeometrie dieser Elemente. Deshalb wird ein <polyline> wie ein <polygon> verhalten und ein <line> keinen Clipping-Effekt zeigen.
• Wenn Sie Ihr Bild nach Anwendung einer <mask> nicht sehen, stellen Sie sicher, dass die fill des Maskierungsinhalts nicht vollständig schwarz ist. Die Luminanz des Maskierungselements bestimmt die Opazität der endgültigen Grafik. Sie können durch die helleren Teile hindurchsehen, und die dunkleren Teile verbergen den Inhalt Ihres Bildes.

Sie können mit maskierten und geclippten Elementen in diesem Pen experimentieren.

6. Namespaces

Wussten Sie, dass SVG eine XML-basierte Auszeichnungssprache ist? Nun, das ist sie! Der Namespace für SVG wird über das Attribut xmlns gesetzt

<svg xmlns="http://www.w3.org/2000/svg">
  <!-- etc. -->
</svg>

Es gibt viel über Namespacing in XML zu wissen, und MDN bietet eine großartige Einführung dazu. Kurz gesagt, der Namespace liefert dem Browser Kontext und informiert ihn, dass das Markup spezifisch für SVG ist. Die Idee ist, dass Namespaces Konflikte vermeiden, wenn mehr als eine Art von XML in derselben Datei vorhanden ist, wie SVG und XHTML. Dies ist in modernen Browsern ein viel selteneres Problem, kann aber ältere Browser oder Browser wie Gecko, die bei der Definition von Doctype und Namespaces streng sind, erklären.

Die SVG 2-Spezifikation verlangt kein Namespacing bei Verwendung von HTML-Syntax. Aber es ist entscheidend, wenn die Unterstützung für ältere Browser Priorität hat – außerdem schadet es nicht, es hinzuzufügen. So wird es im seltenen Fall nicht mit dem xmlns-Attribut des <html>-Elements kollidieren.

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" width="700px" height="700px">
      <!-- etc. -->
    </svg>
  </body>
</html>

Dies gilt auch, wenn Inline-SVG in CSS verwendet wird, z. B. als Hintergrundbild. Im folgenden Beispiel erscheint ein Häkchen-Symbol auf der Eingabeaufforderung nach erfolgreicher Validierung. So sieht das CSS aus

textarea:valid {
 background: white url('data:image/svg+xml,\
    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26">\
    <circle cx="13" cy="13" r="13" fill="%23abedd8"/>\
    <path fill="none" stroke="white" stroke-width="2" d="M5 15.2l5 5 10-12"/>\
    </svg>') no-repeat 98% 5px;
}

Wenn wir den Namespace innerhalb des SVG in der Hintergrund-Eigenschaft entfernen, verschwindet das Bild

Ein weiteres gängiges Namespace-Präfix ist xlink:href. Wir verwenden es häufig, wenn wir auf andere Teile des SVG verweisen, wie z. B.: Muster, Filter, Animationen oder Verläufe. Die Empfehlung ist, es durch href zu ersetzen, da letzteres seit SVG 2 veraltet ist, aber es kann Kompatibilitätsprobleme mit älteren Browsern geben. In diesem Fall können wir beide verwenden. Denken Sie daran, den Namespace xmlns:xlink="http://www.w3.org/1999/xlink" einzuschließen, wenn Sie immer noch xlink:href verwenden.

Verbessern Sie Ihre SVG-Kenntnisse!

Ich hoffe, diese Tipps helfen Ihnen, viel Zeit zu sparen, wenn Sie mit falsch gerenderten Inline-SVGs zu kämpfen haben. Das sind nur die Dinge, auf die ich achte. Vielleicht haben Sie andere Warnzeichen, auf die Sie achten – wenn ja, sagen Sie es mir in den Kommentaren!

Letztendlich zahlt es sich aus, zumindest ein grundlegendes Verständnis dafür zu haben, wie SVG verwendet werden kann. CodePen Challenges beinhalten oft SVG und bieten gute Übungsmöglichkeiten. Hier sind noch ein paar Ressourcen, um Ihr Wissen zu erweitern

• Using SVG with CSS3 and HTML5 (Amelia Bellamy-Royds, Kurt Cagle, Dudley Storey) – Ich betrachte es als die SVG-Bibel.
• Lea Verou verfügt über ein Füllhorn an SVG-Wissen und hat sich zu diesem Thema geäußert, und zwar ziemlich oft (wie in diesem Video von Frontend United 2019).
• SVG Animations (Sarah Drasner)
• SVG Essentials (Amelia Bellamy-Royds, J. David Eisenberg)
• Practical SVG (Chris Coyier)

Es gibt ein paar Leute, denen ich für SVG-bezogene Inhalte folge

• Sara Soueidan
• Carl Schoof
• Cassie Evans
• Val Head
• Ana Tudor