Cómo importar SVG en React Native: react-native-svg + SvgXml

SVG (Scalable Vector Graphics) se ha convertido en un formato clave en proyectos con React Native. Frente a formatos bitmap como PNG o JPG, ofrece escalado sin pérdida, archivos más ligeros y un control del estilo mucho más flexible. En este artículo repasamos dos formas habituales de importar y usar SVG en React Native, con ejemplos de código y recomendaciones de rendimiento.

Por qué usar SVG en React Native

SVG (Scalable Vector Graphics) aporta varias ventajas clave al desarrollo de aplicaciones móviles:

Escalado perfecto: los gráficos permanecen nítidos sin importar el tamaño o la resolución de la pantalla.
Menor tamaño de archivo: los archivos SVG suelen ser más ligeros que múltiples conjuntos de recursos PNG.
Estilos dinámicos: los colores, tamaños y otros atributos pueden modificarse dinámicamente mediante props.
Consistencia: se renderiza de forma idéntica en iOS y Android.

Dependencia principal: react-native-svg

El primer paso para usar imágenes SVG en React Native es instalar la librería react-native-svg, que nos permite renderizar archivos SVG de forma nativa en aplicaciones React Native.

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

Nota: para React Native 0.60 y versiones posteriores, el linking suele ser automático. Para versiones anteriores, puede que necesites enlazar manualmente los módulos nativos.

Método 1: usar react-native-svg-transformer

Este es el enfoque más recomendable, ya que te permite importar archivos SVG directamente como componentes, igual que en proyectos React para web.

Instalación y configuración

Primero, instala el transformer:

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

Después, crea o modifica metro.config.js en la raíz del proyecto:

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"],
    },
  };
})();

Ejemplo de uso

Después de la configuración, puedes importar archivos SVG directamente:

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;

Este método te permite tratar los archivos SVG como componentes normales de React Native, así que resulta muy fácil importarlos y reutilizarlos en toda la app.

Ventajas:

Tipado seguro y excelente experiencia de desarrollo
Soporte para control dinámico de estilos mediante props
Excelente rendimiento gracias a la transformación en tiempo de compilación

Casos de uso: bibliotecas de iconos estáticos, recursos fijos en sistemas de diseño

Método 2: usar SvgXml para carga dinámica

El componente SvgXml de react-native-svg te permite renderizar SVG a partir de cadenas XML, lo que aporta más flexibilidad para escenarios dinámicos.

Uso básico

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;

Carga dinámica desde archivos

SvgXml es especialmente útil cuando necesitas cargar SVG desde el sistema de archivos o desde la red:

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;
};

Ventajas:

Soporta carga dinámica en tiempo de ejecución
Puede obtener SVG desde APIs o servidores remotos
Manejo flexible de contenido generado por usuarios

Aspectos a tener en cuenta: Puede haber problemas de rendimiento al renderizar repetidamente SVG complejos o dinámicos, ya que analiza el XML en tiempo de ejecución.

Almacenamiento y organización de archivos SVG

En proyectos React Native, normalmente almacenas los archivos SVG en una carpeta de recursos dentro de la estructura del proyecto y luego los importas como cualquier otro recurso.

Estructura de directorios recomendada:

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

Previsualiza y valida en SVG Viewer

Antes de integrar SVG en tu proyecto React Native, se recomienda previsualizarlos y validarlos en SVG Viewer:

Comprobar viewBox: asegúrate de que viewBox esté configurado correctamente para evitar problemas de recorte o escala.
Limpiar código redundante: elimina metadatos y atributos del editor añadidos por herramientas de diseño.
Verificar trazados: confirma que los datos del trazado estén completos y optimizados.
Probar el escalado: previsualiza a distintos tamaños para asegurarte de que el resultado visual sea el esperado.

Usar un SVG Viewer te ayuda a detectar problemas antes, durante el desarrollo, y te ahorra tiempo de depuración en dispositivos móviles.

Optimizar SVG para un mejor rendimiento

Cuando usas SVG en React Native, la optimización de archivos es especialmente importante:

Simplifica trazados: usa herramientas como SVG Optimizer o SVGO para reducir puntos en los paths.
Elimina elementos no usados: borra capas ocultas y grupos vacíos.
Fusiona estilos duplicados: extrae atributos repetidos a estilos compartidos.
Controla la precisión: mantén las coordenadas de los paths con 2-3 decimales.

Los SVG optimizados no solo cargan más rápido, sino que también se renderizan mejor, especialmente en escenarios frecuentes como el scroll de listas.

Recomendaciones prácticas

Según la experiencia en proyectos reales, estos consejos suelen dar buen resultado:

Convención de nombres unificada: establece nombres claros para los archivos SVG, como icon-home.svg, logo-brand.svg.
Encapsula componentes comunes: crea un componente Icon para gestionar de forma centralizada todas las importaciones y usos de iconos.
Definiciones de tipos: añade definiciones TypeScript a los componentes SVG para una mejor experiencia de desarrollo.
Estrategia de carga diferida: para conjuntos de iconos grandes, considera la carga bajo demanda en lugar de empaquetarlo todo.

Resumen

Hay varias formas de usar SVG en React Native, y elegir el método adecuado depende de tu caso concreto:

Bibliotecas de iconos estáticos: usa react-native-svg-transformer para la mejor experiencia de desarrollo.
Contenido dinámico: usa SvgXml para carga y procesamiento en tiempo de ejecución.
Escenarios críticos de rendimiento: optimiza los archivos SVG con antelación y controla su complejidad.

Elijas el método que elijas, conviene validar antes la calidad del archivo en un SVG Viewer para asegurarte de que el resultado visual en móvil sea el esperado. Con un buen flujo de trabajo y las herramientas adecuadas, SVG se vuelve un recurso muy sólido dentro de aplicaciones React Native.

Próximos pasos

Usa SVG Viewer para verificar viewBox, alineación y escalado antes de importar.
Ejecuta SVG Optimizer para reducir la complejidad del SVG y conseguir un renderizado móvil más fluido.
Convierte recursos con SVG to React Native cuando quieras código de componente listo para copiar.

Cómo importar SVG en React Native: react-native-svg + SvgXml