> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # SVG-Logos in Satori: Grafik in einer Markenkarte erhalten > Bette ein SVG-Logo mit festen Abmessungen und eigenständigen Bilddaten in eine Satori-Karte ein. Prüfe die verschachtelte Grafik und rendere eine separate PNG-Ausgabedatei. Source: https://perfectvector.com/de/blog/satori-svg-logo Language: de Author: Irene Kim Published: 2026-10-05T08:00:00+09:00 Updated: 2026-10-05T08:00:00+09:00 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](https://github.com/vercel/satori#images) 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 | Datei | Was sie enthält | Was du dort änderst | | ----------------------- | ---------------------------------------------------- | ------------------------------------------ | | Ursprüngliches Logo-SVG | Geometrie und Öffnung des Emblems | Form, Farbe, Quellgrenzen | | Satori-Karten-SVG | Kartenlayout, Schrift und ein eingebettetes Logobild | Grafikrahmen, Platzierung und Karteninhalt | | Gerendertes PNG | Pixel der ausgelieferten Karte | Nach Quelländerungen neu erzeugen | Ein SVG-`` kann ein anderes SVG referenzieren, wie [MDNs image-Referenz](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/image) 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](https://perfectvector.com/de/blog/svg-contains-raster-image) diagnostizierst. **Masterdatei neben der Karte behalten** ![Schematische Illustration einer hohlen Rauten-Masterdatei und unterschiedlich groß in einfachen Markenkarten platzierten Kopien](https://perfectvector.com/blog/satori-svg-logo/master-and-card.webp) *Illustration: Bewahre bearbeitbare Grafik getrennt von der Kartenkomposition auf. Die folgende Quell- und Ausgabeprüfung stammt aus einem unabhängig erstellten Satori-Beispiel, nicht aus diesem erzeugten Diagramm.* ## Ein vollständiges lokales Beispiel Diese Vorlage verwendet den Standardimport mit SVG-Ausgabe aus [Satori 0.35.0](https://github.com/vercel/satori/releases/tag/0.35.0) und resvg-js 2.6.2. Installiere in einem leeren Arbeitsordner die Pakete mit festgelegten Versionen: ```bash 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](https://github.com/google/fonts/tree/main/ofl/abel) herunter. Abel steht unter der [SIL Open Font License 1.1](https://raw.githubusercontent.com/google/fonts/main/ofl/abel/OFL.txt). 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. ```js import { readFile, writeFile } from 'node:fs/promises'; import satori from 'satori'; import { Resvg } from '@resvg/resvg-js'; const logo = ``; 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](https://nodejs.org/api/buffer.html#buffers-and-character-encodings). 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](https://github.com/thx/resvg-js#basic-usage). 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 `` und zwei äußere ``-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 ``-Elemente. | Prüfung | Grafikrahmen 80×80 | Grafikrahmen 160×160 | | --------------------------------------------------- | ------------------------------------- | --------------------- | | Kartenabmessungen | 600×320 | 600×320 | | Platzierung des äußeren Bilds | x24, y64 | x24, y64 | | Eingebettetes SVG | Ursprüngliche Masterdatei von 128×128 | Dieselben Masterbytes | | PNG-Grenzen der exakten einheitlichen Blaugrünfarbe | 68×68 Pixel | 138×138 Pixel | | Kartenpixel in der Öffnungsmitte | Creme, Alpha 255 | Creme, Alpha 255 | 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](https://perfectvector.com/de/blog/resvg-svg-fonts) behandelt einen separaten Renderingablauf mit aktivem SVG-Text. Satoris [HTML- und CSS-Dokumentation](https://github.com/vercel/satori#html-elements) 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](https://perfectvector.com/de/vectorize-logo). 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](https://perfectvector.com/de/blog/what-is-image-vectorization) 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](https://perfectvector.com/de/blog/sharp-svg-to-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](https://github.com/vercel/satori) – Bildabmessungen, eigenständige Eingaben, Standard-SVG-Ausgabe und unterstützter HTML/CSS-Umfang. 2. [Satori-Release 0.35.0](https://github.com/vercel/satori/releases/tag/0.35.0) – Die festgelegte Version des ursprünglichen Beispiels. 3. [SVG-image-Element](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/image) – SVG-Bilder können andere SVG-Dateien referenzieren. 4. [Node-Buffer-Kodierungs-API](https://nodejs.org/api/buffer.html#buffers-and-character-encodings) – Die Base64-Kodierung der Vorlage. 5. [resvg-js verwenden](https://github.com/thx/resvg-js) – Die separate Renderingstufe von SVG zu PNG. 6. [Abel-Schriftlizenz](https://raw.githubusercontent.com/google/fonts/main/ofl/abel/OFL.txt) – Ursprung, Hinweis und Weitergabelizenz der Schrift. *** Für dein eigenes PNG- oder JPG-Logo [bereite mit PerfectVector eine SVG-Masterdatei vor](https://perfectvector.com/de/vectorize-logo) 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. ## Explore - [Read the HTML article](https://perfectvector.com/de/blog/satori-svg-logo) - [SVG-Icons in MapLibre: Pixel und Symbolgröße prüfen](https://perfectvector.com/de/blog/maplibre-svg-symbol-image.md) - [SVG-Bilder in p5.js: Laden, skalieren und Quelle behalten](https://perfectvector.com/de/blog/p5js-svg-artwork.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)