Da PSD a SVG senza perdere livelli: che cosa rimane

Non puoi convertire ogni livello Photoshop in un livello SVG equivalente. Un PSD può combinare livelli forma, testo modificabile, maschere, effetti, Smart Objects e normali pixel. SVG può rappresentare tracciati, testo, gruppi e immagini, ma quegli oggetti non corrispondono perfettamente al modello di documento di Photoshop. La procedura più sicura conserva i contenuti vettoriali tramite un'esportazione nativa, poi ricalca soltanto il disegno raster privo di una sorgente vettoriale riutilizzabile.

Un livello PSD non è un livello SVG

Il pannello Layers di Photoshop descrive come viene modificato un documento. SVG descrive che cosa disegna un renderer. Sono compiti diversi.

L'attuale procedura Image Assets di Adobe può generare risorse SVG da livelli o gruppi di livelli con nomi. La stessa documentazione afferma che una risorsa da gruppo di livelli viene appiattita, anche quando il gruppo contiene forme e testo modificabile. In altre parole, scegliere SVG come output non trasforma la gerarchia Photoshop in una gerarchia SVG equivalente.

Fai l'inventario del file prima di convertirlo

Duplica il PSD prima di cambiare qualcosa. Poi controlla i pannelli Layers, Paths, Properties e Smart Objects.

1. Nascondi i livelli di pixel. Se rimane un disegno utile, potresti già avere forme vettoriali da conservare.
2. Seleziona ogni livello di testo. Annota famiglia e peso del font prima di convertire il testo in contorni o spostarlo.
3. Apri gli Smart Objects. Un file Illustrator collegato o un'altra sorgente vettoriale sono meglio del ricalco dell'anteprima renderizzata.
4. Attiva e disattiva maschere ed effetti. Decidi se conta la costruzione modificabile o soltanto l'aspetto finale.
5. Controlla l'immagine composita salvata. Se il file si apre diversamente su un'altra macchina, salva di nuovo una copia verificata prima di usare una procedura appiattita.

Adobe documenta anche l'esportazione dei livelli selezionati come file separati. Esportazioni separate possono conservare confini utili tra le risorse, ma non creano comunque un unico SVG che si comporta come la pila di livelli del PSD originale.

Scegli la procedura secondo il tipo di oggetto

Procedura 1: conserva il contenuto vettoriale

Usa questa procedura per livelli forma, tracciati dello strumento Penna, testo modificabile semplice e Smart Objects la cui sorgente vettoriale originale esiste ancora.

Sposta o esporta una risorsa logica alla volta, poi aprila in Illustrator, Inkscape o un altro editor SVG. Controlla se il risultato contiene tracciati e gruppi anziché un'unica immagine rettangolare. Se il testo deve rimanere modificabile, apri l'SVG su un'altra macchina priva del tuo documento Photoshop e conferma che venga caricato il font previsto. Per loghi e file di produzione, conserva un originale con testo modificabile e crea una copia in contorni da consegnare.

Non appiattire una buona sorgente vettoriale soltanto per passarla a un ricalcatore. Il ricalco ridisegna l'aspetto renderizzato, quindi può aggiungere nodi, alterare curve e trasformare testo in contorni approssimati. La geometria nativa è il punto di partenza più pulito.

Procedura 2: appiattisci il disegno visibile, poi ricalcalo

Usa il ricalco quando il disegno utile esiste soltanto come pixel oppure quando l'aspetto visibile salvato nel PSD è la migliore sorgente rimasta. Loghi piatti, emblemi, icone, scritte e illustrazioni con confini di colore chiari sono di solito adatti. Foto, gradienti delicati, texture dei pennelli e ombre morbide di solito non lo sono.

Prima del ricalco:

1. Nascondi tutto ciò che non deve apparire nel vettore.
2. Inserisci il disegno sullo sfondo o sulla trasparenza necessari alla consegna.
3. Controlla piccole controforme, fori e scritte fini alle dimensioni previste dell'output.
4. Salva una copia di compatibilità o esporta un PNG di alta qualità quando il PSD non ha una vista composita affidabile.
5. Conserva il PSD originale. Il ricalco è una nuova risorsa da consegnare, non un sostituto del documento.

Un SVG può legittimamente contenere un'immagine raster incorporata secondo il modello SVG 2 dei contenuti incorporati. Un convertitore che cambia soltanto il formato può quindi inserire i pixel appiattiti del PSD in un SVG senza ricalcarli. Zoom e controllo del tipo di oggetto permettono di scoprire quel risultato falsamente vettoriale.

Come funziona con PerfectVector

