Testo SVG su tracciato: ricrea scritte per distintivi

Per mettere testo SVG su un tracciato, definisci un tracciato con un ID, collegalo tramite un riferimento in un <textPath> dentro <text> e scrivi le parole fra i tag. Per scritte centrate, combina startOffset="50%" con text-anchor="middle". Mantieni l'emblema in un gruppo separato per cambiare le parole senza ricostruire la grafica.

Questa separazione è utile quando ripristini un distintivo di un'associazione, un simbolo di negozio o un logo di un evento. Potrebbero servirti tracciati vettoriali per l'emblema centrale e contemporaneamente la possibilità di correggere una data o cambiare un nome. Ricalcare l'intero distintivo produce forme di lettere, non una stringa di testo modificabile. Ricostruisci la tipografia come testo quando le parole devono rimanere modificabili.

Per scritte orizzontali accanto a un emblema, adatta un'etichetta SVG dritta con textLength e confronta i cambiamenti di spaziatura prima di modificare le proporzioni dei glifi.

Inizia con tre parti separate

Un distintivo richiede un emblema, un tracciato guida e il testo che segue quel tracciato. La guida controlla la posizione delle scritte; non deve necessariamente essere visibile nel disegno finale. Il riferimento MDN su textPath documenta il collegamento href fra testo e tracciato.

Per l'esempio seguente, abbiamo disegnato un semplice pino e una guida semicircolare in codice SVG. Entrambi sono grafica dimostrativa originale, non output di conversione PerfectVector. Il distintivo riporta PINE TRAIL CLUB; le scritte rimangono una stringa di testo durante tutti i passaggi di costruzione.

Costruisci il distintivo modificabile

Salva questo codice come badge.svg e aprilo in un browser. Conserva il file come originale modificabile. Se non conosci il formato, la nostra guida ai file SVG spiega la differenza fra testo, tracciati e immagini incorporate.

<svg xmlns="http://www.w3.org/2000/svg"
     width="400" height="400" viewBox="0 0 400 400"
     role="img" aria-labelledby="badge-title">
  <title id="badge-title">Pine Trail Club badge</title>
  <defs>
    <path id="badge-arc"
          d="M70 215 A130 130 0 0 1 330 215" />
  </defs>
 
  <circle cx="200" cy="205" r="166"
          fill="#f8f3e7" stroke="#214b41" stroke-width="6" />
  <g id="emblem" fill="#214b41">
    <path d="M200 150 148 220 175 220 133 273
             267 273 225 220 252 220Z" />
    <path d="M188 269H212V303H188Z" />
  </g>
 
  <text fill="#214b41" font-family="Georgia, serif"
        font-size="29" text-anchor="middle">
    <textPath href="#badge-arc" startOffset="50%">PINE TRAIL CLUB</textPath>
  </text>
</svg>

Il tracciato inizia in (70, 215) e segue un semicerchio superiore fino a (330, 215). Il suo raggio è di 130 unità. Collocarlo in <defs> lo rende disponibile per il riferimento senza disegnare un tratto visibile. Il cerchio esterno chiaro è una forma disegnata separata.

Cambia PINE TRAIL CLUB nel tuo nome breve, salva e ricarica. L'albero dovrebbe rimanere fisso mentre le nuove parole seguono la stessa guida. Un nome più lungo richiede un altro controllo di adattamento; centrare non fa rientrare qualsiasi testo nell'arco.

Centra con scostamento e ancoraggio insieme

startOffset="50%" colloca la posizione di riferimento del testo a metà del tracciato. text-anchor="middle" allinea il centro del testo a quella posizione. Uno seleziona una posizione sulla curva; l'altro sceglie quale parte del testo vi si colloca. Il riferimento startOffset e il riferimento text-anchor descrivono quei controlli.

