SVG-Logos in Satori: Grafik in einer Markenkarte erhalten

Um ein SVG-Logo in einer Satori-Karte zu platzieren, übergib es als Bildquelle, setze Bildbreite und -höhe und behalte das ursprüngliche SVG neben der erzeugten Karte. Im folgenden Beispiel wird ein Base64-SVG zu einem verschachtelten Bild in Satoris Ausgabe. Es wird nicht zu einer neuen Sammlung bearbeitbarer Logopfade in der äußeren Karte.

Satori erzeugt SVG aus einer begrenzten Auswahl von HTML und CSS. Die offiziellen Bildhinweise empfehlen ausdrückliche Abmessungen und eigenständige Bilddaten, wenn ein späterer Renderer PNG erzeugen soll. Damit hat diese Aufgabe zwei getrennte Ausgaben: eine zusammengesetzte SVG-Karte und eine Raster-Ausgabekopie.

Behalte drei Dateien mit verschiedenen Aufgaben

Ein SVG-<image> kann ein anderes SVG referenzieren, wie MDNs image-Referenz erklärt. Ein Bildelement bedeutet deshalb nicht automatisch, dass die eingebettete Grafik rasterbasiert ist. Prüfe Datentyp und dekodierten Inhalt, bevor du die Karte mit der umfassenderen Checkliste für SVG-Rasterbilder diagnostizierst.

Masterdatei neben der Karte behalten

Ein vollständiges lokales Beispiel

Diese Vorlage verwendet den Standardimport mit SVG-Ausgabe aus Satori 0.35.0 und resvg-js 2.6.2. Installiere in einem leeren Arbeitsordner die Pakete mit festgelegten Versionen:

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

Erstelle einen Ordner fonts und lade Abel-Regular.ttf und OFL.txt aus dem Abel-Verzeichnis von Google Fonts herunter. Abel steht unter der SIL Open Font License 1.1. Behalte den begleitenden Hinweis und die Lizenz, wenn du die Schrift mit diesem Beispiel weitergibst.

Speichere Folgendes als starter.mjs und führe node starter.mjs aus. Es stellt Satori die Schrift bereit, erstellt eine hohle Raute und erzeugt zwei Karten von 600×320 mit Grafikrahmen von 80×80 und 160×160. Datei-URLs halten Schrift- und Ausgabepfade relativ zum Skript.

import { readFile, writeFile } from 'node:fs/promises';
import satori from 'satori';
import { Resvg } from '@resvg/resvg-js';
 
const logo = `<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128"><path d="M64 8 L120 64 L64 120 L8 64 Z M64 42 L86 64 L64 86 L42 64 Z" fill="#176b5b" fill-rule="evenodd"/></svg>`;
const src = `data:image/svg+xml;base64,${Buffer.from(logo).toString('base64')}`;
const font = await readFile(new URL('./fonts/Abel-Regular.ttf', import.meta.url));
await writeFile(new URL('./logo-master.svg', import.meta.url), logo);
 
for (const size of [80, 160]) {
  const svg = await satori({
    type: 'div',
    props: {
      style: { display: 'flex', width: 600, height: 320,
        backgroundColor: '#f6f2e8', color: '#152e29', fontFamily: 'Abel' },
      children: [
        { type: 'img', props: { src, width: size, height: size,
          style: { position: 'absolute', left: 24, top: 64 } } },
        { type: 'div', props: {
          style: { position: 'absolute', left: 220, top: 112, fontSize: 42 },
          children: 'CEDAR FIELD' } },
        { type: 'div', props: {
          style: { position: 'absolute', left: 220, top: 168, fontSize: 20 },
          children: 'A study in simple shapes' } },
      ],
    },
  }, {
    width: 600, height: 320,
    fonts: [{ name: 'Abel', data: font, weight: 400, style: 'normal' }],
  });
  const png = new Resvg(svg, { font: { loadSystemFonts: false } }).render().asPng();
  await writeFile(new URL(`./card-${size}.svg`, import.meta.url), svg);
  await writeFile(new URL(`./card-${size}.png`, import.meta.url), png);
}

