Come importare SVG in React Native: react-native-svg + SvgXml

SVG (Scalable Vector Graphics) è diventato un formato importante nei progetti React Native. Rispetto ai formati bitmap tradizionali come PNG o JPG, offre scalabilità senza perdita, file più leggeri e molto più controllo sullo stile. In questo articolo vediamo due modi comuni per importare e usare file SVG in React Native, con esempi di codice e consigli pratici sulle prestazioni.

Perché usare SVG in React Native

SVG (Scalable Vector Graphics) porta diversi vantaggi chiave allo sviluppo di applicazioni mobile:

Scalabilità perfetta: la grafica rimane nitida indipendentemente da dimensione o risoluzione dello schermo
Dimensioni file più piccole: i file SVG sono in genere più leggeri di più set di asset PNG
Stile dinamico: colori, dimensioni e altri attributi possono essere modificati dinamicamente tramite props
Coerenza: rendering identico sia su iOS sia su Android

Dipendenza principale: react-native-svg

Il primo passo per usare immagini SVG in React Native è installare la libreria react-native-svg, che consente di renderizzare in modo nativo i file SVG nelle applicazioni React Native.

npm install react-native-svg
# or
yarn add react-native-svg

Nota: per React Native 0.60 e versioni successive, il linking di solito è automatico. Per le versioni precedenti, potrebbe essere necessario collegare manualmente i moduli nativi.

Metodo 1: usare react-native-svg-transformer

Questo è l'approccio più consigliato, perché ti permette di importare direttamente i file SVG come componenti, proprio come nei progetti React per il web.

Installazione e configurazione

Per prima cosa, installa il transformer:

npm install --save-dev react-native-svg-transformer
# or
yarn add --dev react-native-svg-transformer

Poi crea o modifica metro.config.js nella root del progetto:

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig();

  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-svg-transformer"),
    },
    resolver: {
      assetExts: assetExts.filter((ext) => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"],
    },
  };
})();

Esempio d'uso

Dopo la configurazione, puoi importare direttamente i file SVG:

import React from "react";
import { View } from "react-native";
import Logo from "./assets/logo.svg";

const MyComponent = () => (
  <View>
    <Logo width={100} height={100} fill="#3B82F6" />
  </View>
);

export default MyComponent;

Questo metodo ti consente di trattare i file SVG come normali componenti React Native, quindi è facile importarli e riutilizzarli in tutta l'applicazione.

Vantaggi:

Type-safe con un'ottima developer experience
Supporta il controllo dinamico dello stile tramite props
Prestazioni eccellenti grazie alla trasformazione in fase di compilazione

Casi d'uso: librerie di icone statiche, asset fissi nei design system

Metodo 2: usare SvgXml per il caricamento dinamico

Il componente SvgXml di react-native-svg ti consente di renderizzare SVG da stringhe XML, offrendo maggiore flessibilità per gli scenari dinamici.

Utilizzo di base

import React from "react";
import { SvgXml } from "react-native-svg";

const svgMarkup = `
  <svg width="100" height="100" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" fill="#10B981" />
  </svg>
`;

const DynamicIcon = () => <SvgXml xml={svgMarkup} width="100%" height="100%" />;

export default DynamicIcon;

Caricamento dinamico da file

SvgXml è particolarmente utile quando devi caricare SVG dal file system o dalla rete:

import React, { useState, useEffect } from "react";
import { SvgXml } from "react-native-svg";
import RNFS from "react-native-fs";

const LoadableSvg = ({ filePath }) => {
  const [xml, setXml] = useState("");

  useEffect(() => {
    async function loadSvg() {
      try {
        const svgContent = await RNFS.readFile(filePath);
        setXml(svgContent);
      } catch (error) {
        console.error("Error loading SVG file", error);
      }
    }
    loadSvg();
  }, [filePath]);

  return xml ? <SvgXml xml={xml} width="100%" height="100%" /> : null;
};

