Importare SVG in Penpot: forme modificabili nel progetto

Per importare un SVG in Penpot, apri un file di progetto e trascina il .svg sulla sua tela oppure scegli lo strumento immagine nella barra degli strumenti per selezionare il file. Il comando Import files della dashboard serve per i file di progetto Penpot. Se vuoi posizionare un'icona, parti dall'interno del progetto. Le indicazioni Penpot sull'inserimento dei livelli e la documentazione di importazione dei progetti descrivono queste modalità separate.

Una volta apparsa la grafica, verifica se puoi cambiare una regione di colore e modificare un contorno. Un'icona può apparire corretta pur restando scomoda da modificare. Se la sorgente è già vettoriale, riparala o riesportala quando necessario. Ricalca un PNG o JPG soltanto quando devi ricostruire forme dai pixel.

Controlla l'importazione prima di riutilizzarla

Conserva l'SVG originale, importa un'icona rappresentativa e lavora su un duplicato. Verifica aspetto, un riempimento, una curva ed eventuale testo modificabile. Esporta un SVG separato e confrontalo con l'originale prima di ripetere il flusso su tutto il kit.

Parti dalla tela, poi esamina i livelli

Apri il file Penpot a cui appartiene la grafica. Inserisci l'SVG salvato in un'area vuota per esaminarlo lontano dal resto del progetto. Se il trascinamento non riesce, usa il selettore di file dello strumento immagine per escludere il comportamento di trascinamento dalla diagnosi.

Seleziona la grafica importata ed espandi la sua voce nel pannello Layers. Un gruppo è un'organizzazione utile, non una prova che l'SVG sia diventato una bitmap. Puoi selezionare un figlio dal pannello o fare doppio clic dentro un gruppo; Penpot supporta anche la selezione profonda con Ctrl-clic o Command-clic. Questi controlli sono trattati nella guida alla selezione dei livelli.

Contenuti SVG diversi possono diventare tipi di oggetti diversi. Nell'importatore rilasciato di Penpot, forme comuni come tracciati, rettangoli ed ellissi hanno gestori di forme native; altri elementi possono essere mantenuti come SVG grezzo. L'importatore gestisce inoltre separatamente gli elementi immagine. Per questo il solo nome del file non può stabilire come si modificherà ogni parte. Vedi l'importatore di forme SVG.

Evita di separare tutti i gruppi o appiattire tutto all'inizio. Identifica prima la parte che vuoi cambiare. Conserva il gruppo se i figli forniscono già il controllo necessario.

Verifica un riempimento e una curva

Usa una piccola icona con parti visibilmente separate. Una pianta in un vaso è un esempio utile: il vaso dovrebbe accettare un colore diverso senza cambiare le foglie e una foglia dovrebbe essere modificabile senza deformare l'intera pianta.

Su un duplicato dell'icona importata:

1. Seleziona il livello del vaso e cambia il riempimento in un colore contrastante. Verifica che cambi soltanto la regione prevista.
2. Seleziona il tracciato di una foglia. Premi Invio per modificarne i nodi, sposta leggermente un punto, poi annulla. Penpot lo documenta nelle sue istruzioni di modifica dei nodi.
3. Confronta il duplicato con l'importazione intatta. Conferma che sagoma originale, piccoli spazi e spessore del tratto restino intatti dopo aver annullato il test.

Se vaso e foglie cambiano insieme, esamina selezione e struttura sorgente. Potresti aver selezionato il gruppo esterno oppure la sorgente potrebbe combinare più regioni in un tracciato. Un cambio di colore riuscito non dimostra che ogni contorno sia un tracciato nativo separato.

Il contenuto SVG grezzo è un'altra possibilità. Penpot ha un pannello di opzioni separato per esso, inclusi controlli di aspetto per gli elementi supportati. La presenza di controlli di riempimento o tratto non garantisce quindi la normale modifica dei nodi. Se la parte non può essere modificata come necessario, semplificala o ridisegnala nell'editor sorgente e importa una nuova copia. La distinzione è visibile nell'implementazione delle opzioni SVG grezze di Penpot.

Diagnostica il sintomo prima di cambiare il file

Usa l'SVG invariato come riferimento. Aprilo in un browser e confronta quel rendering con l'importazione Penpot. Se appare già sbagliato nel browser, torna all'esportazione sorgente prima di provare a riparare la copia Penpot.

Tratti mancanti e grafica invisibile

Controlla le impostazioni di riempimento e tratto del livello selezionato prima di eliminarlo. Penpot espone colore, opacità, spessore, stile e visibilità del tratto, oltre a controlli delle estremità per tracciati aperti. Un breve segno con tratto può apparire molto diverso con una diversa forma delle estremità, quindi confronta la forma invece di presumere che la linea sia assente. I controlli disponibili sono descritti in Colori e tratti.

Per un oggetto invisibile, esamina anche livelli nascosti e ritaglio. Se il browser renderizza correttamente la sorgente ma Penpot no, isola l'elemento che fallisce in una copia della sorgente. Riesporta il campione più semplice e confronta di nuovo. Ottieni così un file e un sintomo specifici da indagare invece di cambiare più impostazioni insieme.

Non rimuovere ogni style, maschera o definizione soltanto perché una vecchia soluzione alternativa lo suggerisce. Questi elementi possono contenere informazioni sull'aspetto. Se il problema è la costruzione del tratto nella sorgente, segui la diagnosi approfondita dei tratti SVG mancanti e conserva un originale modificabile prima di espandere i tratti in contorni.