Buffer.from(logo).toString('base64') kodiert die erstellten UTF-8-SVG-Bytes mit Nodes Buffer-Kodierungs-API. Das Präfix data:image/svg+xml;base64, kennzeichnet den Inhalt. Es verändert die Transportdarstellung, nicht die Logogeometrie.

Satoris Aufruf gibt das Karten-SVG zurück. Die nächste Zeile übergibt dieses SVG an den separaten resvg-js-PNG-Renderer. Die Vorlage besitzt keine entfernte Bild-URL. Sie liest die lokale Schrift vor dem Rendern. Teste dein eigenes Verhalten bei entfernten Abrufen oder beim Deployment separat.

Was die beiden tatsächlichen Aufrufe erzeugten

Wir führten genau diese Vorlage mit den festgelegten Paketen aus, prüften beide Ausgabe-SVGs und öffneten jedes SVG und PNG im Browser. Alle vier Kartendateien wurden mit 600×320 geladen. Die Schrift blieb an derselben Position, während sich der Emblemrahmen verdoppelte.

Jede Karte enthielt ein äußeres <image> und zwei äußere <path>-Elemente. Die beiden Pfade stellten Schrift dar, nicht die äußere und innere Kontur der Raute. Das Dekodieren der Base64-Bilddaten stellte die exakten ursprünglichen SVG-Bytes wieder her: einen Pfad, null Bildelemente und dieselbe hohle Rautendefinition. Die Karte hatte in diesem Lauf keine aktiven <text>-Elemente.

Die Zeilen zu den Farbgrenzen zählen Pixel, die der exakten einheitlichen Blaugrünfarbe des Emblems entsprechen. Sie schließen geglättete Kanten aus. Es sind nicht die Abmessungen des Bildrechtecks. Die ursprüngliche Raute reicht von Quellkoordinate 8 bis 120, ihre mathematische Ausdehnung würde innerhalb dieser Rahmen also auf 70 oder 140 Einheiten skaliert. Die gemessenen Grenzen der Vollfarbe waren etwas kleiner.

Die Mitte des ursprünglichen Emblems war transparent, mit Alpha 0, wenn es allein gerendert wurde. In jedem endgültigen Karten-PNG zeigte diese Öffnung den undurchsichtigen cremefarbenen Hintergrund: RGBA 246,242,232,255. Eine sichtbare Öffnung und ein transparenter Pixel der fertigen Karte sind unterschiedliche Anforderungen. Brauchst du einen transparenten Ausgabehintergrund, ändere den Kartenhintergrund und prüfe das entstandene Alpha separat.

Das sind zwei Aufrufe mit einem selbst erstellten Emblem in zwei Größen. Sie belegen weder, dass jede SVG-Funktion funktioniert, noch dass wiederholte Aufträge mit entfernten Bildern behoben sind oder alle Ziele die Karte identisch rendern.

Ändere den Grafikrahmen, ohne die Quelle zu verlieren

Ersetze für dein eigenes Logo die Zeichenfolge logo durch ein eigenständiges SVG oder lies deine Masterdatei vor dem Kodieren ein. Prüfe zuerst viewBox, Breite, Höhe und Öffnung. Zusätzlicher Leerraum innerhalb dieser Grenzen kann das sichtbare Logo kleiner als seinen zugewiesenen Kartenrahmen machen.

Setze beide Bildabmessungen passend zum vorgesehenen Seitenverhältnis. Unsere Quelle und beide Rahmen sind quadratisch. Das Ausgabebild verwendete preserveAspectRatio="none", was hier keine Seitenverhältnisänderung verursachte. Diese Testdatei prüft kein rechteckiges Logo, das in einen quadratischen Platz gezwungen wird. Ändere jeweils eine Layoutvariable und prüfe dann das tatsächliche SVG und Ausgabe-PNG.

Halte Schrift außerhalb des eingebetteten Logos, wenn du sie unabhängig ändern möchtest. Der Kartentext dieses Beispiels wird im ausgelieferten SVG zu Pfaden, die Wörter bleiben aber im Skript bearbeitbar. Schrifteingabe, Grafikeingabe und zusammengesetzte Ausgabe haben unterschiedliche Aufgaben. Die resvg-Schriftanleitung behandelt einen separaten Renderingablauf mit aktivem SVG-Text.

