Base di conoscenza dei caratteri SVG | Aspose.Font

Introduzione al carattere SVG

Per spiegare cos’è il carattere SVG, prima apprendiamo il termine SVG in comune. Dal cosiddetto Aspose.svg Comprendiamo che la grafica vettoriale scalabile (SVG) è un linguaggio XML per la creazione di vettori bidimensionali e vettoriale mista/grafica raster. Il documento SVG è un file di testo che descrive le immagini come primitive geometriche: righe, curve, forme, testo, ecc. Gli oggetti vettoriali sono costruiti e archiviati come un insieme di comandi, numeri e formule, non in una griglia di pixel come in bitmaps.

Il carattere SVG è un tipo di carattere che viene utilizzato nelle immagini SVG e, come qualsiasi altro oggetto del formato, può essere ridimensionato senza perdere la qualità. Puoi incorporare i caratteri direttamente nell’immagine, rendendo facile creare grafica con tipografia personalizzata.

Un carattere SVG è un carattere definito usando XML, proprio come un’immagine SVG. È una raccolta di forme, linee e curve che definiscono i personaggi del carattere. Il carattere può anche essere disegnato e manipolato usando CSS Pertanto è possibile utilizzare le stesse tecniche per codificare il testo in un’immagine SVG come lo faresti per qualsiasi altro elemento SVG.

Vantaggi e svantaggi del carattere SVG

La tabella seguente mostra i pro e i contro dei caratteri SVG, in modo da poter decidere se usarlo nel tuo progetto o meno.

Pro	Contro
Scalabilità: I font SVG possono essere ridimensionati a qualsiasi dimensione senza perdere qualità, quindi sono perfetti per l’uso in qualsiasi design responsive.	Supporto browser: La maggior parte dei browser web moderni supporta i font SVG, ma alcuni browser meno recenti potrebbero non supportarli.
Dimensioni file ridotte: Rispetto ai font web, i font SVG hanno dimensioni file ridotte, il che è fondamentale per migliorare i tempi di caricamento.	Supporto editor limitato: Non tutti gli editor di testo e i software di progettazione supportano i font SVG.
Migliore accessibilità: I font SVG sono considerati più accessibili agli utenti con disabilità. Possono essere facilmente letti dagli screen reader e consentono di includere descrizioni testuali alternative.	Complessità: I font SVG sono difficili da usare e modificare perché richiedono maggiori conoscenze tecniche.
Tipografia avanzata: I font SVG includono funzionalità tipografiche avanzate come legature, crenatura, caratteri alternativi, ecc.	Ricercabilità: I font SVG possono influire sulla SEO di un sito web perché non sono ricercabili dai motori di ricerca.
Stile e animazione: È possibile personalizzare o animare facilmente i font SVG tramite CSS e JavaScript.	Opzioni font limitate: Il formato SVG offre meno opzioni font rispetto ai font True Type.
Migliore supporto per i simboli non latini: Grazie alla scalabilità, i font SVG possono essere utilizzati per disegnare font con un gran numero di caratteri o che richiedono rendering complessi come geroglifici, lettere arabe o hindi.

Svg o woff?

I caratteri SVG erano popolari nei primi giorni di SVG, ma ora i caratteri web li hanno sostituiti nella maggior parte dei casi in quanto sono più flessibili e ampiamente supportati da tutti i browser moderni. Ad ogni modo, puoi ancora trovare caratteri SVG nelle versioni precedenti di Internet Explorer, per esempio. Quindi confrontiamo questi caratteri.

Web Open Font Formato o WOFF è un formato per la fornitura di file di carattere su Internet, progettato per coprire le esigenze del mercato delle applicazioni Web. Il formato Woff è stato creato per fornire un modo più efficiente per fornire caratteri Web rispetto ad altri formati di file, come TrueType e OpenType. Il formato comprime i dati dei caratteri per ridurre la dimensione del file per scaricare e utilizzare le pagine Web più velocemente. Include anche metadati che forniscono informazioni sul carattere, come la famiglia dei caratteri, lo stile e le informazioni sul copyright.

