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

Jemand hat mich kürzlich gefragt, wie ich an das Debuggen von Inline-SVGs herangehe. Da es Teil des DOM ist, können wir jedes Inline-SVG in jedem Browser DevTools untersuchen. Aus diesem Grund haben wir die Möglichkeit, Dinge zu untersuchen und potenzielle Probleme oder Möglichkeiten zur Optimierung des SVG aufzudecken.

Aber manchmal können wir unsere SVGs überhaupt nicht sehen. In diesen Fällen gibt es sechs bestimmte Dinge, nach denen ich beim Debuggen suche.

1. Das viewBox Werte

Das viewBox ist ein häufiger Punkt der Verwirrung bei der Arbeit mit SVG. Es ist technisch in Ordnung, Inline-SVG ohne es zu verwenden, aber wir würden einen seiner wichtigsten Vorteile verlieren: die Skalierung mit dem Container. Gleichzeitig kann es bei unsachgemäßer Konfiguration gegen uns arbeiten, was zu unerwünschtem Clipping führt.

Die Elemente sind da, wenn sie abgeschnitten 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 sie so aussehen:

Der einfachste Weg, dies zu beheben? Hinzufügen overflow="visible" zum SVG, sei es in unserem Stylesheet, inline auf der style -Attribut oder direkt als SVG-Präsentationsattribut. Aber wenn wir auch a anwenden background-color zum SVG oder wenn wir andere Elemente drumherum haben, sehen die Dinge vielleicht ein bisschen anders aus. In diesem Fall ist die beste Option, die zu bearbeiten viewBox um den ausgeblendeten Teil des Koordinatensystems anzuzeigen:

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

Wie funktioniert das viewBox ung?

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

Das Ansichtsfenster ist ein Fensterrahmen auf der unendlichen Leinwand. Seine Abmessungen sind definiert durch width und height Attribute oder in CSS mit den entsprechenden width und height Eigenschaften. Wir können jede gewünschte Längeneinheit angeben, aber wenn wir einheitslose Zahlen angeben, sind sie standardmäßig Pixel.

Das 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 gestalten. Die letzten beiden sind die Breite und Höhe des Koordinatensystems innerhalb des Ansichtsfensters – hier können wir den Maßstab des Gitters bearbeiten (auf das wir im Abschnitt über Zoomen).

Hier ist ein vereinfachtes Markup, das das SVG zeigt viewBox und für width und height Attribute, die beide auf gesetzt sind <svg>:

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

Aktualisieren

Also das:

<svg viewBox="0 0 700 700">

…passt dazu:

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

Das Ansichtsfenster, das wir sehen, beginnt wo 0 auf der x-Achse und 0 auf der y-Achse treffen.

Indem Sie dies ändern:

<svg viewBox="0 0 700 700">

… dazu:

<svg viewBox="300 200 700 700">

…Breite und Höhe bleiben gleich (700 jeweils Einheiten), aber der Anfang des Koordinatensystems ist jetzt am 300 Punkt auf der x-Achse und 200 auf der y-Achse.

Im folgenden Video füge ich ein Rot hinzu <circle> zum SVG mit seinem Zentrum am 300 Punkt auf der x-Achse und 200 auf der y-Achse. Beachten Sie, wie sich die ändern viewBox Koordinaten auf dieselben Werte ändert auch die Platzierung des Kreises in der oberen linken Ecke des Rahmens, während die gerenderte Größe des SVG gleich bleibt (700×700). Alles, was ich tat, war, die Dinge mit dem „umzugestalten“. viewBox.

Zoomen

Wir können die letzten beiden Werte innerhalb der ändern viewBox um das Bild zu vergrößern oder zu verkleinern. Je größer die Werte, desto mehr SVG-Einheiten werden hinzugefügt, um in das Ansichtsfenster zu passen, was zu einem kleineren Bild führt. Wenn wir ein Verhältnis von 1:1 beibehalten wollen, müssen unsere viewBox Breite und Höhe müssen mit unseren Breiten- und Höhenwerten des Ansichtsfensters übereinstimmen.

Mal sehen, was in Illustrator passiert, wenn wir diese Parameter ändern. Die Zeichenfläche ist die viewport was durch ein weißes 700px-Quadrat dargestellt wird. Alles andere außerhalb dieses Bereichs ist unsere unendliche SVG-Leinwand und wird standardmäßig beschnitten.

Abbildung 1 unten zeigt einen blauen Punkt bei 900 entlang der x-Achse und 900 entlang der y-Achse. Wenn ich die letzten beiden ändere viewBox Werte von 700 zu 900 so was:

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

… dann ist der blaue Punkt fast vollständig wieder sichtbar, wie in Abbildung 2 unten zu sehen ist. Unser Bild ist verkleinert, weil wir die viewBox-Werte erhöht haben, aber die tatsächlichen Breiten- und Höhenabmessungen der SVG blieben gleich, und der blaue Punkt näherte sich wieder dem nicht beschnittenen Bereich.