Satoris HTML- und CSS-Dokumentation beschreibt die unterstützte Teilmenge und Grenzen. Ein Browser-Screenshot deiner vorhandenen Seite verspricht nicht, dass diese Layoutengine sie exakt reproduziert. Beginne mit einer kleinen Karte und dem gewöhnlichen satori-Import. Ergänze dann die Eigenschaften, die dein Entwurf tatsächlich braucht.

Bereite ein Logo vor, das als Pixel vorliegt

Ist dein einziges Logo ein PNG oder JPG und brauchst du bearbeitbare Konturen, bereite mit PerfectVector ein SVG-Logo vor. Prüfe Silhouette und innere Öffnungen und behalte dieses saubere SVG als Masterdatei. Bette es dann in deine Karte ein und prüfe beide Grafikgrößen sowie das endgültige PNG. Vektorisierung bereitet die Grafik vor; Satori übernimmt die Kartenkomposition. Ein vorhandenes sauberes SVG kann direkt zum Einbetten gehen. Der Vektorisierungsleitfaden erklärt den Unterschied zwischen Quelle und Ausgabe.

Behalte nach der PNG-Übergabe Masterdatei, Skript und Schrifteingaben. Verwendest du eine andere Rasterisierungsstufe, prüfe deren Größen separat. Das Sharp-Beispiel für SVG zu PNG behandelt die Abmessungen dieses Renderers.

Häufige Fragen

Wird ein SVG-Bild in der Satori-Karte zu bearbeitbaren Pfaden? In diesem Beispiel bleibt das Logo ein verschachteltes SVG-Bild. Seine ursprüngliche Ein-Pfad-Quelle bleibt in den Bilddaten erhalten. Die äußeren Kartenpfade sind Schrift. Behalte die ursprüngliche Masterdatei für Geometrieänderungen.

Warum ist das sichtbare Logo kleiner als seine Breite und Höhe? Der Bildrahmen schließt die Quellgrenzen ein. Unsere Raute lässt Ränder innerhalb einer 128×128 großen Quelle. Exakte Farb-Pixelgrenzen schließen außerdem geglättete Kanten aus. Prüfe Quellleerraum und zugewiesenes Seitenverhältnis separat.

Macht das transparente Loch im Logo die Karte transparent? Das Loch lässt den Kartenhintergrund durchscheinen. Unser cremefarbener Hintergrund ist undurchsichtig, deshalb hat der PNG-Pixel an der Öffnung Alpha 255. Teste einen transparenten Kartenhintergrund separat, wenn deine Ausgabe ihn benötigt.

Gibt Satori das PNG zurück? Diese Vorlage fordert von Satori eine SVG-Zeichenfolge an und rendert sie anschließend mit resvg-js als PNG. Halte die Stufen getrennt, damit du Layout und Rasterausgabe unabhängig prüfen kannst.

Quellen

1. Satori-Dokumentation zu Bildern, Layout und Schriften – Bildabmessungen, eigenständige Eingaben, Standard-SVG-Ausgabe und unterstützter HTML/CSS-Umfang.
2. Satori-Release 0.35.0 – Die festgelegte Version des ursprünglichen Beispiels.
3. SVG-image-Element – SVG-Bilder können andere SVG-Dateien referenzieren.
4. Node-Buffer-Kodierungs-API – Die Base64-Kodierung der Vorlage.
5. resvg-js verwenden – Die separate Renderingstufe von SVG zu PNG.
6. Abel-Schriftlizenz – Ursprung, Hinweis und Weitergabelizenz der Schrift.

Für dein eigenes PNG- oder JPG-Logo bereite mit PerfectVector eine SVG-Masterdatei vor und prüfe Umriss und innere Öffnungen. Behalte die Masterdatei und prüfe dann ihre Platzierung im Karten-SVG und im ausgelieferten PNG in den vorgesehenen Größen.