SVG è un formato grafico vettoriale utilizzato per creare e visualizzare immagini sul Web. È un formato basato sul testo che può essere facilmente modificato e manipolato, quindi è una buona scelta quando si creano loghi, icone e altra grafica.

Quindi, se si confronta questi formati per il loro scopo, se si desidera creare grafica da utilizzare sul Web, è necessario utilizzare SVG. Se hai bisogno di un carattere da utilizzare su un sito Web, dovresti usare WOFF.

Entrambi i formati possono interagire con CSS ma i file WOFF sono incorporati nelle pagine Web utilizzando la regola della faccia di carattere in CSS. Ciò consente ai web designer di utilizzare caratteri personalizzati sui loro siti Web senza fare affidamento sugli utenti per installare il carattere sui propri dispositivi. Ciò offre una migliore flessibilità e un’esperienza visiva costante, indipendentemente da quali browser utilizza l’utente.

SVG o TTF?

Se si sceglie tra TTF o SVG, devi prima chiarire i requisiti del progetto perché di solito vengono utilizzati per diversi casi. Questi caratteri sono abbastanza simili in quanto entrambi ti forniscono un testo di alta qualità, scalabile e facilmente leggibile.

Il formato di carattere True Type è il formato di carattere più noto per il design Web e della stampa ed è supportato dalla maggior parte dei sistemi operativi e dei dispositivi. Anche il TTF è abbastanza facile da usare e implementare. Questo è un formato vettoriale ma utilizza lo strumento sviluppato delle istruzioni che consente ai caratteri di avere una qualità dei caratteri BitMap ed è considerato raster da alcune fonti. SVG è un formato di carattere vettoriale. Memorizza il carattere come un insieme di percorsi, in scala senza perdita a qualsiasi dimensione. Consente a tali caratteri di fornire un file di carattere più piccolo, come era già stato menzionato nel confronto SVG al WOFF. SVG è anche un’opzione migliore del tipo vero per servire le persone disabili, poiché danno una migliore leggibilità.

In breve, TTF è il formato più ampiamente supportato ed è il migliore per la maggior parte dei casi, ma SVG è un’ottima opzione se è necessario ridimensionare il testo, vuoi rendere il testo accessibile o necessitare di caratteristiche tipografiche avanzate.

Dove usare i caratteri SVG?

Scegli il formato del carattere SVG se ti concentri su:

• Design reattivi: Caratteri scalabili, come SVG, sono buoni per tali problemi.
• Accessibilità: Come menzionato sopra, i caratteri SVG possono fornire una migliore leggibilità.
• Tipografia avanzata: Caratteristiche come ligature, kerning e caratteri alternativi sono incluse nei caratteri SVG.
• Stile e animazione: Fonts SVG fornisce una maggiore flessibilità per il design e l’animazione.
• Script non latini: È possibile utilizzare i caratteri SVG per rappresentare caratteri che hanno un gran numero di caratteri complessi a rendering.
• Design di stampa: SVG è utile in alcuni progetti di progettazione di stampa in cui le dimensioni di un file sono cruciali, ma è necessario utilizzare immagini ad alta risoluzione e una tipografia complessa allo stesso tempo.
• Lavorare con la grafica SVG: Come caratteri SVG in comune fanno parte dell’immagine grafica SVG e sono rappresentati usando il linguaggio XML, è possibile manualmente o con l’aiuto dello speciale morbido, modificare glifi del carattere e visualizzare immediatamente i risultati (modifiche alla vista di testo) nell’intera immagine SVG.

È importante notare che i caratteri SVG potrebbero non essere la scelta migliore per tutti i progetti. È meglio aggiungere anche caratteri di un formato diverso come opzione di fallback.

I caratteri SVG sono liberi?

