Convertitore da SVG a JSX
Incolla un SVG e ottieni un componente React, React Native, Vue o Svelte pulito, pronto da copiare nel tuo progetto.
- Nessun caricamento
- Funziona offline
- Gratis, senza registrazione
- I file non lasciano mai il browser
Trascina qui i file SVG
oppure incolla codice SVG nell’editor. Puoi aprire più file contemporaneamente.
Il tuo SVG resta su questo dispositivo. Non viene caricato nulla.
Come usare il Convertitore da SVG a JSX
- 1
Incolla il tuo SVG
Incolla il codice SVG o trascina un file. Ottimizzalo prima nella scheda Ottimizza per avere il componente più leggero.
- 2
Scegli un framework
Scegli React (JSX o TSX), React Native, Vue o Svelte. Imposta il nome del componente e opzioni come currentColor.
- 3
Copia o scarica
Copia il componente o scaricalo come file .jsx, .tsx, .vue o .svelte pronto all’uso.
Perché un SVG va convertito prima di usarlo in React
Il JSX somiglia all’HTML ma segue le regole di JavaScript. Incollare un SVG così com’è in un componente React spesso non funziona o genera avvisi: gli attributi con trattino come stroke-width e fill-rule devono essere in camelCase, class deve diventare className e le stringhe style inline devono diventare oggetti. Anche gli attributi con namespace come xlink:href e i metadati di Illustrator o Sketch vanno ripuliti.
viewsvg si occupa di tutto e racchiude il risultato in un componente con nome che accetta props, così puoi passare className, width o un aria-label dal componente padre.
Consigli per i componenti di icone SVG
- Passa prima l’SVG nell’ottimizzatore per rimuovere i metadati e alleggerire i tracciati.
- Attiva Usa currentColor così le icone seguono il colore del testo e funzionano con temi chiari e scuri.
- Attiva Rimuovi width/height e dimensiona le icone con il CSS, così lo stesso componente va bene a qualsiasi dimensione.
- Mantieni il
viewBox. Senza, l’icona non può adattarsi.
Tutto ciò che serve per lavorare con gli SVG
Il Convertitore da SVG a JSX fa parte di un unico spazio di lavoro per visualizzare, modificare, ottimizzare e convertire file SVG, senza registrazione, senza pubblicità e senza caricamenti.
Anteprima istantanea
Zoom fino al 6400%, spostamento, adattamento allo schermo e verifica su sfondo trasparente, bianco, nero o di qualsiasi colore.
Editor di codice in tempo reale
Evidenziazione della sintassi, indicatori di errore per riga, formattazione e minificazione, ricerca e cronologia completa degli annullamenti.
Contorno e griglia di pixel
Vedi ogni tracciato in modalità contorno e controlla l’allineamento dei pixel con la griglia quando ingrandisci.
Ispeziona
Dimensione del file e con gzip, viewBox, albero degli elementi con evidenziazione e sostituzione dei colori con un clic.
Ottimizza con SVGO
Riduci i file con anteprime prima/dopo e precisione regolabile. Ottimizza tutti i file aperti in una volta.
PNG, JPG, WebP e ICO
Esporta a qualsiasi dimensione fino a 16384 px, con trasparenza, o copia il PNG direttamente negli appunti.
React, Vue e Svelte
Componenti JSX/TSX, React Native, Vue e Svelte puliti, con supporto per currentColor e props.
Più file insieme
Apri molti SVG come schede, poi ottimizzali in blocco o scaricali in uno ZIP di SVG o PNG.
Privato e offline
Nessun caricamento, nessun account. Il tuo lavoro resta salvato nel browser e l’app funziona offline dopo la prima visita.
Domande frequenti
Cosa cambia convertendo un SVG in JSX?
Gli attributi passano in camelCase (stroke-width → strokeWidth), class diventa className, xlink:href diventa xlinkHref e le stringhe style inline diventano oggetti. viewsvg fa tutto questo per te.
Come faccio a far ereditare il colore del testo a un’icona SVG in React?
Attiva «Usa currentColor». Ogni fill e stroke viene sostituito con currentColor, così l’icona segue il colore CSS del suo elemento padre.
Supporta React Native?
Sì. Scegli React Native e ottieni un componente che usa react-native-svg (Svg, Path, G e così via), con la relativa riga di import.
I miei file SVG vengono caricati da qualche parte?
No. viewsvg funziona interamente nel tuo browser. I file vengono letti, visualizzati, ottimizzati e convertiti sul tuo dispositivo e niente viene inviato a un server. Dopo la prima visita funziona anche offline.
viewsvg è gratuito?
Sì. Tutte le funzioni sono gratuite, senza registrazione, senza filigrane e senza limiti sui file.