Prova a cambiare soltanto text-anchor in start. Con questo testo da sinistra a destra, le parole iniziano ora a metà e continuano verso l'estremità destra. Nella nostra prova nel browser, questo ha spostato le scritte sul lato destro e lasciato parte della frase oltre l'arco utilizzabile. Ripristina middle prima di regolare la dimensione del carattere.

Per un distintivo simmetrico, ispeziona visivamente il risultato dopo il centraggio matematico. Le lettere hanno forme e spazi laterali diversi; un avanzamento del testo centrato può comunque richiedere una piccola correzione ottica. Mantieni deliberata tale correzione invece di cambiare diverse coordinate non collegate finché il risultato sembra vicino a quello desiderato.

Controlla la direzione del tracciato prima di spostare il testo

Inverti questo esatto arco superiore sostituendo il suo valore d con:

d="M330 215 A130 130 0 0 0 70 215"

Inizio e fine si scambiano, e cambia il flag di percorrenza dell'arco. Per una guida visiva a entrambi i flag degli archi, consulta le quattro combinazioni dei flag degli archi SVG. La curva geometrica rimane nella stessa posizione, ma il testo la segue nella direzione opposta. Nella nostra prova nel browser, quell'inversione ha cambiato l'orientamento delle scritte. Ripristina il tracciato originale per scritte orientate correttamente lungo la parte superiore di questo distintivo.

Invertire un tracciato è diverso dall'invertire l'ordine delle lettere o dall'impostare la direzione di scrittura di una lingua. Mantieni le parole intatte. La specifica della disposizione del testo SVG spiega come vengono posizionati i glifi lungo un tracciato. Per una riga inferiore, crea e prova una guida inferiore separata invece di spostare il testo superiore finché attraversa l'emblema.

Scegli il carattere prima della spaziatura finale

L'esempio richiede Georgia, poi un carattere serif generico di ripiego. Quella richiesta non incorpora un carattere nell'SVG. Il renderer sceglie un carattere disponibile dall'elenco delle famiglie, come descritto nel riferimento MDN su font-family.

Nella nostra dimostrazione Chromium, passare le stesse parole da Georgia, serif a Arial, sans-serif ha cambiato l'avanzamento misurato del testo. Arco ed emblema erano invariati. Il controllo importante è l'estensione occupata e l'aspetto delle lettere, non una larghezza particolare che un altro computer potrebbe renderizzare diversamente.

Per un distintivo reale, definisci carattere e peso previsti prima di regolare dimensioni o spaziatura delle lettere. Riapri poi l'SVG nell'ambiente dove sarà usato. Se il carattere cambia lì, usa la guida ai problemi dei caratteri SVG per isolare la sostituzione o il comportamento dell'importazione.

Se le parole escono dall'arco, prova una frase più breve, un carattere più piccolo o una guida più ampia. Controlla l'intero distintivo dopo ogni modifica. Aumentare il raggio della guida può avvicinare le scritte al bordo esterno; ridurre le dimensioni del testo può rendere più difficile leggere un piccolo distintivo stampato. Evita di allungare le lettere soltanto per riempire un'estensione fissa, a meno che tale deformazione faccia parte del disegno.

Recupera soltanto la grafica che richiede ricalco

Se l'emblema esiste soltanto dentro un PNG o JPG, separa il recupero dalla tipografia. Usa una copia del sorgente che isoli l'emblema il più nettamente possibile. Conserva l'originale completo come riferimento visivo per ricostruire il distintivo.

Vettorializza l'emblema raster con PerfectVector, poi confronta sagoma, spazi interni e piccoli dettagli con il sorgente. Usa la grafica SVG accettata nel gruppo dell'emblema e ricostruisci separatamente le parole con il carattere previsto. PerfectVector crea tracciati vettoriali dall'immagine; questa procedura non dipende da OCR, identificazione dei caratteri o ricostruzione automatica di testo curvo modificabile.

