SVG Text Presentation

1. Basic Text Attributes

SVG’s <text> element supports many attributes for styling and layout:

• font-size - sets the size of the text.
• fill - sets the color (e.g., red, #123456, etc.).
• stroke - outlines the text (must also set stroke-width).
• text-anchor - aligns text horizontally (start, middle, end).
• letter-spacing and word-spacing - controls spacing between characters and words.
• dominant-baseline or baseline-shift - controls vertical alignment/baseline.

<text x="20" y="40" font-size="24" fill="red">Basic Red Text</text>
<text x="20" y="80" font-size="24" fill="none" stroke="blue" stroke-width="1" letter-spacing="3">Outlined Text</text>
<text x="250" y="110" font-size="20" fill="green" text-anchor="middle">Centered Text at x=250</text>
    

2. Text on a Curve (Text on a Path)

You can place text along any shape by first defining a path in the <defs> section and then referencing it with <textPath>. The startOffset attribute defines where along the path the text should start.

<defs>
  <path id="curvePath" d="M 20,75 Q 200,0 380,75 Q 200,150 20,75" />
</defs>

<text>
  <textPath href="#curvePath" startOffset="0">
    This text follows a quadratic curve
  </textPath>
</text>
    

3. Transformations on Text

You can transform text (translate, rotate, scale, skew) via the transform attribute. The transformations are applied relative to the specified coordinate.

<text x="20" y="40" font-size="20">Normal Text</text>
<text x="20" y="80" font-size="20" transform="rotate(-15, 20, 80)">Rotated Text (-15°)</text>
<text x="20" y="120" font-size="20" transform="scale(1.5, 1.5)">Scaled Text (150%)</text>
    

4. Applying Filters to Text

SVG filters like feGaussianBlur can be applied directly to text via the filter attribute. Below is a simple example of a blur filter.

<defs>
  <filter id="blurFilter" x="0" y="0" width="200%" height="200%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="2"/>
  </filter>
</defs>

<text x="20" y="80" filter="url(#blurFilter)">Blurred Text</text>
    

5. Glyphs and Embedded Fonts

You can define custom glyphs within an SVG <font> element using the <glyph> sub-element. This is advanced usage and typically used for custom icon fonts or highly specialized typography. Below is a simple (contrived) example.

<defs>
  <font id="MyCustomFont" horiz-origin-x="0" horiz-origin-y="0" horiz-adv-x="600">
    <font-face font-family="MyCustomFont" units-per-em="600" ascent="400" descent="200" />
    <glyph unicode="A" horiz-adv-x="600" d="M 100 400 L 300 0 L 500 400 z" />
  </font>
</defs>

<text x="20" y="60" font-size="60" font-family="MyCustomFont">A</text>
    

6. External Fonts Usage

Below is an example of loading two fonts (Inter-Black and Inter-BlackItalic) via @font-face from a fonts folder. Please ensure the woff2 files (Inter-Black.woff2, Inter-BlackItalic.woff2) are located in fonts/, and that the path is correct relative to your HTML page.

<style>
  @font-face {
    font-family: 'Inter Black';
    src: url('fonts/Inter-Black.woff2') format('woff2');
    font-weight: 900; /* optional, helps define 'weight' */
    font-style: normal;
  }

  @font-face {
    font-family: 'Inter Black Italic';
    src: url('fonts/Inter-BlackItalic.woff2') format('woff2');
    font-weight: 900; /* optional, helps define 'weight' */
    font-style: italic;
  }
</style>

<svg width="500" height="120" xmlns="http://www.w3.org/2000/svg">
  <text x="20" y="50" font-family="Inter Black" font-size="36">
    Text using Inter Black
  </text>

  <text x="20" y="100" font-family="Inter Black Italic" font-size="36">
    Text using Inter Black Italic
  </text>
</svg>
  

This example uses two separate @font-face rules (one for the normal Black weight and another for the italic style). Adjust your text elements to use either font-family="Inter Black" or font-family="Inter Black Italic" as needed.