Loghi SVG in Satori: conserva la grafica nella card

Per inserire un logo SVG in una card Satori, passalo come sorgente immagine, imposta larghezza e altezza dell'immagine e conserva l'SVG originale insieme alla card generata. Nell'esempio qui sotto, un SVG in base64 diventa un'immagine annidata nell'uscita di Satori. Non diventa una nuova raccolta di tracciati del logo modificabili nella card esterna.

Satori crea SVG da un insieme limitato di HTML e CSS. Le sue indicazioni ufficiali sulle immagini consigliano dimensioni esplicite e dati immagine autonomi quando un renderer successivo produrrà un PNG. Questo dà al lavoro due uscite separate: una card SVG composta e una copia raster da consegnare.

Conserva tre file con funzioni diverse

Un <image> SVG può fare riferimento a un altro SVG, come spiega la documentazione MDN di image. Un elemento immagine quindi non significa automaticamente che la grafica incorporata sia raster. Esamina il tipo di dati e il contenuto decodificato prima di diagnosticare la card con la più ampia lista di controllo delle immagini raster in SVG.

Conserva il master insieme alla card

Un esempio locale completo

Questo esempio usa l'importazione standard per l'uscita SVG di Satori 0.35.0 e resvg-js 2.6.2. In una cartella di lavoro vuota, installa i pacchetti con le versioni fissate:

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

Crea una cartella fonts e scarica Abel-Regular.ttf e OFL.txt dalla directory Abel di Google Fonts. Abel è distribuito con la SIL Open Font License 1.1; conserva l'avviso e la licenza allegati quando distribuisci il font con questo esempio.

Salva quanto segue come starter.mjs ed esegui node starter.mjs. Fornisce il font a Satori, scrive un rombo forato e crea due card da 600×320 con riquadri della grafica da 80×80 e 160×160. Gli URL dei file mantengono i percorsi del font e delle uscite relativi allo script.

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') codifica i byte UTF-8 dell'SVG scritto usando l'API di codifica Buffer di Node. Il prefisso data:image/svg+xml;base64, identifica il contenuto. Cambia la rappresentazione per il trasporto, non la geometria del logo.

La chiamata a Satori restituisce l'SVG della card. La riga successiva passa quell'SVG al renderer PNG resvg-js separato. L'esempio non ha URL di immagini remote; legge il font locale prima del rendering. Prova separatamente il comportamento del tuo recupero remoto o della distribuzione.

Che cosa hanno prodotto le due chiamate effettive

Abbiamo eseguito esattamente questo esempio con i pacchetti fissati, esaminato entrambi gli SVG di uscita e aperto ciascun SVG e PNG in un browser. Tutti e quattro i file delle card si sono caricati a 600×320. Le scritte sono rimaste nella stessa posizione mentre il riquadro dell'emblema raddoppiava.

Ogni card conteneva un <image> esterno e due elementi <path> esterni. I due tracciati rappresentavano le scritte; non erano i contorni esterno e interno del rombo. Decodificare i dati base64 dell'immagine ha recuperato esattamente i byte originali dell'SVG: un tracciato, zero elementi immagine e la stessa definizione del rombo forato. In questa esecuzione, la card non aveva elementi <text> modificabili.

Le righe dei limiti dipinti contano i pixel che corrispondono all'esatto colore uniforme verde petrolio dell'emblema. Escludono i bordi con antialiasing. Non sono le dimensioni del rettangolo dell'immagine: il rombo originale si estende dalle coordinate sorgente 8 a 120, quindi la sua estensione matematica scalerebbe a 70 o 140 unità dentro questi riquadri. I limiti misurati del colore uniforme erano leggermente più piccoli.

Il centro dell'emblema originale era trasparente, con alfa 0 quando renderizzato da solo. In ogni PNG finale della card, quell'apertura mostrava lo sfondo crema opaco: RGBA 246,242,232,255. Un'apertura visibile e un pixel trasparente nella card finale sono requisiti diversi. Se ti serve uno sfondo di consegna trasparente, cambia lo sfondo della card ed esamina separatamente l'alfa risultante.

Sono due chiamate che usano un emblema originale a due dimensioni. Non dimostrano che ogni funzione SVG funzioni, che i lavori ripetuti con immagini remote siano risolti o che tutte le destinazioni renderizzino la card allo stesso modo.

Cambia il riquadro della grafica senza perdere la sorgente

