Wie man Outline-SVG-Text in Next.js verwendet

Next.js bietet dir mehrere Möglichkeiten, Text zu rendern: CSS mit next/font, Inline-SVG, externe SVG-Dateien oder sogar Canvas. Meistens ist next/font die richtige Wahl. Aber es gibt eine spezifische Kategorie von typografischen Anwendungsfällen, in denen outline-SVG-Pfade (in Pfade umgewandelter Text) normalen Text übertreffen. Wenn du eine Next.js-Seite mit einer benutzerdefinierten Wortmarke (Wordmark), einem animierten Hero-Text oder einem dekorativen Textelement erstellst, das in jedem Browser und auf jedem Gerät exakt gleich aussehen muss, solltest du diesen Workflow kennen.

Dieser Artikel behandelt, wann und warum man outline-SVG-Texte einsetzt, wie man sie generiert und die genauen Muster, um sie in einem Next.js-Projekt zu verwenden – einschließlich Performance-, Barrierefreiheits- (A11y) und SSR-Aspekten, die in den meisten Tutorials übersprungen werden.

---

Für wen ist das gedacht?

Du baust eine Next.js-App (Pages Router oder App Router) und hast mindestens eine dieser Situationen:

• Ein Logo oder eine Wortmarke verwendet eine Schriftart, die du nicht als Webfont laden kannst oder möchtest.
• Eine Hero-Überschrift mit einem visuellen Effekt (Verlauf, Kontur, Bildfüllung, buchstabenweise Animation), der sich mit CSS allein nicht sauber umsetzen lässt.
• Ein dekoratives Textelement, das browserübergreifend – auch in älteren Browsern – pixelgenau gerendert werden muss.
• Du generierst SVGs dynamisch zur Build-Zeit und möchtest in Pfade umgewandelten Text in der Ausgabe haben.

---

Warum Outline-SVG-Texte Probleme lösen, die echter Text nicht lösen kann

Das Problem der Rendering-Konsistenz

Selbst wenn next/font alles richtig macht – Preloading, font-display swap, Subsetting – gibt es während des Seitenaufbaus ein Zeitfenster, in dem entweder eine Fallback-Schrift angezeigt wird oder der Text beim Laden der Custom-Font leicht umbricht (Layout Shift). Für Fließtext ist dieser Kompromiss akzeptabel. Für eine Hero-Wortmarke oder ein präzise komponiertes typografisches Layout ist es das nicht.

Outline-SVG-Pfade enthalten keinerlei Schriftreferenzen. Die Formen sind festgebackene Geometrie. Sie werden in Chrome, Safari, Firefox und jedem anderen Browser vom ersten Paint an exakt gleich gerendert, ganz ohne Layout Shift.

Effekte, die CSS-Text nicht sauber abbilden kann

Durchgehender Farbverlauf über ein mehrbuchstabiges Wort
CSS background-clip: text funktioniert, aber es ist ein Hack – der Hintergrund wird auf die Textgrenzen zugeschnitten und erfordert -webkit-text-fill-color: transparent. Die browserübergreifende Unterstützung ist inkonsistent, und in bestimmten SSR-Hydration-Szenarien kann es zu Fehlern kommen. Ein SVG linearGradient, das auf einen Pfad angewendet wird, ist der standardkonforme Weg.

Nur-Kontur-Typografie (hollow)
CSS hat keinen Standard für text-stroke (nur das nicht-standardisierte -webkit-text-stroke). In SVG funktioniert fill="none" stroke="currentColor" einfach auf Anhieb.

Präzise buchstabenweise Animation
Um einzelne Buchstaben mit echter Schrift durch Framer Motion oder CSS-Keyframes zu animieren, musst du den Text entweder manuell in <span>-Elemente aufteilen (fehleranfällig und ignoriert das Kerning) oder eine JS-Bibliothek wie GSAP SplitText verwenden. Wenn jeder Buchstabe bereits ein separater SVG-<path> ist, kannst du ihn direkt animieren.

---

Generieren der Outline-SVG

Verwende texttosvg.app – es läuft direkt im Browser, benötigt keinen Account und exportiert saubere SVGs ohne <text>- oder <font>-Elemente.

Wichtige Einstellungen für den Einsatz in Next.js:

Einstellung	Empfohlener Wert	Warum
Units (Einheiten)	px	Entspricht dem Koordinatensystem von Next.js / CSS
Bezier Accuracy (Bezier-Genauigkeit)	Medium (Mittel)	Weiche Kurven ohne überschüssige Ankerpunkte
Separate Characters (Zeichen trennen)	Off (Standard)	Ein einziger zusammengesetzter Pfad; nur aktivieren, wenn Buchstaben einzeln animiert werden sollen
Fill Color (Füllfarbe)	Auf die Zielfarbe setzen oder schwarz lassen und via CSS überschreiben	Lässt sich in JSX leichter mit currentColor überschreiben

Lade die .svg-Datei herunter. Öffne sie in einem Texteditor und sieh dir den Inhalt an. Eine sauber exportierte SVG aus Outline-Text sollte in etwa so aussehen:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 80">
  <path d="M10.5 64V16h8.2l..." fill="#000000"/>