Testo che appare corretto ma non si modifica

Per un'etichetta di pulsante, prova a cambiare una parola. Per un logo, decidi se basta preservare le forme delle lettere. Sono requisiti diversi.

Le lettere importate possono essere già contorni oppure restare contenuto SVG anziché un livello di testo nativo. Non presumere che ogni elemento di testo SVG importato diventi testo Penpot modificabile. Se il contenuto richiede cambiamenti regolari, ricrealo con lo strumento testo di Penpot, scegli il carattere previsto e confronta spaziatura e interruzioni di riga. La guida al testo di Penpot spiega come creare livelli di testo e modificarne il contenuto.

Quando le lettere cambiano forma o vanno a capo diversamente, usa la guida ai problemi dei caratteri SVG. Conserva una copia con testo modificabile anche se una versione da consegnare richiede lettere convertite in contorni.

Quando PerfectVector è utile nel flusso

PerfectVector è utile quando hai un'icona o illustrazione raster e servono contorni modificabili in Penpot. Converti il PNG o JPG in tracciati SVG, controlla sagoma e regioni di colore, poi importa il risultato ed esegui il test di un riempimento e una curva. Il ricalco deve comunque essere giudicato rispetto alla grafica che intendi usare.

Un'immagine raster inserita dentro un SVG non acquisisce contorni modificabili di foglie o vaso soltanto perché è cambiato il contenitore. L'importatore Penpot ha un gestore immagine separato; non trasforma quell'immagine negli oggetti tracciato nativi gestiti altrove nel codice dell'importatore.

Usa l'esportazione vettoriale originale quando ce l'hai. Per un semplice simbolo d'interfaccia, disegnarlo con le forme native di Penpot può darti una geometria definita più consapevolmente rispetto al ricalco. Mantieni fotografie e grafica ricca di texture come immagini quando i pixel fanno parte del progetto. La spiegazione della vettorializzazione delle immagini tratta cosa può ricostruire il ricalco e cosa cambia.

Esporta un campione prima di costruire il kit

Mantieni il progetto di lavoro in Penpot ed esporta un SVG separato per la consegna. Seleziona l'icona o la sua tavola, aggiungi una preimpostazione di esportazione con il pulsante più nella sezione Export del pannello Design e scegli SVG. Penpot lo documenta in Esportare livelli.

Apri il file esportato in un browser. Confronta colori, tratti, aspetto del testo, ritaglio e spazio vuoto con il riferimento. Se il file deve tornare in un editor di progetto, importa quell'esportazione in un'area separata e ripeti il test di modifica. Aspetto corretto e struttura utile alla modifica richiedono ciascuno un controllo.

Prima di aggiungere il campione a un kit più grande, conferma:

• Le regioni che richiedono colori separati possono essere selezionate indipendentemente.
• I contorni da rimodellare espongono controlli di modifica utilizzabili.
• Le etichette modificabili restano testo nel progetto di lavoro.
• L'icona esportata ha i limiti e i margini previsti.
• L'icona resta leggibile alla dimensione effettiva dell'interfaccia.

Poi applica gli stessi controlli a tutto il set. Il flusso da icone PNG a SVG per kit UI aggiunge griglie condivise, dimensionamento ottico e regole di denominazione una volta che le singole importazioni sono corrette.

FAQ

Perché la finestra Import files di Penpot rifiuta il mio SVG? Quella finestra importa file di progetto Penpot. Per posizionare grafica SVG, apri un file di progetto e usa lo strumento immagine oppure trascina l'SVG sulla tela.

Importare un SVG rende modificabile ogni parte? Le forme vettoriali comuni possono diventare oggetti Penpot nativi, ma altri contenuti possono restare SVG grezzo o immagini. Verifica la modifica specifica di riempimento, curva o testo necessaria prima di riutilizzare la grafica.

Devo separare il gruppo di un SVG importato? Soltanto se cambiare la struttura del gruppo aiuta il lavoro. Prova prima a selezionare un figlio nel pannello Layers. Mantenere un gruppo utile non impedisce di modificare i suoi figli selezionabili.

Dovrei vettorializzare un SVG che viene importato male? Parti dalla riparazione o riesportazione della grafica vettoriale esistente. La vettorializzazione è utile quando la grafica disponibile è raster e servono tracciati; non è un passaggio generale di riparazione di un SVG esistente.

Fonti

1. Penpot: Livelli — Inserimento di grafica, selezione di figli e modifica dei nodi dei tracciati.
2. Penpot: Esportare e importare file Penpot — Modalità di importazione dei progetti nativi, separata dall'inserimento di grafica nella tela.
3. Penpot: Importatore di forme SVG — Gestione separata di forme native, immagini e contenuto SVG grezzo in una versione rilasciata.
4. Penpot: Opzioni SVG grezze — I controlli di aspetto non dimostrano da soli la modificabilità dei tracciati nativi.
5. Penpot: Colori e tratti — Controlli di riempimento, tratto ed estremità usati nei controlli diagnostici.
6. Penpot: Testo e tipografia — Creazione di livelli di testo nativi e modifica del loro contenuto.
7. Penpot: Esportare livelli — Aggiunta di una preimpostazione di esportazione SVG per un livello o una tavola.

---

Se la sorgente è un PNG o JPG e servono forme modificabili, prepara un SVG con PerfectVector. Importalo in Penpot, cambia un riempimento e verifica una curva prima di inserire la grafica nel kit di progetto.