Es gibt ein rosafarbenes Quadrat als Hinweis darauf, wie das Raster skaliert wird, um es an das Ansichtsfenster anzupassen: Die Einheit wird kleiner und mehr Rasterlinien passen in denselben Ansichtsfensterbereich. Sie können mit den gleichen Werten im folgenden Pen spielen, um zu sehen, dass dies in Aktion funktioniert:

2. Vermisst width und height

Eine andere häufige Sache, auf die ich beim Debuggen von Inline-SVG schaue, ist, ob das Markup die width or height Attribute. Dies 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 die SVG width Wert mit 0px statt auto). Ausschließlich width or height in diesen Fällen hindert uns daran, das vollständige Bild zu sehen, wie wir sehen können Öffnen Sie diese CodePen-Demo und vergleichen Sie es in Chrome, Safari und Firefox (zum Vergrößern auf die Bilder tippen).

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, die Höhe allein zu verwenden, insbesondere wenn sie auf eingestellt ist 100% or auto. Eine andere Problemumgehung besteht darin, richtig einstellen und linke Werte.

Du kannst damit herumspielen der folgende Stift und kombiniere die verschiedenen Möglichkeiten.

3. Versehentlich fill und stroke Farben

Es kann auch sein, dass wir Farbe auftragen <svg> -Tag, egal ob es sich um einen Inline-Stil handelt oder aus CSS stammt. Das ist in Ordnung, aber es könnten andere Farbwerte im gesamten Markup oder in Stilen vorhanden sein, die mit der auf der eingestellten Farbe in Konflikt stehen <svg>, was dazu führt, dass Teile unsichtbar sind.

Deshalb suche ich eher nach fill und stroke Attribute im Markup des SVG und löschen sie. Das folgende Video zeigt ein SVG, das ich in CSS mit einem Rot gestylt habe fill. Es gibt ein paar Fälle, in denen Teile des SVG direkt im Markup, das ich entfernt habe, weiß ausgefüllt sind, um die fehlenden Teile sichtbar zu machen.

4. Fehlende Ausweise

Dies mag sehr offensichtlich erscheinen, aber Sie wären überrascht, wie oft ich es sehe. Nehmen wir an, wir haben eine SVG-Datei in Illustrator erstellt und waren sehr gewissenhaft bei der Benennung unserer Ebenen, damit Sie 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 in diese IDs einklinken.

Das ist eine nette Art, Dinge zu tun. Aber es gibt viele Male, in denen ich gesehen habe, dass dieselbe SVG-Datei ein zweites Mal an denselben Ort exportiert wurde und die IDs unterschiedlich sind, normalerweise beim direkten Kopieren / Einfügen der Vektoren. Vielleicht wurde eine neue Ebene hinzugefügt oder eine der vorhandenen umbenannt oder so. In jedem Fall stimmen die CSS-Regeln nicht mehr mit den IDs im SVG-Markup überein, was dazu führt, dass das SVG anders als erwartet gerendert wird.

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

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

5. Checkliste für Clipping und Maskierung

Wenn ein SVG unerwartet beschnitten wird und die viewBox sieht gut aus, ich schaue mir normalerweise das CSS an clip-path or mask Eigenschaften, die das Bild stören könnten. Es ist verlockend, sich das Inline-Markup immer wieder anzusehen, aber es ist gut, sich daran zu erinnern, dass das Styling eines SVG möglicherweise an anderer Stelle stattfindet.

CSS-Clipping und -Maskierung ermöglichen es uns, Teile eines Bildes oder Elements zu „verstecken“. Im SVG-Format <clipPath> ist eine Vektoroperation, die Teile eines Bildes ohne halbwegs Ergebnisse schneidet. Die <mask> tag ist eine Pixeloperation, die Transparenz, Halbtransparenzeffekte und unscharfe Kanten ermöglicht.

Dies ist eine kleine Checkliste zum Debuggen von Fällen, in denen Clipping und Masking involviert sind:

