pelicin › web › SVG

Text

This page explains how to insert texts in SVG.

SVG font attributes

font-family

A prioritized list of what font family to use, e.g. Arial, Helvetica, sans-serif.

font-size

Constrols size of text (from baseline to baseline), e.g. 10 or 2em.

font-style

Specify normal, italic, or oblique.

font-weight

Sets the font weight (boldness). Specify normal, bold, lighter (one relative weight lighter), bolder (one relative weight bolder), or a number between 1–1000 like 400 or 700.

font-variant

Indicates which glyph variants to use (separated by space), e.g. small-caps or common-ligatures small-caps. See CSS font-variant for the complete list.

SVG text attributes

text-decoration

Adds decoration to text. Shorthand for text-decoration-line and text-decoration-style

Specify something like none, underline, underline double.

text-anchor

How to align the text given the starting baseline point. Specify start, middle, or end.

SVG elements

<text>

  • x — x coordinate of the starting point of the baseline
  • y — y coordinate of the starting point of the baseline
  • dx — from the starting point of the baseline, shifts the text in the x-axis
  • dy — from the starting point of the baseline, shifts the text in the y-axis
  • rotate — rotate each individual glyph (separate with comma to specify different rotation for each glyph)
  • textLength — width of the "text box" (controls letter spacing)
  • lengthAdjust — controls how the text should fill the width of the "text box"; specify spacing or spacingAndGlyphs
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100" width="300" height="100">
  <text x="0" y="50" font-size="50" font-family="sans-serif" fill="orange">
    Hello,
  </text>
  <text x="30" y="85" font-size="60" rotate="-30" textLength="280" lengthAdjust="spacingAndGlyphs" font-family="serif" fill="red" font-style="italic" font-weight="700">
    Everyone!
  </text>
</svg>
| LIVE PREVIEW
Hello, Everyone!

<tspan>

Defines a subtext within a <text> element or another <tspan> element.

  • x — x coordinate of the starting point of the baseline (normally continues where the preceding text ended; setting this value affects the following text)
  • y — y coordinate of the starting point of the baseline (normally continues where the preceding text ended; setting this value affects the following text)
  • dx — from the starting point of the baseline, shifts the text in the x-axis (setting this value affects the following text)
  • dy — from the starting point of the baseline, shifts the text in the y-axis (setting this value affects the following text)
  • rotate — rotate each individual glyph (separate with comma to specify different rotation for each glyph)
  • textLength — width of the "text box" (controls letter spacing)
  • lengthAdjust — controls how the text should fill the width of the "text box"; specify spacing or spacingAndGlyphs
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 30">
  <style>
    #tspan-example .red {
      font-family: serif;
      fill: red;
    }
  </style>
  <text id="tspan-example" x="10" y="20">
    You are
    <tspan class="red" dy="5">NOT</tspan>
    a banana!
  </text>
</svg>
| LIVE PREVIEW
You are NOT a banana!

<textPath>

Renders the text along the given path.

  • path — the path data, e.g. M 10,30 A 20,20 0,0,1 50,30 ...
  • href — URL to the path or basic shape to render the text, e.g. #my-path; if the path attribute is specified, this attribute is ignored.
  • side — which side of the path to render the text, relative to the path direction; specify left (default) or right (reverses the path direction)
  • startOffset — offsets the text from the start of the path
  • textLength — width of the "text box" (controls letter spacing)
  • lengthAdjust — controls how the text should fill the width of the "text box"; specify spacing or spacingAndGlyphs
<!-- https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
  <!-- To hide the path, it's usually wrapped in a <defs> element -->
  <!-- Removing the <defs> will show you the path in black stroke -->
  <defs>
    <path id="my-path" fill="none" stroke="black" d="
      M 10,90
      Q 90,90 90,45
      Q 90,10 50,10
      Q 10,10 10,40
      Q 10,70 45,70
      Q 70,70 75,50
    " />
  </defs>
  <!-- The text -->
  <text fill="red">
    <textPath href="#my-path">
      Quick brown fox jumps over the lazy dog.
    </textPath>
  </text>
</svg>
| LIVE PREVIEW
Quick brown fox jumps over the lazy dog.

References