Testo SVG foreignObject: ripristina le etichette

Se le forme di un SVG sopravvivono all'esportazione ma le etichette scompaiono, cerca <foreignObject> nell'etichetta mancante. Può contenere HTML che il browser dispone correttamente, ma che il renderer di destinazione non supporta. Sostituisci l'etichetta interessata con <text> e <tspan> nativi SVG oppure scegli una procedura di esportazione che ne conservi l'aspetto.

Apri innanzitutto il file esportato esatto in un browser. Se l'etichetta manca anche lì, controlla namespace, limiti e stili prima di attribuire il problema all'importatore. Conserva la grafica originale: ricalcare tutta l'immagine non serve quando è fallito soltanto il contenitore del testo.

Perché l'immagine rimane ma la sua etichetta scompare

Un SVG può combinare forme comuni con contenuto di un altro namespace XML. Una montagna disegnata con <path> e un sole disegnato con <circle> sono SVG nativo. Un paragrafo dentro <foreignObject> può essere HTML, con regole proprie di impaginazione e ritorno a capo. Il riferimento MDN su foreignObject descrive questa distinzione.

L'estensione .svg non garantisce quindi che tutte le parti usino le stesse funzionalità di rendering. Una destinazione può disegnare la montagna e il sole omettendo il paragrafo HTML. Cambiare il colore del testo o aumentare la risoluzione di esportazione non aggiunge il supporto HTML a quel renderer.

Una piccola prova: cambia soltanto l'etichetta

Abbiamo creato una scheda SVG di 480 × 240 con un tracciato, un cerchio e le parole «Mantieni separate grafica ed etichette». Il primo file usa un'etichetta HTML. Il secondo mantiene le stesse forme e sostituisce soltanto l'etichetta con testo nativo e tre righe esplicite.

Nella nostra anteprima nel browser apparivano entrambe le etichette. Il rendering degli stessi file in PNG con sharp 0.34.4, usando librsvg 2.61.1 incluso nella distribuzione, ha prodotto il risultato seguente: l'etichetta HTML è scomparsa, mentre quella nativa è rimasta. L'output con etichetta HTML era inoltre identico pixel per pixel a un file di controllo privo di etichetta. È una prova di questi file e di questa versione del renderer, non un giudizio sulla compatibilità di tutti gli editor.

Il file originale è abbastanza piccolo da poterlo riprodurre. Salvalo come html-label.svg e aprilo in un browser:

<svg xmlns="http://www.w3.org/2000/svg"
  width="480" height="240" viewBox="0 0 480 240">
  <rect width="480" height="240" rx="20" fill="#f5f1e7"/>
  <path d="M40 135Q90 15 140 135Z" fill="#087f75"/>
  <circle cx="90" cy="95" r="18" fill="#f4bc45"/>
  <foreignObject x="180" y="70" width="230" height="110">
    <div xmlns="http://www.w3.org/1999/xhtml"
      style="font: 28px/1.25 Arial, sans-serif; color: #172b34;">
      Keep artwork and labels separate
    </div>
  </foreignObject>
</svg>

Per il secondo file, sostituisci l'intero elemento foreignObject con questa etichetta e salvalo come native-label.svg:

<text x="180" y="96" font-family="Arial, sans-serif"
  font-size="28" fill="#172b34">
  <tspan x="180" dy="0">Keep artwork</tspan>
  <tspan x="180" dy="35">and labels</tspan>
  <tspan x="180" dy="35">separate</tspan>
</text>

Il valore x fa iniziare ogni riga nella stessa posizione orizzontale. I valori dy spostano verso il basso le righe successive. Questo rinuncia deliberatamente al ritorno a capo automatico HTML: chi scrive sceglie le interruzioni di riga e verifica che il testo rientri nello spazio. MDN documenta il posizionamento di tspan, e librsvg elenca gli elementi SVG supportati, tra cui text e tspan.

Apri entrambi i file attraverso la procedura effettiva di consegna, per esempio il convertitore di immagini o il generatore di PDF. Confronta il risultato salvato, oltre all'anteprima del sorgente. Usare le stesse dimensioni dell'esempio non garantisce gli stessi caratteri su un'altra macchina.

Se l'etichetta manca anche nel browser

Controlla il file .svg serializzato, oltre alla pagina che lo ha creato. Un SVG incorporato in HTML e un documento SVG autonomo vengono analizzati in contesti diversi.

L'esempio colloca esplicitamente il div in http://www.w3.org/1999/xhtml. MDN osserva che questa dichiarazione di namespace è necessaria per il contenuto HTML in un documento SVG autonomo, anche se un esempio HTML incorporato può ometterla. Se crei elementi in JavaScript, usa il namespace appropriato per il figlio HTML; un div creato nel namespace SVG non è un contenitore di paragrafi HTML.

Ispeziona poi queste parti dell'etichetta:

• Assegna a foreignObject valori width e height espliciti e positivi per l'area prevista dell'etichetta.
• Mantieni le coordinate x e y all'interno del disegno visibile, lasciando spazio per tutte le righe.
• Controlla display, visibility, opacità e colore del testo sul contenitore e sui suoi figli.
• Conferma che il file esportato includa gli stili necessari, senza dipendere dal foglio di stile della pagina web circostante.

