resvg-SVG-Schriften: Die benötigte Schrift laden

Um SVG-Schriften mit resvg zuverlässig zu rendern, übergib die Schriftdateien an den Renderer und verwende ihre Familiennamen im SVG. Beim nativen Node-Binding @resvg/resvg-js bedeutet das, fontFiles zu konfigurieren. Setze loadSystemFonts: false, wenn du genau testen möchtest, welche Schriften dein Auftrag erhält. Das Node-Beispiel des Projekts demonstriert diese Konfiguration.

Ein PNG kann vollständig aussehen und trotzdem die falsche Schrift verwenden. Prüfe die Buchstabenformen auch dann, wenn der Exportbefehl erfolgreich ist.

Drei Schrifteingaben, ein SVG

Wir haben ein kleines Bergemblem aus Pfaden erstellt und daneben den editierbaren Text PINE & FIELD platziert. Das SVG fordert die Schriftfamilie Abel in normaler Stärke an. Wir renderten dieselbe Quelle dreimal mit @resvg/resvg-js 2.6.2, Node 22.19.0 und macOS arm64. Die Suche nach Systemschriften war in jedem Fall deaktiviert.

Kontrollierter Test des Schriftladens

Diese Beobachtungen beschreiben dieses Testmotiv und diese Konfiguration. Sie belegen nicht, welche Ersatzschrift eine andere Schriftsammlung, ein anderes Binding oder eine andere Version wählen wird. Die nützliche Diagnose ist einfacher: Eine fehlende angeforderte Schriftfamilie kann zu fehlendem Text oder plausibel wirkendem Ersatztext führen.

Lade eine lokale Schrift in resvg-js

Dieses Beispiel verwendet das native Node-Paket, nicht das separate WebAssembly-Paket. Die versionierten Typdefinitionen des Bindings führen fontFiles, fontDirs und loadSystemFonts unter der Option font auf.

Installiere in einem neuen Arbeitsordner die hier verwendete Version:

npm install --save-exact @resvg/resvg-js@2.6.2

Lade Abel-Regular.ttf und die zugehörige OFL.txt aus dem Abel-Verzeichnis von Google Fonts herunter. Bewahre beide in einem Unterordner fonts auf. Abel wird unter der SIL Open Font License bereitgestellt; behalte die Lizenz bei der Schrift, wenn du dieses Beispiel weitergibst.

Speichere dies als label.svg:

<svg xmlns="http://www.w3.org/2000/svg"
     width="880" height="240" viewBox="0 0 880 240">
  <rect width="880" height="240" fill="#f6f2e8"/>
  <path d="M46 155 L96 57 L147 155 Z" fill="#176b5b"/>
  <path d="M75 155 L112 88 L166 155 Z" fill="#81ab78"/>
  <text x="195" y="151" font-family="Abel"
        font-size="82" font-weight="400" fill="#152e29">
    PINE &amp; FIELD
  </text>
</svg>

Speichere dann render.mjs neben dem SVG:

import { access, readFile, writeFile } from 'node:fs/promises';
import { fileURLToPath } from 'node:url';
import { Resvg } from '@resvg/resvg-js';
 
const fontFile = fileURLToPath(
  new URL('./fonts/Abel-Regular.ttf', import.meta.url)
);
await access(fontFile);
 
const svg = await readFile(new URL('./label.svg', import.meta.url));
const renderer = new Resvg(svg, {
  font: {
    loadSystemFonts: false,
    fontFiles: [fontFile],
  },
});
 
const png = renderer.render().asPng();
await writeFile(new URL('./label.png', import.meta.url), png);

Führe node render.mjs aus. Die Datei-URLs beziehen Eingabe- und Ausgabepfade auf das Skript. Ein Wechsel des Arbeitsverzeichnisses im Terminal ändert deshalb nicht, welche Schrift geöffnet wird. access() liefert einen direkten Dateisystemfehler, wenn die Schrift fehlt oder nicht zugänglich ist; es validiert nicht den Inhalt der Schrift.

Um die Kontrollfälle zu reproduzieren, lasse das SVG unverändert. Verwende für die erste Zeile ein leeres Array fontFiles. Für die zweite lade Anton-Regular.ttf aus dem Anton-Verzeichnis von Google Fonts, behalte die Lizenz und übergib diese Datei statt Abel. Prüfe jedes PNG, bevor du etwas anderes änderst.

Verwende den Familiennamen, nicht den Dateinamen

Abel-Regular.ttf ist ein Dateipfad. Abel ist die vom SVG angeforderte Schriftfamilie. Mit font-family="Abel-Regular.ttf" weist du den Renderer nicht an, diese Datei zu öffnen.

Das SVG-Attribut font-family akzeptiert Familiennamen oder generische Familien, bei mehreren Angaben als priorisierte Liste. Es besitzt auch ein CSS-Gegenstück: Eine passende CSS-Deklaration font-family hat Vorrang vor dem Präsentationsattribut.

Prüfe bei deiner eigenen Grafik drei Dinge gemeinsam:

• Familie: Den Namen, der in der Schrift gespeichert und vom SVG angefordert wird.
• Stil und Stärke: Ob der übergebene Schriftschnitt zur gewünschten Beschriftung passt.
• Zeichen: Ob die Schrift die Buchstaben und Symbole der tatsächlichen Beschriftung enthält.