Per il tuo logo, sostituisci la stringa logo con un SVG autonomo o leggi il file master prima di codificarlo. Controlla prima il suo viewBox, la larghezza, l'altezza e l'apertura. Uno spazio vuoto aggiuntivo dentro quei limiti può rendere il logo visibile più piccolo del riquadro assegnato nella card.

Imposta entrambe le dimensioni dell'immagine in modo che corrispondano alle proporzioni previste. La nostra sorgente è quadrata ed entrambi i riquadri sono quadrati; l'immagine di uscita usava preserveAspectRatio="none", che qui non ha causato modifiche alle proporzioni. Questo campione non prova un logo rettangolare forzato in uno spazio quadrato. Cambia una variabile di layout alla volta, poi esamina l'SVG effettivo e il PNG da consegnare.

Mantieni le scritte fuori dal logo incorporato quando vuoi modificarle indipendentemente. Il testo della card di questo esempio diventa tracciati nell'SVG consegnato, ma le parole rimangono modificabili nello script. Ingresso del font, ingresso della grafica e uscita composta hanno funzioni diverse; la procedura sui font di resvg tratta un flusso separato di rendering del testo SVG modificabile.

La documentazione HTML e CSS di Satori descrive l'insieme supportato e i suoi limiti. Una schermata nel browser della tua pagina esistente non promette che questo motore di layout la riproduca esattamente. Parti da una piccola card e dalla normale importazione satori, poi aggiungi le proprietà di cui il progetto ha davvero bisogno.

Prepara un logo che parte dai pixel

Se il tuo unico logo è un PNG o JPG e ti servono contorni modificabili, prepara un logo SVG con PerfectVector, esamina la sagoma e le aperture interne e conserva quell'SVG pulito come master. Poi incorporalo nella card e verifica entrambe le dimensioni della grafica e il PNG finale. La vettorizzazione prepara la grafica; Satori gestisce la composizione della card. Un SVG pulito esistente può passare direttamente all'incorporamento. La guida alla vettorizzazione spiega la distinzione tra sorgente e uscita.

Conserva il master, lo script e i font di ingresso dopo aver consegnato il PNG. Se usi una fase di rasterizzazione diversa, verificane separatamente il dimensionamento; l'esempio SVG-PNG con Sharp tratta le dimensioni di quel renderer.

Domande frequenti

Un'immagine SVG diventa tracciati modificabili nella card Satori? In questo esempio il logo rimane un'immagine SVG annidata. La sua sorgente originale con un solo tracciato è preservata nei dati immagine; i tracciati esterni della card sono le scritte. Conserva il master originale per le modifiche geometriche.

Perché il logo visibile è più piccolo della sua larghezza e altezza? Il riquadro dell'immagine include i limiti sorgente. Il nostro rombo lascia margini dentro una sorgente 128×128 e i limiti dei pixel di colore esatto escludono anche i bordi con antialiasing. Esamina separatamente lo spazio vuoto sorgente e le proporzioni assegnate.

Il foro trasparente del logo rende trasparente la card? Il foro lascia vedere lo sfondo della card. Il nostro sfondo crema è opaco, quindi il pixel PNG nell'apertura ha alfa 255. Prova separatamente uno sfondo trasparente per la card se la consegna lo richiede.

Satori restituisce il PNG? Questo esempio chiede a Satori una stringa SVG, poi renderizza quella stringa in PNG con resvg-js. Tieni separate le fasi per poter esaminare indipendentemente layout e consegna raster.

Fonti

1. Documentazione Satori su immagini, layout e font — Dimensioni delle immagini, ingressi autonomi, uscita SVG standard e ambito HTML/CSS supportato.
2. Rilascio Satori 0.35.0 — La versione fissata usata nell'esempio originale.
3. Elemento image SVG — Le immagini SVG possono fare riferimento ad altri file SVG.
4. API di codifica Buffer di Node — L'operazione di codifica base64 dell'esempio.
5. Uso di resvg-js — La fase separata di rendering da SVG a PNG.
6. Licenza del font Abel — Origine, avviso e licenza di ridistribuzione del font.

Per il tuo logo PNG o JPG, prepara un master SVG con PerfectVector ed esamina contorno e aperture interne. Conserva il master, poi controlla la sua posizione nell'SVG della card e nel PNG consegnato alle dimensioni che intendi usare.