Nell'esempio, tutti gli stili dell'etichetta sono incorporati e il riquadro è largo 230 unità e alto 110. Questo elimina il CSS esterno come variabile. Non rende però foreignObject portabile verso un renderer che non dispone di tale funzionalità.

Per le esportazioni draw.io, converti le etichette nel sorgente

Se hai ancora il diagramma modificabile, correggi lì l'esportazione delle etichette prima di modificare a mano l'XML. La documentazione attuale sull'esportazione draw.io offre Convert Labels to SVG per le etichette formattate supportate: seleziona le forme o i connettori, apri la sezione Advanced della scheda Text e attiva la casella.

Questa opzione ha dei limiti. La documentazione esclude dalla conversione le etichette che contengono strutture come tabelle, elenchi, link o colori di sfondo. Se l'opzione non è disponibile, disattivare Formatted Text e Word Wrap è un'altra strada documentata; potrebbe essere necessario inserire interruzioni di riga manuali e controllare nuovamente la disposizione.

Esporta una nuova copia e riaprila nell'applicazione ricevente. Nascondere l'avviso «Text is not SVG» non converte l'etichetta. Incorporare un carattere risolve una dipendenza dal carattere, non la mancanza di supporto all'impaginazione HTML.

Per un diagramma illustrato, mantieni la grafica importata separata dalle etichette. La guida alle forme SVG personalizzate di draw.io tratta il lato grafico di questa procedura.

Scegli il formato del testo per chi riceverà il file

Il testo nativo è una correzione utile quando il destinatario deve modificare le parole, ma richiede comunque caratteri utilizzabili. Se l'etichetta appare con il carattere sbagliato, segui i controlli sui caratteri SVG invece di trattarla come lo stesso problema del contenitore mancante.

La conversione in tracciati funziona soltanto quando lo strumento sorgente può vedere e convertire le scritte. Aprire un'esportazione già incompleta e convertire gli oggetti rimanenti non può ripristinare parole assenti da quel documento importato. Un PNG conserva i pixel, quindi non è adatto quando il destinatario ha bisogno di parole modificabili o tracciati vettoriali da taglio.

Dove si inserisce PerfectVector in una scheda illustrata

Se l'illustrazione della scheda esiste soltanto come PNG o JPG, la procedura di PerfectVector da clipart a SVG può preparare un candidato vettoriale per quella grafica. Mantieni le parole come elemento di testo separato nel tuo editor di progettazione. Controlla i bordi e gli spazi interni dell'illustrazione, aggiungi l'etichetta e prova il file assemblato nel renderer di destinazione.

La guida alla vettorializzazione delle immagini spiega come i pixel diventano tracciati. PerfectVector non ripara le etichette HTML in un SVG. Quando l'illustrazione possiede già buoni tracciati, conservali e cambia soltanto l'etichetta che non funziona. Uno screenshot dell'etichetta mancante non contiene scritte da recuperare, e ricalcare scritte visibili creerebbe forme anziché parole modificabili.

Prima di inviare l'SVG corretto

1. Riapri la copia esportata in un browser e nella destinazione prevista.
2. Conferma che ogni etichetta sia visibile, compresa la sua ultima riga.
3. Controlla che la grafica non si sia spostata o ridimensionata.
4. Verifica i caratteri oppure ispeziona le scritte convertite in tracciati alle dimensioni previste.
5. Conserva il sorgente modificabile insieme alla copia da consegnare.

FAQ

Perché il testo SVG appare in Chrome ma scompare nell'esportazione PNG? L'etichetta potrebbe essere HTML dentro foreignObject, mentre il renderer PNG supporta soltanto un diverso sottoinsieme di SVG. Controlla il markup dell'etichetta mancante e renderizza una versione con testo nativo attraverso la stessa procedura di esportazione.

Aggiungere il namespace XHTML corregge ogni esportazione foreignObject? No. Corregge il namespace del contenuto HTML in un SVG autonomo. La destinazione deve comunque supportare quel contenuto, e l'etichetta deve comunque avere dimensioni adeguate e stili visibili.

tspan può mandare a capo il testo come un paragrafo HTML? L'esempio usa righe esplicite e scostamenti verticali. Non riproduce l'impaginazione dei paragrafi HTML. Scegli le interruzioni di riga per lo spazio disponibile e controllale con il carattere della destinazione.

Devo vettorializzare l'intera scheda per recuperarne le etichette? Conserva i tracciati esistenti e ricostruisci l'etichetta dal testo originale. Vettorializza soltanto la grafica che esiste come pixel. Le scritte ricalcate sono geometria, quindi non conservano parole modificabili.

Fonti

1. MDN — foreignObject — Definisce il contenuto di un altro namespace, gli attributi geometrici e il namespace XHTML negli SVG autonomi.
2. MDN — tspan — Spiega il posizionamento di parti del testo SVG nativo.
3. draw.io — Problemi del testo SVG esportato — Documenta la conversione delle etichette in SVG nativo, i limiti di formattazione e le impostazioni alternative di esportazione.
4. GNOME — Funzionalità SVG e CSS supportate da Librsvg — Elenca gli elementi e gli attributi supportati dal renderer.

Se l'illustrazione è ancora una bitmap, prepara la clipart in SVG, ispeziona le forme e aggiungi il testo separatamente. Verifica entrambi nel file esportato prima di consegnarlo.