Quando è disponibile l'emblema vettoriale originale, riusalo. Quando le scritte sono disegnate a mano e le forme irregolari contano, segui la procedura da scritte a mano a vettore invece di sostituirle con un carattere. La nostra guida alla vettorializzazione dei loghi tratta la decisione più ampia fra ricalco, riscrittura del testo e riparazione manuale.

Il semplice albero dell'esempio evita una complicazione di importazione: un emblema esistente potrebbe usare un sistema di coordinate diverso o includere trasformazioni. Ridimensiona e posiziona quel gruppo dentro il viewBox del distintivo, poi ricontrollalo con il testo visibile. Non alterare la guida delle scritte per compensare un emblema posizionato male.

Conserva un originale modificabile e crea una copia da consegnare

Il testo modificabile è l'originale utile quando nomi, date o parole possono cambiare. Per un distintivo fisso inviato a un altro editor o strumento di produzione, una copia in contorni elimina la necessità del destinatario di riprodurre le forme dei glifi del carattere. Le parole diventano tracciati vettoriali e perdono la normale modifica del testo.

Nelle opzioni di salvataggio SVG di Illustrator, Convert To Outlines converte il testo in tracciati. Adobe avverte inoltre che il testo esportato su un tracciato potrebbe essere renderizzato diversamente nei visualizzatori SVG. Sono motivi per ispezionare la copia esportata nella destinazione, non una garanzia che ogni strumento successivo riproduca l'intero distintivo. Consulta la documentazione Adobe sul salvataggio SVG.

Usa questa sequenza di consegna:

1. Salva l'originale con testo modificabile prima di convertire qualcosa in contorni.
2. Conferma parole, carattere, direzione del tracciato, centraggio e spaziatura.
3. Crea una copia separata da consegnare e convertine il testo in contorni nell'editor.
4. Riapri la copia e confronta tutte le lettere, le aperture, gli spazi e l'emblema.
5. Controlla il distintivo alle dimensioni previste di output nell'applicazione ricevente.

Convertire in contorni fissa l'aspetto del carattere attualmente presente. Se è attivo il carattere sostitutivo sbagliato quando effettui la conversione, fissi le lettere sbagliate. Per un'immagine web, conserva anche un nome accessibile utile; le forme delle lettere in contorni non contengono da sole la stringa di testo originale.

FAQ

Perché il mio testo SVG non è centrato sul tracciato? Usa startOffset="50%" insieme a text-anchor="middle" per l'esempio centrato. Uno scostamento del 50% con ancoraggio start fa iniziare la frase a metà della guida. Controlla anche la forma del tracciato e che tutte le parole rientrino.

Perché il testo è capovolto? Controlla la direzione della guida. Il testo segue il tracciato come è disegnato, quindi invertirlo può cambiare l'orientamento delle scritte. Prova la direzione della guida prima di spostare il testo o cambiarne l'ordine delle lettere.

Vettorializzare un distintivo crea testo curvo modificabile? La vettorializzazione ricostruisce le forme visibili delle lettere come grafica. Per parole modificabili, ricostruisci separatamente il testo con il carattere previsto e una guida textPath. Conserva un originale con testo modificabile prima di creare una copia in contorni da consegnare.

Fonti

1. MDN — textPath — Collegare testo modificabile a un tracciato referenziato.
2. MDN — startOffset — Posizionare testo lungo la guida.
3. MDN — text-anchor — Allineare il testo rispetto alla posizione di riferimento.
4. W3C — Testo SVG 2 — Posizionamento dei glifi e regole di disposizione del testo su tracciato.
5. MDN — font-family — Caratteri disponibili e selezione delle famiglie di ripiego.
6. Adobe — Salvare grafica in Illustrator — Conversione del testo SVG in contorni e limiti di esportazione del testo su tracciato.

Costruisci le scritte intorno all'emblema approvato e mantieni modificabili le parole finché il distintivo è definitivo. Se l'emblema è intrappolato in un'immagine raster, recuperane i tracciati vettoriali, ispeziona i piccoli dettagli e usa la grafica accettata nell'originale del distintivo.