</svg>

Kein <text>, kein <font>, keine <defs>, die auf externe Ressourcen verweisen. Nur eine viewBox, ein oder mehrere <path>-Elemente und eine Füllfarbe. Genau das wollen wir.

---

Vier Möglichkeiten zur Verwendung in Next.js

1. Inline-SVG in JSX (am flexibelsten)

Füge den SVG-Inhalt direkt in eine Komponente ein. Das ist der richtige Ansatz, wenn du:

• die Füllfarbe dynamisch überschreiben willst
• Framer Motion- oder CSS-Animationen auf die Pfade anwenden möchtest
• aria-Attribute für Barrierefreiheit (Accessibility) hinzufügen musst

// components/Wordmark.tsx
export function Wordmark({ color = "currentColor" }: { color?: string }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 420 80"
      aria-label="YourBrand"
      role="img"
      width="210"
      height="40"
    >
      <path d="M10.5 64V16h8.2..." fill={color} />
    </svg>
  );
}

Wichtige Punkte:

• Füge immer role="img" und aria-label hinzu – Outline-Pfade haben keinen Textinhalt für Screenreader.
• Setze explizit width und height, um Layout Shifts (CLS) zu vermeiden.
• Verwende currentColor als Standardfüllung, damit die Komponente die Textfarbe vom Elternelement erbt.

2. SVG als statisches Asset in /public (am einfachsten)

Lege die .svg-Datei im Ordner /public/images/ ab. Nutze next/image, um sie zu rendern:

import Image from "next/image";

export function Logo() {
  return (
    <Image
      src="/images/wordmark.svg"
      alt="YourBrand"
      width={210}
      height={40}
      priority // falls 'above the fold'
    />
  );
}

next/image übernimmt automatisch Lazy Loading, Priority Hints und verhindert Layout Shifts. Der Nachteil: Du kannst die Füllfarbe so nicht dynamisch ändern oder einzelne Pfade animieren. Nutze dies für statische Logos, deren Aussehen sich nicht ändert.

3. Import als React-Komponente mit SVGR

Wenn dein Next.js-Projekt SVGR verwendet (konfiguriert in der next.config.js), kannst du SVG-Dateien direkt als React-Komponenten importieren:

// next.config.js
const nextConfig = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"],
    });
    return config;
  },
};

import WordmarkSVG from "@/public/images/wordmark.svg";

export function Logo() {
  return <WordmarkSVG aria-label="YourBrand" role="img" width={210} height={40} />;
}

Das bietet das Beste aus beiden Welten: Die SVG bleibt in einer Datei (leicht aktualisierbar), wird aber inline im DOM gerendert (animier- und stylebar). Dies ist der Ansatz, den die meisten Next.js-Projekte mit mehreren SVG-Assets letztendlich wählen.

4. Dynamische SVG-Generierung zur Build-Zeit (für Fortgeschrittene)

Wenn du Open Graph Images, PDFs oder andere dateibasierte Ausgaben zur Build-Zeit generierst, kannst du Outline-SVG-Text direkt in die generierten Dateien schreiben. Im Next.js App Router lässt sich dies hervorragend mit generateStaticParams und routingbasierter OG-Image-Generierung kombinieren:

// app/og/route.tsx  (Next.js App Router)
import { ImageResponse } from "next/og";

export async function GET() {
  return new ImageResponse(
    (
      <div style={{ display: "flex", background: "#fff", width: "1200px", height: "630px" }}>
        {/* Outline-SVG-Pfad direkt verwenden – kein Laden von Schriftarten nötig */}
        <svg viewBox="0 0 420 80" width="420" height="80">
          <path d="M10.5 64V16h8.2..." fill="#111" />
        </svg>
      </div>
    ),
    { width: 1200, height: 630 }
  );
}

ImageResponse nutzt unter der Haube Satori, welches einen eigenen Mechanismus zum Laden von Schriftarten hat. Wenn du dies komplett umgehst und outline Pfade verwendest, vermeidest du eine ganze Reihe von Schriftarten-Fehlern während des Builds.

---

Performance-Überlegungen

Inline-SVG vs. externe Datei
Inline-SVG vergrößert deinen HTML-Payload, spart aber einen HTTP-Request. Für einen einzelnen Logo-Pfad (meist unter 2 KB Pfaddaten) ist inline völlig in Ordnung. Für mehrere große SVG-Grafiken solltest du externe Dateien verwenden, die über next/image oder SVGR geladen werden.

Vermeide unnötige Komplexität in den Pfaddaten
Text, der mit maximaler Bezier-Genauigkeit exportiert wurde, kann Tausende von Ankerpunkten generieren. Das bläht die Pfaddaten auf und verlangsamt den Paint im Browser. Exportiere mit mittlerer (Medium) Genauigkeit. Sind die Pfaddaten immer noch groß, optimiere sie mit SVGO:

npx svgo input.svg -o output.svg

SVGO reduziert die Pfaddaten typischerweise um 20–60 %, ohne dass eine visuelle Veränderung in der Ausgabe sichtbar ist.

