SVG GENERATORS · May 26, 2026

Text to SVG: The Complete Tutorial

From a <text> element to outlined lettering to text-on-a-curve – every way to get words into vector form, with copy-paste markup for each.

Vector text is a small superpower: lettering that scales to any size, cuts on any machine, and weighs almost nothing. This tutorial builds from the simplest <text> element to portable outlined lettering, with working markup at every step.

Level 1: The live text element

The minimal complete example – paste it into a live editor and it renders immediately:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 100">
  <text x="200" y="60" text-anchor="middle"
        font-family="Inter, sans-serif" font-size="48"
        font-weight="600" fill="#171717">Your text</text>
</svg>

The attributes worth knowing:

x/y position the text – note y is the baseline, not the top (the classic “why is my text cut off at the top” answer).
text-anchor (start/middle/end) controls horizontal alignment around x. With middle and x at half the viewBox width, text centers itself.
font-family, font-size, font-weight, letter-spacing, fill work as expected – change them live and watch.

Multi-line text needs <tspan> elements (SVG has no automatic wrapping):

<text x="200" y="40" text-anchor="middle" font-size="32" fill="#171717">
  <tspan x="200" dy="0">First line</tspan>
  <tspan x="200" dy="40">Second line</tspan>
</text>

Level 2: The font problem (and outlining)

Live text renders with the viewer’s fonts. On a machine without Inter, the example above silently falls back to a default sans – same words, different look. For SVGs on your own site this is manageable (web fonts apply to inline SVG). For files you distribute – logos, downloads, cut files – it’s unacceptable.

The solution is outlining: converting each letter into literal vector paths. Free route via Inkscape:

Open your SVG (or type fresh text with Inkscape’s text tool).
Select the text → Path → Object to Path (Shift+Ctrl+C).
Save as Plain SVG.

The result renders identically on every machine forever – at the cost of no longer being editable as text (keep a live-text master copy for future edits). The decision rule, fully explored in the SVG text editor guide: live text at home, outlines abroad.

For cutting machines the rule is absolute: Cricut and Silhouette cut paths, so lettering must be outlined. (SVG for Cricut covers the rest of cut-file prep.)

Level 3: Text on a curve

SVG’s party trick – flow text along any path with <textPath>:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 200">
  <defs>
    <path id="arc" d="M 50 150 Q 200 30 350 150" fill="none"/>
  </defs>
  <text font-family="Inter, sans-serif" font-size="28" fill="#171717">
    <textPath href="#arc" startOffset="50%" text-anchor="middle">
      CURVED VECTOR TEXT
    </textPath>
  </text>
</svg>

The invisible path in <defs> defines the curve; startOffset="50%" plus text-anchor="middle" centers the words along it. Badge text, arched logos, and circular stamps are all this technique – adjust the d curve in a live editor until the arc looks right, then outline for delivery.

Level 4: Styling beyond fill

Vector text takes every SVG paint feature:

Gradient fills: define a <linearGradient> in defs, reference with fill="url(#id)".
Outlined-only lettering: fill="none" stroke="#171717" stroke-width="1.5" – the engraving/neon look.
Knockout text: white text on a colored rect – or true cutout via <mask> for showing imagery through letters.

Each is a one-attribute experiment in the code editor, which is the real tutorial advice: SVG text rewards live fiddling more than memorization.

The cheat sheet

Goal	Technique
Text on your own website	Live `<text>` + web fonts
Logo/download/delivery	Outline (Object to Path)
Cutting machine	Outline – mandatory
Arched/circular text	`<textPath>`, then outline
Editable master	Keep a live-text copy alongside outlined exports