Esistono molte biblioteche di carattere open source con un’ampia varietà di caratteri SVG gratuiti in licenze open source come Google Fonts, Open Fatst Library, ecc. Tuttavia, non tutti i caratteri SVG sono gratuiti. Alcuni progettisti vendono licenze e le condizioni di licenza possono variare. Alcuni caratteri possono avere una versione gratuita con una serie limitata di funzionalità e una versione a pagamento con più opzioni. Controllare i termini della licenza e dell’utilizzo di un carattere prima di usarlo in un progetto. In questo modo sarai sicuro che sia gratuito da utilizzare o che hai le autorizzazioni necessarie.

Ci sono quattro opzioni per avere in mente le licenze di carattere:

1. Consente l’incorporamento e il carico temporaneo di caratteri su altri sistemi. Con tale licenza è possibile modificare i caratteri, inclusa la formattazione di nuovi testo, e salvare eventuali modifiche.
2. Consente l’incorporamento del carattere in modo temporaneo che consente di caricare il carattere su altri sistemi. Con tale licenza è possibile modificare e formattare un nuovo testo utilizzando il carattere incorporato e salvare eventuali modifiche.
3. Consente l’incorporamento del carattere in modo permanente che consente di installare e utilizzare il carattere da sistemi remoti o altri utenti.
4. Consente l’incorporamento del carattere in modo temporaneo ai fini della visualizzazione o della stampa del documento su altri sistemi.

File di carattere SVG

I caratteri SVG utilizza la sintassi XML e possono essere incorporati direttamente nei documenti SVG o citati come file esterni. La sua struttura è costituita dai componenti successivi:

• Dichiarazione XML all’inizio del file. Specifica la versione usata di XML e le informazioni di codifica.
• Elemento carattere. Contiene informazioni comuni sul carattere come il nome del carattere, la famiglia, lo stile, ecc.
• Elemento di glifo. Definisce i singoli personaggi del carattere. Ogni glifo ha un identificatore univoco, un numero Unicode e un insieme di percorsi o forme che compongono il carattere.
• Elemento da faccia a faccia. Viene utilizzato per definire i metadati del carattere ( metrica) come la sua ascesa, posizione di base, posizione di base e glifo di delimitazione.
• Elemento ghighpico mancante. Definisce un glifo predefinito. Questo glifo verrà utilizzato se quello necessario non si trova nel carattere.- Elementi opzionali come Font-Face-SRC, che definisce la fonte del file del carattere, e Font-Face-Uri, che fornisce un URI per il carattere.

Ecco un esempio di codice della struttura di base di un file di carattere SVG:

 
    <?xml version="1.0" encoding="UTF-8"?>
    <svg xmlns="http://www.w3.org/2000/svg">
      <font id="MyFont" horiz-adv-x="1000">
        <font-face font-family="MyFont" units-per-em="1000" ascent="800" descent="200" />
        <glyph glyph-name="Triangle" d="M0,0 L100,0 L50,100z" />
        <glyph unicode="B" glyph-name="B" d="M50,50 L50,150 L100,150 L100,115 L85,100 L50,100 M85,100 L100,85 L100,50z" />
      </font>
    </svg>

Spieghiamo l’esempio del codice.

Innanzitutto, vediamo la dichiarazione XML comune, che definisce il numero di versione XML e la codifica. La codifica UTF-8 è la codifica più comune per il World Wide Web dal 2008.

L’elemento principale (tag) in questo XML è l’elemento “SVG” che definisce un frammento di documento SVG. L’attributo xmlns di elemento" SVG “fa riferimento allo spazio dei nomi XML, definito nella specifica Scalable Vector Graphics (SVG) 1.0.

La descrizione del font stesso inizia dall’elemento <font>. Questo elemento include 2 attributi:

Un attributo id identifica in modo univoco il carattere e viene utilizzato quando è necessario per fare riferimento al carattere da un file SVG esterno. L’attributo Horiz-Adv-X determina l’avanzamento orizzontale predefinito dopo aver reso un glifo in orientamento orizzontale (vedere Metriche di gesso per ulteriori informazioni). Se questo attributo non viene specificato, il valore predefinito sarà 1000.

Elemento “Font-Face” In questo esempio definisce tali caratteristiche comuni del carattere come:

