Guia de importação de SVG no React Native: react-native-svg + SvgXml

SVG (Scalable Vector Graphics) se tornou um formato gráfico essencial no desenvolvimento com React Native. Em comparação com formatos bitmap tradicionais (PNG, JPG), SVG oferece escala sem perda, arquivos menores e controle de estilo mais flexível. Este artigo apresenta duas formas principais de importar e usar arquivos SVG em projetos React Native, com exemplos completos de código e recomendações de otimização.

Por que usar SVG no React Native

SVG traz várias vantagens importantes para aplicações mobile:

Escala perfeita: os gráficos permanecem nítidos em qualquer tamanho ou resolução de tela
Arquivos menores: SVG normalmente é mais leve do que múltiplos conjuntos de PNG
Estilo dinâmico: cores, tamanhos e outros atributos podem ser alterados via props
Consistência: renderização idêntica em iOS e Android

Dependência principal: react-native-svg

O primeiro passo para usar SVG no React Native é instalar a biblioteca react-native-svg, que permite renderizar SVGs nativamente na aplicação.

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

Observação: em React Native 0.60 ou superior, o linking normalmente é automático. Em versões anteriores, talvez seja necessário linkar módulos nativos manualmente.

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

Essa é a abordagem mais recomendada, porque permite importar arquivos SVG diretamente como componentes, de forma parecida com React web.

Instalação e configuração

Primeiro, instale o transformer:

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

Depois crie ou ajuste o metro.config.js na raiz do projeto:

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

Exemplo de uso

Depois da configuração, você pode importar arquivos SVG diretamente:

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;

Esse método permite tratar SVGs como componentes React Native comuns, facilitando a reutilização em toda a aplicação.

Vantagens:

Segurança de tipos e ótima experiência de desenvolvimento
Suporte a controle dinâmico de estilo via props
Excelente performance com transformação em tempo de build

Casos de uso: bibliotecas de ícones estáticos, arquivos fixos em sistemas de design

Método 2: usando SvgXml para carregamento dinâmico

O componente SvgXml de react-native-svg permite renderizar SVGs a partir de strings XML, oferecendo mais flexibilidade para cenários 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;

Carregar a partir de arquivos dinamicamente

SvgXml é especialmente útil quando você precisa carregar SVGs do sistema de arquivos ou da rede:

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

Vantagens:

Suporta carregamento dinâmico em tempo de execução
Pode buscar SVGs de APIs ou servidores remotos
Flexível para conteúdo gerado por usuários

Ponto de atenção: Pode ter impacto de performance quando você renderiza SVGs complexos ou dinâmicos repetidamente, porque o XML é interpretado em tempo de execução.

Armazenamento e organização dos arquivos SVG

Em projetos React Native, normalmente você guarda SVGs em uma pasta de arquivos dentro do projeto e os importa como qualquer outro recurso.

Estrutura recomendada:

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

Visualize e valide no SVG Viewer

Antes de integrar SVGs ao projeto React Native, é recomendável visualizá-los e validá-los no SVG Viewer:

Verifique o viewBox: confirme que o viewBox está correto para evitar cortes ou problemas de escala
Limpe código redundante: remova metadados e atributos de editor
Valide os paths: confirme que os dados dos paths estão completos e otimizados
Teste a escala: visualize em tamanhos diferentes para garantir o resultado visual esperado

Usar um SVG Viewer ajuda a encontrar problemas cedo, economizando tempo de depuração em dispositivos móveis.

Otimize SVGs para melhor performance

Ao usar SVGs em React Native, a otimização do arquivo é especialmente importante:

Simplifique paths: use SVG Optimizer ou SVGO para reduzir pontos dos paths
Remova elementos não usados: delete camadas ocultas e grupos vazios
Unifique estilos duplicados: extraia atributos repetidos para estilos compartilhados
Controle a precisão: mantenha coordenadas com 2–3 casas decimais

SVGs otimizados não só carregam mais rápido como também renderizam melhor, principalmente em cenários frequentes como listas com scroll.

Recomendações práticas

Com base em experiência real de projeto, aqui vão algumas dicas:

Padronize nomes: adote uma convenção clara para os arquivos SVG, como icon-home.svg, logo-brand.svg
Encapsule componentes comuns: crie um componente Icon para centralizar imports e uso
Definições de tipos: adicione tipos TypeScript aos componentes SVG para melhorar a experiência de desenvolvimento
Carregamento sob demanda: para conjuntos grandes, considere carregar os arquivos conforme necessário, em vez de embutir tudo no bundle

Resumo

Há várias formas de usar SVG no React Native, e a melhor escolha depende do cenário:

Bibliotecas estáticas de ícones: use react-native-svg-transformer para a melhor experiência de desenvolvimento
Conteúdo dinâmico: use SvgXml para carregamento e processamento em tempo de execução
Cenários críticos de performance: otimize os SVGs antecipadamente e controle a complexidade

Independentemente do método escolhido, vale validar a qualidade dos arquivos em um SVG Viewer antes de integrar, para garantir o melhor resultado visual em dispositivos móveis. Com o fluxo certo e ferramentas adequadas, SVG vira um recurso gráfico indispensável em aplicações React Native.

Próximos passos

Use o SVG Viewer para verificar viewBox, alinhamento e escala antes do import.
Rode SVG Optimizer para reduzir a complexidade do SVG e melhorar a renderização no mobile.
Converta os arquivos com SVG para React Native quando quiser código de componente pronto para copiar.

Guia de importação de SVG no React Native: react-native-svg + SvgXml