Vantaggi:

Supporta il caricamento dinamico a runtime
Può recuperare SVG da API o server remoti
Gestione flessibile dei contenuti generati dagli utenti

Aspetti da considerare: Può avere problemi di prestazioni quando renderizza ripetutamente SVG complessi o dinamici, perché analizza l'XML a runtime.

Archiviazione e organizzazione dei file SVG

Nei progetti React Native, in genere si archiviano i file SVG in una cartella assets all'interno della struttura del progetto, per poi importarli come le altre risorse.

Struttura di directory consigliata:

src/
  assets/
    icons/
      arrow-left.svg
      arrow-right.svg
    logos/
      brand-primary.svg
      brand-secondary.svg
  components/
    icon.tsx

Anteprima e validazione in SVG Viewer

Prima di integrare gli SVG nel tuo progetto React Native, è consigliabile visualizzarli e validarli in SVG Viewer:

Controlla il viewBox: assicurati che il viewBox sia impostato correttamente per evitare problemi di ritaglio o scaling
Pulisci il codice ridondante: rimuovi metadati e attributi dell'editor aggiunti dagli strumenti di design
Verifica i path: conferma che i dati dei path siano completi e ottimizzati
Testa lo scaling: fai anteprime a dimensioni diverse per assicurarti che il risultato visivo sia corretto

Usare un SVG Viewer ti aiuta a individuare i problemi prima, già durante lo sviluppo, e ti fa risparmiare tempo nel debug sui dispositivi mobili.

Ottimizzare gli SVG per prestazioni migliori

Quando usi SVG in React Native, l'ottimizzazione dei file è particolarmente importante:

Semplifica i path: usa strumenti come SVG Optimizer o SVGO per ridurre i punti dei path
Rimuovi gli elementi inutilizzati: elimina layer nascosti e gruppi vuoti
Unisci gli stili duplicati: estrai gli attributi ripetuti in stili condivisi
Controlla la precisione: mantieni le coordinate dei path a 2-3 cifre decimali

Gli SVG ottimizzati non solo si caricano più velocemente, ma vengono anche renderizzati meglio, soprattutto in scenari ad alta frequenza come lo scorrimento di liste.

Consigli pratici

In base all'esperienza su progetti reali, questi suggerimenti si sono dimostrati utili:

Convenzione di naming unificata: stabilisci nomi chiari per i file SVG, come icon-home.svg, logo-brand.svg
Incapsula i componenti comuni: crea un componente Icon per gestire centralmente tutte le importazioni e gli usi delle icone
Definizioni di tipo: aggiungi definizioni TypeScript ai componenti SVG per una migliore esperienza di sviluppo
Strategia di lazy loading: per grandi set di icone, considera il caricamento on-demand invece di includere tutto nel bundle

Riepilogo

Esistono più modi per usare SVG in React Native, e scegliere quello giusto dipende dallo scenario specifico:

Librerie di icone statiche: usa react-native-svg-transformer per la migliore esperienza di sviluppo
Contenuti dinamici: usa SvgXml per caricamento ed elaborazione a runtime
Scenari sensibili alle prestazioni: ottimizza in anticipo i file SVG e controllane la complessità

Indipendentemente dal metodo scelto, conviene validare in anticipo la qualità dei file in un SVG Viewer per ottenere un risultato visivo pulito anche sui dispositivi mobili. Con il workflow giusto e gli strumenti adatti, SVG diventa una risorsa grafica molto affidabile nelle applicazioni React Native.

Prossimi passaggi

Usa SVG Viewer per verificare viewBox, allineamento e scaling prima dell'importazione.
Esegui SVG Optimizer per ridurre la complessità degli SVG e ottenere un rendering mobile più fluido.
Converti gli asset con SVG to React Native quando vuoi codice componente pronto da copiare.

Come importare SVG in React Native: react-native-svg + SvgXml