SVG
Creazione di caratteri

introduzione

Osservazioni

un semplice font

Un semplice esempio di un font svg. Alcune cose da notare qui:

• il sistema di coordinate dei glifi è in opposizione al solito sistema di coordinate in svg. l'asse y è rivolto verso l'alto . Il punto 0,0 è nell'angolo in basso a destra.
• Tutti i percorsi di un font devono essere disegnati in senso antiorario.
• Nella maggior parte degli strumenti è supportato solo l'attributo d dell'elemento glifo. Gli elementi secondari non funzioneranno, sebbene siano tecnicamente consentiti.

<svg xmlns="http://www.w3.org/2000/svg">
  <font id = "myFont"
        horiz-adv-x   = "1000"
        vert-origin-x = "0"
        vert-origin-y = "0" >
    <font-face font-family  = "myFont"
               font-weight  = "normal"
               units-per-em = "1000">
      <font-face-src>
        <font-face-name name="myFont"/>
      </font-face-src>
    </font-face>`
    <glyph unicode="a" d="M0 0 H1000 L500 1000z M200 200 L500 800 L800 200z" />
    <glyph unicode="b" d="M0 0 H1000 L500 1000z M200 200 L500 800 L800 200z" />
  </font>
</svg>

Se hai glifi più larghi o più stretti, modifica l'horiz-adv-x sull'elemento glifo stesso.

<glyph unicode="a" horiz-adv-x="512" d="M0 0 H1000 L500 1000z M200 200 L500 800 L800 200z" />

raccolta di caratteri

la proprietà unicode viene utilizzata per la selezione di glifi successiva. È possibile utilizzare lettere semplici o codici unicode e legature (combinazione di lettere o codepoint unicode)

• unicode="abc"
• unicode="ab"
• unicode="abab"
• unicode="a"
• unicode="b"

i glifi vengono sempre selezionati per prima corrispondenza, quindi avere tutte le legature prima di ogni singolo carattere.

i codepoint di unicode possono essere scritti in decimale { o in notazione esadecimale &#x1f .

salita, discesa e linea di base

la proprietà units-per-em è una delle proprietà dei font più importanti. È usato per dare qualsiasi valore a qualsiasi altra proprietà.

la specifica del font CSS2 ha una bella definizione di em sqare :

Alcuni valori, come le metriche di larghezza, sono espressi in unità relative a un quadrato astratto la cui altezza è la distanza prevista tra le righe di tipo nella stessa dimensione del tipo

la linea di base predefinita è a 0 nel quadrato em. per il calcolo dell'altezza della linea e per gli scopi di allineamento, le due ascensioni e discese delle preriffe sono di estrema importanza.

L'ascesa è la distanza massima dalla linea di base al punto più alto del tuo glifo più grande. Usualmente questo è 1em, quindi il valore che hai dato per unità-per-em.

La discesa è la distanza massima dalla linea di base al punto più basso in qualsiasi glifo del tuo carattere.

Ecco un font con glifi che mostra una linea nel punto più basso e più alto così come nella linea di base.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
  <font id = "myFont"
        horiz-adv-x   = "1000"
        vert-origin-x = "0"
        vert-origin-y = "0" >
    <font-face font-family  = "myFont"
               font-weight  = "normal"
               units-per-em = "1000"
               descent="500"
               ascent="1000">
      <font-face-src>
        <font-face-name name="myFont"/>
      </font-face-src>
    </font-face>`
    <glyph unicode = "a" d = "M0 900h1000v100h-1000z" />
    <glyph unicode = "b" d = "M0 0h1000v100h-1000z" />
    <glyph unicode = "c" d = "M0 -500h1000v100h-1000z" />
  </font>
</svg>

Ascesa e discesa sono utilizzate per determinare l'altezza della linea. Unità-per-em e baseline sono utilizzate per determinare la posizione e le dimensioni relative ad altri font utilizzati ..