• FAMIGLIA DI FONT - Un gruppo di caratteri tipografici correlati, simili per progetta.
• Unità per em - numero di unità di coordinate sul quadrato EM, la dimensione della griglia di progettazione su cui vengono stabiliti glifi.
• Ascent, Descent - Lunghezza dal punto di origine sulla linea basale al punto più alto/più basso rispettivamente del glifo.

Ogni glifo che il nostro carattere di esempio contiene è rappresentato dall’elemento “glifo”. Parametri come “Unicode” e “Glyph -Name” raccontano come accedere al glifo corrispondente - utilizzando rispettivamente un codice carattere o un nome del glifo. Negli effettivi dati di carattere SVG, è sufficiente fornire un solo attributo, Unicode o nome del glifo per accedere al glifo desiderato.

Un attributo d è l’attributo più importante dell’elemento” glifo “. Definisce il profilo di un glifo usando tali primitivi geometrici come linee e curve.

Diamo un’occhiata a come ottenere un percorso grafico per il glifo chiamato “triangolo” nel nostro esempio. Ogni lettera in questo percorso è un’abbreviazione speciale, relativa al comando corrispondente del contesto grafico. Ogni lettera è seguita da 2 numeri, queste sono le coordinate. Tutte le coordinate nell’esempio sono globali, nessuna coordinata è relativa al punto precedente.

La prima lettera in questo percorso è “M”. È un comando “moveto”. Mentre va dal suo nome, questo comando mette una penna in coordinate specificate, nel nostro caso - l’inizio del sistema di coordinate (0, 0).

Comando successivo - “L” significa comando “lineto”. Questo comando trae una riga dal punto corrente (0,0) alla coordinata (x, y) che diventa il nuovo punto corrente.

Le coordinate del nuovo punto corrente sono i parametri del comando “L” - Nel nostro caso, queste sono coordinate (100, 0).

Quindi la prima riga nel nostro glifo è la linea dal punto (0,0) a punto (100, 0). Il comando successivo - “L50.100” - trae una riga dal punto corrente (100, 0) al punto (50, 100).

E l’ultimo comando nel nostro percorso del glyph - “Z” è chiamato “ClosePath” e viene utilizzato per chiudere il sottofondo corrente disegnando una linea retta dal punto corrente al punto iniziale del sottofondo corrente - (0,0).

Quindi, dall'esempio spiegato, abbiamo imparato brevemente come sono rappresentati gli glifi nel formato SVG, come accedere a questi glifi e quali caratteristiche più comuni dovrebbero avere un carattere per ottenere i testi resi con questo carattere visualizzato correttamente.

Come creare un carattere SVG?

Di solito, il processo di creazione del carattere SVG ha il prossimo ordine:

1. Crea grafica vettoriale per ogni glifo del carattere. Per tale scopo, è possibile utilizzare software come Illustrator, Inkcape o glifi.
2. Esporta ogni glifo come file SVG, assicurandosi di utilizzare lo stesso nome e gli attributi per ciascuno di essi.
3. Crea il file di carattere utilizzando software come fontforge o fontLab. Quindi importa i file SVG per ogni carattere.
4. Aggiungi metadati come il nome del carattere, l’autore e la licenza al file creato.
5. Prova il risultato. Installa il carattere sul tuo computer e provalo in diversi editor di testo e software di progettazione. Tieni presente che non tutti questi programmi supportano i caratteri SVG, quindi assicurati di avere quelli appropriati per creare e modificare i caratteri SVG.

Conclusione

Il carattere SVG ha un livello piuttosto elevato di popolarità e un sacco di casi in cui è una soluzione migliore rispetto ad altri caratteri. Ma per prendere una decisione se questo formato è la scelta giusta per il tuo progetto, è meglio imparare prima i suoi pro e contro.

Se si desidera lavorare con SVG online senza caricare alcun software aggiuntivo, è possibile utilizzare applicazioni multipiattaforma e se ti stai concentrando sul lavoro con i caratteri, vai a un altro gruppo di app per lavorare con i caratteri puoi trovare convertitori per trasformare i tuoi file di font Svg in un formato più idoneo e dei motivi, dei motivi.