Setze explizite Dimensionen
SVG-Elemente ohne Größenangabe verursachen Layout Shifts (eine Strafe beim Core Web Vitals Wert CLS). Setze immer width und height – entweder als SVG-Attribute oder via CSS. Die viewBox allein reicht nicht aus, um CLS zu verhindern.

---

Barrierefreiheit (Accessibility): Was du tun musst

Outline-SVG-Pfade sind für Screenreader unsichtbar. Dies ist das Wichtigste, was man richtig machen muss:

// Richtig – Barrierefreie SVG
<svg role="img" aria-label="YourBrand wordmark" viewBox="0 0 420 80">
  <title>YourBrand</title>
  <path d="..." />
</svg>

Füge sowohl role="img" + aria-label hinzu (für breite Unterstützung) als auch ein <title>-Element innerhalb der SVG (für SVG-fähige Assistenztechnologien). Wenn die SVG rein dekorativ ist und es separaten sichtbaren Text in der Nähe gibt, verwende stattdessen aria-hidden="true":

// Rein dekorativ – vor Screenreadern verbergen
<svg aria-hidden="true" focusable="false" viewBox="0 0 420 80">
  <path d="..." />
</svg>

Lasse die aria-Attribute niemals komplett weg. Ein Screenreader, der auf eine reine Pfad-SVG ohne Label stößt, wird sie entweder stillschweigend überspringen oder etwas wenig Hilfreiches wie "Bild" ansagen.

---

Ein praktisches Beispiel: Animierte Hero-Wortmarke

Hier ist eine komplette Komponente, die alles oben Genannte kombiniert – eine Outline-SVG-Wortmarke, die mithilfe von Framer Motion wortweise eingeblendet wird:

"use client";

import { motion } from "framer-motion";

export function HeroWordmark() {
  return (
    <motion.svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 420 80"
      width={420}
      height={80}
      role="img"
      aria-label="YourBrand"
      initial={{ opacity: 0, y: 12 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.6, ease: "easeOut" }}
    >
      <title>YourBrand</title>
      {/* Verlaufsdefinition */}
      <defs>
        <linearGradient id="wordGradient" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stopColor="#6366f1" />
          <stop offset="100%" stopColor="#ec4899" />
        </linearGradient>
      </defs>
      {/* Outline-Textpfad von texttosvg.app */}
      <path d="M10.5 64V16h8.2..." fill="url(#wordGradient)" />
    </motion.svg>
  );
}

Dies wird ohne jegliches Laden von Schriften gerendert, bietet einen von links nach rechts fließenden Farbverlauf über das gesamte Wort und eine sanfte Eingangs-Animation – alles ohne eine einzige Webfont-Anfrage.

---

Häufige Fehler

Vergessene viewBox
Ohne eine viewBox skaliert die SVG nicht. Behalte immer die viewBox aus der exportierten Datei bei.

Füllfarbe in der SVG setzen und versuchen, sie mit CSS zu überschreiben
CSS fill überschreibt Inline-fill-Attribute nur, wenn die CSS-Spezifität (Specificity) hoch genug ist, und in manchen Browsern sticht das SVG-Attribut fill CSS generell aus. Der sauberste Ansatz: Setze fill="currentColor" im Pfad und steuere die Farbe dann über die color-Eigenschaft eines Elternelements.

Outline-SVG für Fließtext oder CMS-gerenderten Text verwenden
Lass es bleiben. Outline-SVGs sind für designte, statische typografische Elemente gedacht. Wenn der Text aus einem CMS kommt, sich pro User ändert oder von Suchmaschinen indexiert werden muss, nutze next/font und echten Text. SVG-Pfade tragen nicht auf sinnvolle Weise zur Seitenindexierung bei.

Nicht SVGO ausführen, bevor es ins Repo gepusht wird
Roh-SVGs aus Export-Tools enthalten oft überflüssige Attribute, Kommentare und Editor-Metadaten. SVGO entfernt all das. Mach es zu einem festen Bestandteil deiner Asset-Aufbereitung.

---

Zusammenfassung

Outline-SVG-Text in Next.js ist das richtige Werkzeug für eine eng gefasste, aber wichtige Gruppe von Anwendungsfällen: Logos, Wortmarken, dekorative typografische Elemente und Texteffekte, die sich mit CSS nicht sauber erreichen lassen. Für alles andere ist next/font besser.

Wenn du Outline-SVGs einsetzt:

• Generiere sie auf texttosvg.app mit der Bezier-Genauigkeit Medium und der Einheit px.
• Lass sie durch SVGO laufen, bevor du sie deinem Projekt hinzufügst.
• Binde sie als JSX ein, wenn du dynamisches Styling oder Animationen benötigst; nutze SVGR für Projekte mit vielen SVGs; verwende next/image für rein statische Zwecke.
• Füge immer role="img" + aria-label (oder aria-hidden für dekorative Elemente) hinzu.
• Setze explizit width und height, um CLS zu verhindern.

Das Ergebnis ist ein typografisches Element, das sofort lädt, überall identisch aussieht und niemals einen schriftbezogenen Layout Shift verursacht – was auf einer performance-bewussten Next.js-Seite genau das ist, was du willst.