• Stellen Sie sicher, dass der Beschneidungspfad (oder die Maske) und die Grafik einander überlappen. Die überlappenden Teile werden angezeigt.
• Wenn Sie einen komplexen Pfad haben, der Ihre Grafik nicht schneidet, versuchen Sie, Transformationen anzuwenden, bis sie übereinstimmen.
• Sie können den inneren Code weiterhin mit den devtools überprüfen, obwohl die <clipPath> or <mask> werden nicht gerendert, also verwenden Sie es!
• Kopieren Sie das Markup nach innen <clipPath> und <mask> und fügen Sie es ein, bevor Sie das schließen </svg> Schild. Fügen Sie dann ein hinzu fill zu diesen Formen und überprüfen Sie die Koordinaten und Abmessungen der SVG. Wenn Sie das Bild immer noch nicht sehen, versuchen Sie es hinzuzufügen overflow="hidden" zu den <svg> -Tag.
• Überprüfen Sie, ob a einzigartiges ID wird für die verwendet <clipPath> or <mask>, und dass dieselbe ID auf die Formen oder Gruppen von Formen angewendet wird, die ausgeschnitten oder maskiert sind. Eine nicht übereinstimmende ID wird das Erscheinungsbild stören.
• Überprüfen Sie das Markup zwischen den auf Tippfehler <clipPath> or <mask> Stichworte.
• fill, stroke, opacity, oder einige andere Stile, die auf die darin enthaltenen Elemente angewendet werden <clipPath> sind nutzlos – der einzig nützliche Teil ist die Füllbereichsgeometrie dieser Elemente. Deshalb, wenn Sie a verwenden <polyline> es wird sich wie a verhalten <polygon> und wenn Sie eine verwenden <line> Sie werden keinen Clipping-Effekt sehen.
• Wenn Sie Ihr Bild nicht sehen, nachdem Sie a <mask>Stellen Sie sicher, dass die fill des maskierenden Inhalts ist nicht vollständig schwarz. Die Leuchtdichte des Maskierungselements bestimmt die Deckkraft der endgültigen Grafik. Sie können durch die helleren Teile sehen und die dunkleren Teile werden den Inhalt Ihres Bildes verbergen.

Sie können mit maskierten und beschnittenen Elementen spielen Dieser Stift.

6. Namensräume

Wussten Sie, dass SVG eine XML-basierte Auszeichnungssprache ist? Nun, es ist! Der Namensraum für SVG wird auf der festgelegt xmlns Attribut:

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

Es gibt viel Wissenswertes über Namensräume in XML und MDN hat eine großartige Einführung dazu. Es genügt zu sagen, dass der Namespace dem Browser Kontext bereitstellt und ihn darüber informiert, dass das Markup spezifisch für SVG ist. Die Idee ist, dass Namespaces dabei helfen, Konflikte zu vermeiden, wenn sich mehr als ein XML-Typ in derselben Datei befindet, wie SVG und XHTML. Dies ist ein viel selteneres Problem in modernen Browsern, könnte aber helfen, SVG-Rendering-Probleme in älteren Browsern oder Browsern wie Gecko zu erklären, die bei der Definition von Doctypes und Namespaces streng sind.

Die SVG 2-Spezifikation erfordert keinen Namensraum bei der Verwendung von HTML-Syntax. Aber es ist entscheidend wenn die Unterstützung für ältere Browser Priorität hat – außerdem schadet es nichts, sie hinzuzufügen. Auf diese Weise, wenn die <html> Elemente xmlns -Attribut definiert ist, tritt in diesen seltenen Fällen kein Konflikt auf.

<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 Sie Inline-SVG in CSS verwenden, z. B. wenn Sie es als Hintergrundbild festlegen. Im folgenden Beispiel wird nach erfolgreicher Validierung ein Häkchensymbol an der Eingabe angezeigt. 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 Namensraum innerhalb der SVG in der Hintergrundeigenschaft entfernen, verschwindet das Bild:

Ein weiteres gebräuchliches Namespace-Präfix ist xlink:href. Wir verwenden es häufig, wenn wir auf andere Teile des SVG verweisen, wie: Muster, Filter, Animationen oder Farbverläufe. Die Empfehlung ist, es mit zu ersetzen href da der andere seit SVG 2 veraltet ist, es jedoch zu Kompatibilitätsproblemen mit älteren Browsern kommen kann. In diesem Fall können wir beide verwenden. Denken Sie nur daran, den Namensraum einzuschließen xmlns:xlink="http://www.w3.org/1999/xlink" wenn Sie noch verwenden xlink:href.

Verbessern Sie Ihre SVG-Fähigkeiten!

Ich hoffe, diese Tipps helfen Ihnen dabei, eine Menge Zeit zu sparen, wenn Sie Probleme mit der Fehlerbehebung bei falsch gerenderten Inline-SVGs haben. Das sind genau die Dinge, die ich suche. Vielleicht haben Sie verschiedene rote Flaggen, auf die Sie achten – wenn ja, sagen Sie es mir in den Kommentaren!

Unter dem Strich lohnt es sich, zumindest ein grundlegendes Verständnis davon zu haben die verschiedenen Möglichkeiten, wie SVG verwendet werden kann. CodePen-Herausforderungen enthalten häufig SVG und bieten bewährte Verfahren. Hier sind ein paar weitere Ressourcen zum Aufleveln:

Es gibt ein paar Leute, die ich für SVG-bezogene Güte empfehlen kann:

• SEO-gestützte Content- und PR-Distribution. Holen Sie sich noch heute Verstärkung.
• Platoblockkette. Web3-Metaverse-Intelligenz. Wissen verstärkt. Hier zugreifen.
• Quelle: https://css-tricks.com/6-common-svg-fails-and-how-to-fix-them/