Wichtigste Erkenntnisse
- Bündeln Sie kleine, vertrauenswürdige Icons als Komponenten, wenn Styling und Offlineverfügbarkeit wichtig sind.
- Behandeln Sie Remote-SVG als nicht vertrauenswürdige Eingabe und definieren Sie explizite Netzwerk- und Bereinigungsrichtlinien.
- Nutzen Sie die viewBox als Skalierungsvertrag und testen Sie die Seitenverhältnisse auf beiden mobilen Plattformen.
React Native rendert beliebiges SVG nicht über das Web-DOM. Teams verwenden typischerweise eine native SVG-Bibliothek, transformieren vertrauenswürdige Dateien zur Build-Zeit oder fordern zur Laufzeit vorbereitete Rasterbilder an.
Worauf es besonders ankommt
- Stellen Sie Raster-Fallbacks für nicht unterstützte Effekte, externe Referenzen oder ältere Renderer bereit.
Das native Rendering-Modell nutzen
React Native stellt kein Browser-DOM bereit, daher lassen sich Web-Annahmen zu <img>, Inline-XML, CSS-Selektoren und SVG-Events nicht direkt übertragen. Ein natives SVG-Paket bildet unterstützte SVG-Elemente und -Eigenschaften auf Zeichen-APIs unter iOS und Android ab. Paket, Plattform und Build-Konfiguration definieren daher den tatsächlichen Funktionsumfang.
Betrachten Sie SVG-Unterstützung als Abhängigkeit der Anwendung und nicht als Fähigkeit einer Dateiendung. Halten Sie fest, welche Elemente, Paint-Funktionen, Filter, Textverhalten, Masken und externen Referenzen der gewählte Renderer unterstützt. Prüfen Sie diese Matrix erneut, wenn Sie React Native, den Renderer oder eine der beiden mobilen Plattformen aktualisieren.
Grafiken nach Vertrauensstufe und Lebenszyklus klassifizieren
Produkteigene Icons sind zur Build-Zeit bekannt, werden gemeinsam mit der Anwendung geprüft und sind meist klein. Von Kunden bereitgestelltes Bildmaterial trifft zur Laufzeit ein, kann sich unabhängig vom Release ändern und muss als nicht vertrauenswürdig behandelt werden. Marketing-Illustrationen sind möglicherweise vertrauenswürdig, aber zu groß oder werden zu selten genutzt, um ein Bündeln zu rechtfertigen.
Diese Einordnung sollte das Laden und Rendern bestimmen. Bündeln Sie kleine Interface-Symbole, wenn Offlineverhalten und Theme-Styling wichtig sind. Laden Sie freigegebene Remote-Illustrationen nur bei Bedarf. Bereinigen oder rastern Sie Uploads von Nutzern vor der Anzeige und stellen Sie einen Fallback für Grafiken bereit, die nicht unterstützte SVG-Funktionen verwenden.
Gebündelte Komponente
Geeignet für kleine, vertrauenswürdige Icons, die offline funktionieren und auf Anwendungsfarben oder -zustände reagieren müssen.
Remote-Vektor
Geeignet für kontrolliertes Bildmaterial, das sich ohne Anwendungs-Release ändert und innerhalb eines getesteten Funktionsprofils bleibt.
Vorbereiteter Raster-Fallback
Geeignet für nicht vertrauenswürdiges oder komplexes Bildmaterial, berechenbare Thumbnails und Renderer, die die Quelle nicht zuverlässig wiedergeben können.
Zwischen Komponenten- und Datei-Workflows wählen
Ein komponentenbasiertes Icon verwendet native SVG-Primitive direkt in JSX oder wird zur Build-Zeit aus einer vertrauenswürdigen lokalen Datei generiert. Das macht Props wie Größe, Füllung, Kontur und Accessibility-Label bequem nutzbar. Es fügt außerdem die Pfaddaten zum Anwendungs-Bundle hinzu und kann zu unübersichtlichem Code führen, wenn generierte Dateien manuell bearbeitet werden.
Eine Remote-Datei hält Bildmaterial außerhalb des Bundles, bringt aber Netzwerkzugriffe, Caching, Parsing, Fehlerzustände und Vertrauensentscheidungen mit sich. Manche Renderer akzeptieren eine URI, während andere verlangen, dass die Anwendung das XML zuerst abruft. Halten Sie sich an die unterstützte API der Bibliothek, statt anzunehmen, dass eine Web-Bildkomponente beliebiges SVG interpretiert.
Native Abhängigkeiten bewusst konfigurieren
Die Installation unterscheidet sich zwischen verwalteten Entwicklungsumgebungen und reinen nativen Projekten. Prüfen Sie, ob das SVG-Paket und ein etwaiger Transformer für die Build-Zeit bereits enthalten sind, natives Linking benötigen oder Änderungen an der Bundler-Konfiguration erfordern. Bauen Sie die native Anwendung nach Änderungen an Abhängigkeiten neu, statt sich auf eine reine JavaScript-Aktualisierung zu verlassen.
Ein Transformer, der Dateien vom Typ .svg als Komponenten importiert, ist ein Build-Werkzeug und kein Laufzeit-Sanitizer. Beschränken Sie ihn auf geprüfte Assets im Repository und halten Sie seine TypeScript-Deklarationen mit den Props konsistent, die er tatsächlich erzeugt. Testen Sie Release-Builds, da Entwicklungs-Bundler fehlende Asset-Regeln oder native Konfiguration verbergen können.
Die Skalierung durch die viewBox steuern lassen
Eine gültige viewBox legt das Koordinatensystem des Vektors fest. Breite und Höhe der Komponente definieren die Layout-Box, und der Renderer bildet die viewBox in diese Box ab. Wenn die Quelle nur feste Abmessungen oder eine falsche viewBox hat, kann eine Größenänderung Inhalte abschneiden, überraschenden Freiraum hinzufügen oder die Zeichnung verzerren.
Behalten Sie bei Logos und Illustrationen das Seitenverhältnis bei, sofern die Verzerrung nicht beabsichtigt ist. Platzieren Sie das SVG in einem Elternelement mit expliziten Layout-Vorgaben und testen Sie dann schmale und breite Geräte, große Texteinstellungen und beide Ausrichtungen. Leiten Sie das Layout nicht aus einer angenommenen intrinsischen Größe ab, wenn sich das Remote-Asset ändern kann.
import type { ReactNode } from 'react'
import Svg, { Circle, Path } from 'react-native-svg'
export function StatusIcon(): ReactNode {
return (
<Svg
accessible
accessibilityLabel="Upload complete"
accessibilityRole="image"
width={24}
height={24}
viewBox="0 0 24 24"
>
<Circle cx={12} cy={12} r={10} fill="#13795b" />
<Path d="m7 12 3 3 7-7" fill="none" stroke="#fff" strokeWidth={2} />
</Svg>
)
}Farbe und Typografie plattformübergreifend handhaben
Verwenden Sie für produkteigene Icons Komponenten-Props oder ein dokumentiertes Token-Mapping. currentColor, klassenbasiertes CSS und Web-Custom-Properties verhalten sich möglicherweise nicht so wie im Browser. Testen Sie daher den konkreten Renderer. Schreiben Sie mehrfarbige Illustrationen nicht in Icons mit einer einzigen Farbe um, nur um zu einer bequemen API zu passen.
Textelemente reagieren besonders empfindlich auf die Verfügbarkeit von Schriftarten der Plattform, die Zuordnung von Schriftstärken, das Shaping und den Fallback. Das Umwandeln von Schriftzügen in Pfade erhält das Erscheinungsbild, vergrößert aber die Geometrie und entfernt die Semantik auswählbaren Texts. Für bedeutungstragenden Text, den Nutzer sehen, empfiehlt sich eine native Textkomponente neben der Grafik, während das SVG rein illustrativ bleibt.
Interaktion in der React-Native-Schicht ergänzen
Betten Sie eine interaktive Grafik in das übliche drückbare Bedienelement der Anwendung ein und sorgen Sie für eine ausreichend große Trefferfläche, ein definiertes Verhalten im deaktivierten Zustand, ein Fokusverhalten und einen sichtbaren Zustand. Verlassen Sie sich nicht auf einen winzigen Pfad als einziges Touch-Ziel. Komplexe Interaktion pro Form ist in manchen Renderern möglich, sollte aber auf beiden Plattformen überprüft werden.
Halten Sie Geschäftslogik aus generierten SVG-Komponenten heraus. Reichen Sie Callbacks und visuellen Zustand über einen kleinen, geprüften Wrapper durch und verhindern Sie, dass dekorative Kindelemente zu verwirrenden Zielen für die Barrierefreiheit werden. Wenn ein Diagramm oder eine Karte mehrere interaktive Bereiche benötigt, definieren Sie eine vorhersehbare Alternative für Tastatur oder Screenreader, statt eine unstrukturierte Sammlung von Pfaden offenzulegen.
Barrierefreiheit außerhalb der SVG-Interna bereitstellen
Ein nativer Renderer ignoriert möglicherweise <title> und <desc>, obwohl Browser sie verwenden. Legen Sie Label, Rolle, Hinweis und Zustand für die Barrierefreiheit auf dem React-Native-Bedienelement oder dem semantischen Container fest, mit dem Nutzer interagieren. Dekorative Bilder sollten ausgeschlossen werden, damit ein Screenreader keine Dateinamen oder überflüssigen Labels vorliest.
Codieren Sie wesentliche Informationen nicht ausschließlich über Farbe oder Form. Ein Statussymbol benötigt Text daneben oder ein eindeutiges barrierefreies Label. Datenvisualisierungen benötigen eine textliche Zusammenfassung und, wenn Nutzer Werte einsehen müssen, eine barrierefreie Liste oder Tabelle. Testen Sie mit VoiceOver und TalkBack, statt das Verhalten aus dem Komponentenbaum abzuleiten.
Remote-Inhalte und Fehlerzustände eingrenzen
Erlauben Sie bei entfernten SVG-Dateien nur freigegebene URL-Schemata und Ursprünge, setzen Sie Grenzen für Antwortgröße und Zeit, prüfen Sie den erkannten Inhalt und bereinigen Sie ihn vor dem Rendern. Verlassen Sie sich nicht allein auf die Endung .svg oder auf einen Response-Header. Blockieren Sie unerwartete externe Ressourcen und fügen Sie kein unbereinigtes XML in einen WebView-basierten Fallback ein.
Entwerfen Sie explizite Zustände für das Laden, den Offlinebetrieb, Zeitüberschreitungen, Parsing-Fehler und nicht unterstützte Funktionen. Cachen Sie anhand einer versionierten Asset-Identität, nicht dauerhaft anhand einer veränderlichen URL. Eine fehlerhafte Illustration darf das umgebende Layout nicht zusammenfallen lassen und die Nutzung eines Bedienelements nicht verhindern; Retries sollten begrenzt sein.
Netzwerkrichtlinie
Lassen Sie nur freigegebene Ursprünge zu, verlangen Sie sicheren Transport, begrenzen Sie Weiterleitungen und erzwingen Sie Grenzwerte für Antwortgröße und Zeitüberschreitung.
Inhaltsrichtlinie
Validieren und bereinigen Sie das XML anhand der Teilmenge, die der native Renderer verarbeiten soll.
Fallback-Richtlinie
Reservieren Sie Platz im Layout und zeigen Sie einen deterministischen Platzhalter oder eine Raster-Alternative an, wenn das Vektor-Rendering fehlschlägt.
Rendering-Kosten steuern und Fallbacks erzeugen
Vektoren sind nicht automatisch günstiger als Rastergrafiken. Tausende Pfadsegmente, Masken, Verläufe, Filter und Textelemente können beim Parsen und Zeichnen teuer sein, besonders in einer scrollenden Liste. Erstellen Sie Profile auf repräsentativen, leistungsschwächeren Geräten und vermeiden Sie es, unverändertes XML bei Rerenders wiederholt zu parsen.
Bewahren Sie die Master-Grafiken in einem Speicher auf, den Sie kontrollieren, und erzeugen Sie größenbegrenzte PNG- oder WebP-Fallbacks für Platzierungen, die die benötigten SVG-Funktionen nicht zuverlässig rendern können. Erzeugen Sie Abmessungen, die zur jeweiligen mobilen Oberfläche und deren Dichte-Richtlinie passen. Die Dateivorbereitung installiert weder das native SVG-Paket noch konfiguriert sie den Build oder ersetzt die Asset-Auslieferung der Anwendung.
Beide Plattformen und den gesamten Asset-Pfad testen
Erstellen Sie Fixtures für ein einfaches Icon, Verläufe, Clipping, Masken, Text, ungewöhnliche Seitenverhältnisse, fehlerhaftes XML, ein übergroßes Dokument und ein fehlendes entferntes Asset. Testen Sie Release-Builds für iOS und Android mit hellen und dunklen Themes, im Offlinemodus, bei langsamem Netzwerk, mit Screenreadern und bei hohen Pixeldichten.
Überwachen Sie fehlgeschlagene Abrufe, Ablehnungen durch die Bereinigung, Parsing-Fehler und die Nutzung des Fallbacks, ohne von Nutzern bereitgestellte SVG-Inhalte zu protokollieren. Versionieren Sie den Renderer und die Richtlinie zur Asset-Verarbeitung, damit sich Regressionen nachvollziehen lassen. Wenn ein Upgrade einer Bibliothek das Rendering verändert, vergleichen Sie freigegebene Screenshots und Interaktionstests, bevor Sie es breit ausrollen.
Wissenswerte technische Details
- React Native hat kein Browser-SVG-DOM. Bibliotheken bilden unterstützte SVG-Elemente auf native Zeichen-APIs ab, und die Unterstützung für Filter, eingebettetes HTML, Schriften oder externe Referenzen kann sich unterscheiden.
- SVG-Transformer zur Build-Zeit machen es bequem, vertrauenswürdige Grafiken als Komponenten zu gestalten, legen aber auch jeden gebündelten Pfad in das Anwendungspaket, statt ihn bei Bedarf zu laden.
- Remote-SVG kann Referenzen und komplexe Inhalte enthalten, die ein Renderer nicht vorgesehen hat. Abruflimits, Bereinigung, Caching und ein Raster-Fallback sind getrennte Sicherheits- und Zuverlässigkeitsaspekte.
- Text in SVG kann unterschiedlich gerendert werden, wenn die erwartete Schrift auf einem Gerät nicht verfügbar ist; das Umwandeln von Text in Konturen verbessert die Konsistenz, opfert aber Auswählbarkeit und Barrierefreiheit.
- Komplexe Vektoren können beim Parsen und Zeichnen aufwendiger sein als ein begrenzter Raster-Fallback, besonders wenn viele Illustrationen in einer scrollenden Liste erscheinen.
- Labels für Barrierefreiheit gehören an die React-Native-Komponente und die umgebende Interaktion, nicht ausschließlich in SVG-title-Elemente, die ein nativer Renderer möglicherweise ignoriert.
Ein praxisnaher Ansatz
- 1
Trennen Sie produkteigene Icons von kundenseitig bereitgestelltem Bildmaterial.
- 2
Wählen Sie einen Rendering-Pfad und halten Sie fest, welche SVG-Funktionen er unterstützt.
- 3
Erzeugen Sie in der Größe begrenzte Fallback-Bilder für jede erforderliche Dichte und Platzierung.
- 4
Testen Sie das Laden im Offline-Modus, Screenreader-Beschriftungen, Farbthemen und fehlerhafte Quellen.
Architekturgrenze
Das SVG-Rendering in React Native hängt von der gewählten nativen Bibliothek und vom Plattform-Build ab. Die Asset-Vorbereitung kann keine nativen Abhängigkeiten installieren und nicht garantieren, dass sich jede browserorientierte SVG-Funktion auf iOS und Android abbilden lässt.
Häufig gestellte Fragen
Wofür wird SVG in React Native häufig verwendet?
Es wird häufig für skalierbare Icons, Logos, Diagramme, Charts und Illustrationen verwendet. Eine native SVG-Bibliothek interpretiert die unterstützten Elemente und zeichnet sie über Plattform-APIs, da React Native nicht über das SVG-DOM des Browsers verfügt.
Sollten lokale SVG-Dateien als Komponenten importiert werden?
Dieser Ansatz eignet sich gut für kleine, vertrauenswürdige, häufig genutzte Assets, die propgesteuerte Farben oder Größen benötigen. Für große Illustrationen, sich häufig ändernde Remote-Inhalte oder nicht vertrauenswürdige Uploads ist er weniger geeignet, weil er Geometriedaten zum Bundle hinzufügt und vor der Laufzeitvalidierung stattfindet.
Warum kann ein SVG unter iOS und Android unterschiedlich gerendert werden?
Die nativen Zeichen-Stacks, die installierten Schriften, das Text-Shaping, die Filterunterstützung und die Renderer-Implementierungen können sich unterscheiden. Nicht unterstützte Elemente werden möglicherweise auch ignoriert. Pflegen Sie ein getestetes Funktionsprofil und prüfen Sie die Release-Builds beider Plattformen.
Ist SVG in einer mobilen Anwendung immer schneller als PNG?
Nein. Ein einfaches Icon kann kompakt und ressourcenschonend zu zeichnen sein, während eine komplexe Illustration erheblichen Parsing- und Rendering-Aufwand erfordern kann. Ein vorbereitetes Rasterbild ist für detailreiche Grafiken, die in fester Größe angezeigt oder in einer langen Liste wiederholt werden, oft berechenbarer.
Wo sollte das Accessibility-Label eines SVG definiert werden?
Definieren Sie es an der React-Native-Komponente oder dem interaktiven Wrapper, der Teil des nativen Accessibility-Baums ist. Verlassen Sie sich nicht allein auf die internen title-Elemente in SVG, da native Renderer sie möglicherweise nicht einheitlich bereitstellen.