Ein erfolgreiches readFile beweist nur, dass Bytes gelesen wurden. Ein sichtbares Wort beweist nur, dass irgendeine Schrift gerendert wurde. Keines von beidem beweist, dass der gewählte Schriftschnitt derjenige aus deinem Design ist.

Für eine umfassendere Diagnose von editierbarem Text gegenüber Pfadkonturen lies warum sich SVG-Schriften nach dem Export ändern.

Prüfe dieselben Eingaben in deiner Exportumgebung

Behandle die Schrift als Eingabe des Grafikauftrags. Nimm die benötigte Schriftdatei in dein Deployment oder Auftragspaket auf und bestätige dann, dass der aufgelöste Pfad dort auf sie verweist. Eine Schrift, die auf deinem Design-Laptop installiert ist, wird beim Zusammenstellen eines Serverauftrags leicht übersehen.

Beginne mit deaktivierter Systemsuche und der kleinsten ausdrücklichen Schriftliste, die deine Testbeschriftung abdeckt. Wenn diese Ausgabe korrekt ist, teste die tatsächlichen Wörter, Satzzeichen, Schriftstärken und Sprachen deiner Grafik. Unsere normale lateinische Beschriftung testet keine anderen Schriftsysteme oder komplexen Schriftfamilien.

Wenn die Schrift weiterhin falsch aussieht, prüfe die Quelle auf CSS-Überschreibungen und verschachtelte <tspan>-Stile. Wenn Emblem und Beschriftung beide unerwartet beschnitten oder skaliert werden, untersuche SVG-Begrenzungen und Rasterabmessungen separat. Unsere Anleitung zur Größensteuerung in CairoSVG behandelt diesen Unterschied in einem anderen Renderer; die Optionen gelten speziell für CairoSVG.

Wenn du einen Fehlerbericht oder einen reproduzierbaren Exportauftrag weitergibst, lege SVG, genaue Binding-Version, Schriftdateinamen und -versionen, Rendereroptionen und ein erwartetes Bild bei. Berücksichtige beim Verpacken die Berechtigungen zur Weitergabe der Schriftdateien.

Behalte die bearbeitbare Quelle neben dem PNG

Der obige Code schreibt ein PNG. Das ist eine Rasterdatei für die Weitergabe; ihre sichtbaren Buchstaben sind kein bearbeitbarer SVG-Text mehr. Behalte label.svg und die Schrifteingaben als Quelle für spätere Textänderungen.

Wenn ein Empfänger ein Vektorlogo mit festgelegter Schrift benötigt, bereite im Vektoreditor eine separate SVG-Ausgabekopie mit in Pfade umgewandeltem Text vor und prüfe sie dort. Behalte das Original mit editierbarem Text. Unser Leitfaden zu Logo-Dateiformaten erklärt, welche Quell- und Ausgabedateien unterschiedliche Aufgaben erfüllen.

Wenn das benötigte Emblem nur in einem PNG oder JPG vorliegt, kann PerfectVectors Logo-Vektorisierer helfen, die Vektorgrafik für diesen Teil des Designs zu rekonstruieren. Prüfe die entstandenen Pfade, entferne unerwünschte nachgezeichnete Schrift und setze die Beschriftung mit einer bekannten Schrift neu, bevor du den resvg-Export ausführst. Vektorisierung identifiziert weder die Originalschrift noch stellt sie editierbaren Text wieder her. Der Leitfaden zur Bildvektorisierung erklärt, was diese Konvertierung verändert.

FAQ

Warum verschwindet Text, wenn ich Systemschriften deaktiviere? In unserem Test ohne Schriften hatte der Renderer keinen übergebenen Schriftschnitt für die editierbare Beschriftung, daher erschien nur die Pfadgrafik. Lade eine passende Schrift ausdrücklich und prüfe Familie, Stil und Zeichenabdeckung.

Kann ich den Schriftdateinamen als SVG-Familiennamen verwenden? Verwende im SVG den Familiennamen der Schrift. Übergib den lokalen Dateinamen separat über fontFiles. Das Umbenennen einer Schriftdatei ändert ihren internen Familiennamen nicht.

Verwandelt resvg mein PNG-Logo in ein bearbeitbares SVG? Das Beispiel hier rendert SVG zu PNG. Es vektorisiert kein Rasterlogo. Rekonstruiere das Emblem bei Bedarf mit einem Vektorisierungsworkflow, füge dann bearbeitbaren Text hinzu und behalte dieses SVG als Original.

Quellen

1. resvg-js — README für Version 2.6.2 — Native Node-Nutzung und ausdrückliches Laden von Schriften.
2. resvg-js — Typdefinitionen für Version 2.6.2 — Schriftkonfiguration und API für gerenderte Bilder.
3. MDN — SVG font-family — Familienlisten und CSS-Vorrang.
4. Google Fonts — Abel — Der normale Schriftschnitt und die Lizenz der beabsichtigten Beschriftung.
5. Google Fonts — Anton — Schrift und Lizenz für den Kontrollfall mit Ersatzschrift.

Wenn ein Rasteremblem die Arbeit aufhält, vektorisiere die Logografik, prüfe ihre Kanten in deinem Editor und füge die Beschriftung als editierbaren Text hinzu. Rendere dann mit einer ausdrücklich übergebenen Schriftdatei und vergleiche das PNG vor der Weitergabe mit deinem Original.