PerfectVector apre un PSD o PSB supportato attraverso la sua immagine composita di compatibilità salvata. Il browser prepara localmente quell'immagine visibile e ti chiede di controllarla prima della vettorizzazione. Non carica il documento Photoshop originale né dichiara di ricostruire livelli, maschere, testo modificabile, effetti, tracciati, tavole o Smart Objects. La procedura da Photoshop a SVG ricostruisce i pixel preparati come tracciati SVG.

È quindi la procedura di ricalco, non quella di conservazione dei livelli. Usala quando l'immagine composita salvata ha l'aspetto corretto e la geometria di tracciati modificabile è più utile della costruzione originale Photoshop. Dopo la conversione, controlla sagoma, regioni di colore, forme del testo, spazio negativo e struttura dei nodi. Se il PSD contiene già sorgenti vettoriali pulite, spostale invece direttamente.

Controlla che cosa è rimasto nell'SVG

Riapri l'SVG scaricato in un editor vettoriale anziché fidarti della prima anteprima.

• Seleziona una regione di colore. Dovrebbe comportarsi come un tracciato o una forma, non come parte di un'unica immagine rettangolare.
• Apri il pannello Layers o Objects. Cerca una struttura di gruppi gestibile anziché aspettarti i nomi dei livelli PSD.
• Ingrandisci curve e controforme delle lettere. Cerca appiattimenti delle curve, chiusure accidentali e bordi rumorosi.
• Cambia un colore di riempimento. Un vero tracciato dovrebbe ricolorarsi senza alterare le regioni vicine.
• Cerca un elemento <image> nel sorgente quando un'area appare ancora pixelata.
• Importa l'SVG nella destinazione reale e controlla lì dimensioni, font, maschere ed effetti.

Se ogni pezzo visibile si comporta come un unico oggetto, usa la diagnosi della separazione dei gruppi SVG prima di applicare operazioni distruttive sui tracciati. Il file potrebbe essere un solo tracciato composto o un'immagine incorporata anziché un gruppo.

Quando il PSD dovrebbe rimanere un PSD

Conserva Photoshop come originale quando ti servono ancora testo modificabile, livelli di regolazione, maschere, Smart Objects, tavole, texture fotografiche o effetti. SVG è un buon formato di consegna per forme grafiche scalabili, ma non sostituisce un documento Photoshop.

Potresti ottenere due file: il PSD come sorgente modificabile e un SVG come risorsa di produzione. È un trasferimento sensato. I due file conservano tipi diversi di modificabilità.

FAQ

Un PSD può essere convertito in SVG con tutti i livelli intatti? Non in modo affidabile. Alcuni contenuti di forme e testo possono passare in SVG, ma maschere Photoshop, effetti, Smart Objects, livelli di regolazione, nomi dei livelli e livelli di pixel non hanno equivalenti SVG uno a uno. Conserva prima gli oggetti vettoriali nativi e considera il resto aspetto renderizzato.

Perché il risultato da PSD a SVG ha un solo livello? Il convertitore ha probabilmente usato un'immagine composita appiattita o incorporato un'immagine raster. Un oggetto SVG può anche essere un tracciato composto o un gruppo, quindi controlla il tipo di oggetto prima di presumere che il file sia ancora raster.

Salvare un file Photoshop come SVG vettorizza i pixel? No. SVG può contenere immagini raster. Un'esportazione di formato può inserire pixel in un contenitore SVG senza ricalcarli. Controlla se il disegno viene selezionato come tracciati e rimane modificabile a livello di oggetti.

Devo convertire il testo in contorni prima di esportare SVG da Photoshop? Converti una copia da consegnare quando l'aspetto deve restare fisso e non serve più modificare il testo. Conserva un originale con testo modificabile se parole o localizzazione potrebbero cambiare. La conversione in contorni non conserva la modifica del font; trasforma le lettere in tracciati.

PerfectVector può recuperare i livelli Photoshop da un PSD? No. PerfectVector usa l'immagine composita di compatibilità salvata nel file supportato e ricalca quell'immagine visibile in tracciati. Non ricostruisce la pila originale dei livelli Photoshop né le funzioni modificabili del documento.

Fonti

1. Adobe — Creare risorse immagine dai livelli — Documenta la generazione di risorse SVG e l'appiattimento delle risorse da gruppi di livelli.
2. Adobe — Esportare livelli come file — Documenta il comportamento attuale dell'esportazione per livello.
3. Adobe — Disegnare forme e tracciati in Photoshop — Definisce strumenti forma, penna e tracciati di Photoshop.
4. W3C — Contenuti incorporati SVG — Spiega perché un SVG può ancora contenere dati di immagini raster.
5. PerfectVector — Da Photoshop a SVG — Descrive la procedura supportata dell'immagine composita salvata e i suoi limiti nel recupero dei livelli.

Se l'immagine composita salvata è la sorgente che ti serve, controllala nel convertitore da Photoshop a SVG, vettorizzala, poi riapri l'SVG e conferma che le regioni importanti siano tracciati.