Logos SVG Satori : garder le dessin dans une carte de marque

Pour placer un logo SVG dans une carte Satori, fournis-le comme source d’image, fixe la largeur et la hauteur de l’image et garde le SVG original à côté de la carte générée. Dans l’exemple ci-dessous, un SVG en base64 devient une image imbriquée dans la sortie de Satori. Il ne devient pas un nouvel ensemble de chemins de logo modifiables dans la carte extérieure.

Satori crée du SVG à partir d’un ensemble limité de HTML et de CSS. Ses recommandations officielles pour les images préconisent des dimensions explicites et des données d’image autonomes lorsqu’un moteur de rendu ultérieur produira un PNG. Cela donne deux sorties distinctes : une carte SVG composée et une copie matricielle à livrer.

Garde trois fichiers avec des rôles différents

Un <image> SVG peut référencer un autre SVG, comme l’explique la référence de l’élément image de MDN. Un élément image ne signifie donc pas automatiquement que le dessin intégré est matriciel. Examine son type de données et son contenu décodé avant de diagnostiquer la carte avec la liste générale de vérification des images matricielles dans les SVG.

Garde le maître à côté de la carte

Un exemple local complet

Cette base utilise l’import standard à sortie SVG de Satori 0.35.0 et resvg-js 2.6.2. Dans un dossier de travail vide, installe les paquets aux versions fixes :

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

Crée un dossier fonts et télécharge Abel-Regular.ttf et OFL.txt depuis le répertoire Abel de Google Fonts. Abel est sous SIL Open Font License 1.1 ; conserve la notice et la licence jointes si tu distribues la police avec cet exemple.

Enregistre ce qui suit sous starter.mjs et exécute node starter.mjs. Il fournit la police à Satori, crée un losange creux et produit deux cartes de 600×320 avec des cadres de dessin de 80×80 et 160×160. Les URL de fichier gardent les chemins de police et de sortie relatifs au 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') encode les octets UTF-8 du SVG créé à l’aide de l’API d’encodage Buffer de Node. Le préfixe data:image/svg+xml;base64, identifie le contenu. Cela change la représentation pour le transport, pas la géométrie du logo.

L’appel de Satori renvoie le SVG de la carte. La ligne suivante fournit ce SVG au moteur de rendu PNG resvg-js, qui est distinct. La base ne possède aucune URL d’image distante ; elle lit la police locale avant le rendu. Teste ton propre comportement de récupération distante ou de déploiement séparément.

Ce que les deux appels réels ont produit

Nous avons exécuté exactement cette base avec les paquets aux versions fixes, examiné les deux SVG de sortie et ouvert chaque SVG et PNG dans un navigateur. Les quatre fichiers de carte se chargeaient à 600×320. Le lettrage restait au même endroit tandis que le cadre de l’emblème doublait de taille.

Chaque carte contenait un <image> extérieur et deux éléments <path> extérieurs. Les deux chemins représentaient le lettrage ; ce n’étaient pas les contours extérieur et intérieur du losange. Décoder les données base64 de l’image a récupéré les octets exacts du SVG original : un chemin, aucun élément image et la même définition de losange creux. La carte n’avait aucun élément <text> actif lors de cette exécution.

Les lignes de limites peintes comptent les pixels qui correspondent à la couleur bleu-vert unie exacte de l’emblème. Elles excluent les bords anticrénelés. Ce ne sont pas les dimensions du rectangle d’image : le losange original s’étend des coordonnées sources 8 à 120, et son étendue mathématique serait donc mise à l’échelle à 70 ou 140 unités dans ces cadres. Les limites mesurées de couleur unie étaient légèrement plus petites.

Le centre de l’emblème original était transparent, avec un alpha de 0 lorsqu’il était rendu seul. Dans chaque PNG final de carte, cette ouverture montrait le fond crème opaque : RGBA 246,242,232,255. Une ouverture visible et un pixel transparent dans la carte finale sont des exigences différentes. Si tu as besoin d’un fond de livraison transparent, change le fond de carte et examine séparément l’alpha obtenu.

Ce sont deux appels utilisant un emblème original à deux tailles. Ils n’établissent pas que toutes les fonctions SVG marchent, que les traitements répétés d’images distantes sont corrigés ou que toutes les destinations rendent la carte de façon identique.

Change le cadre du dessin sans perdre la source

Pour ton logo, remplace la chaîne logo par un SVG autonome ou lis ton fichier maître avant de l’encoder. Vérifie d’abord son viewBox, sa largeur, sa hauteur et son ouverture. Un espace vide supplémentaire dans ces limites peut rendre le logo visible plus petit que le cadre qui lui est attribué dans la carte.

Fixe les deux dimensions d’image selon les proportions voulues. Notre source et les deux cadres sont carrés ; l’image de sortie utilisait preserveAspectRatio="none", ce qui ne changeait pas les proportions ici. Ce fichier de test ne teste pas un logo rectangulaire forcé dans un emplacement carré. Change une variable de mise en page à la fois, puis examine le SVG réel et le PNG de livraison.

Garde le lettrage hors du logo intégré lorsque tu veux le modifier indépendamment. Le texte de carte de cet exemple devient des chemins dans le SVG livré, mais les mots restent modifiables dans le script. L’entrée de police, l’entrée graphique et la sortie composée ont des rôles différents ; le tutoriel des polices resvg couvre un autre processus de rendu de texte SVG actif.

La documentation HTML et CSS de Satori décrit son sous-ensemble pris en charge et ses limites. Une capture de navigateur de ta page existante ne promet pas que ce moteur de mise en page la reproduira exactement. Commence avec une petite carte et l’import habituel de satori, puis ajoute les propriétés dont ton dessin a réellement besoin.

Prépare un logo qui commence en pixels

Si ton seul logo est un PNG ou JPG et que tu as besoin de contours modifiables, prépare un logo SVG avec PerfectVector, examine la silhouette et les ouvertures intérieures, puis garde ce SVG propre comme maître. Intègre-le ensuite à ta carte et vérifie les deux tailles de dessin ainsi que le PNG final. La vectorisation prépare le dessin ; Satori gère la composition de la carte. Un SVG propre existant peut passer directement à l’intégration. Le guide de vectorisation explique la distinction entre source et sortie.

Garde le maître, le script et les polices d’entrée après livraison du PNG. Si tu utilises une autre étape de pixellisation, vérifie son dimensionnement séparément ; l’exemple SVG vers PNG avec Sharp couvre les dimensions de ce moteur de rendu.

Questions fréquentes

Une image SVG devient-elle des chemins modifiables dans la carte Satori ? Dans cet exemple, le logo reste une image SVG imbriquée. Sa source originale à un chemin est préservée dans les données d’image ; les chemins extérieurs de la carte sont du lettrage. Garde le maître original pour les modifications géométriques.

Pourquoi le logo visible est-il plus petit que sa largeur et sa hauteur ? Le cadre d’image inclut les limites source. Notre losange garde des marges dans une source de 128×128, et les limites de pixels de couleur exacte excluent aussi les bords anticrénelés. Examine séparément les espaces vides de la source et les proportions attribuées.

Le trou transparent du logo rend-il la carte transparente ? Le trou laisse apparaître le fond de carte. Notre fond crème est opaque : le pixel PNG de l’ouverture a donc un alpha de 255. Teste séparément un fond de carte transparent si ta livraison l’exige.

Satori renvoie-t-il le PNG ? Cette base demande une chaîne SVG à Satori, puis la rend en PNG avec resvg-js. Garde ces étapes séparées pour examiner indépendamment la mise en page et la livraison matricielle.

Sources

1. Documentation des images, de la mise en page et des polices Satori — Dimensions d’image, entrées autonomes, sortie SVG standard et périmètre HTML/CSS pris en charge.
2. Version Satori 0.35.0 — Version fixe utilisée dans l’exemple original.
3. Élément image SVG — Les images SVG peuvent référencer d’autres fichiers SVG.
4. API d’encodage Buffer de Node — Opération d’encodage base64 de la base.
5. Utilisation de resvg-js — Étape distincte de rendu SVG vers PNG.
6. Licence de la police Abel — Origine, notice et licence de redistribution de la police.

Pour ton logo PNG ou JPG, prépare un maître SVG avec PerfectVector et examine son contour et ses ouvertures intérieures. Garde le maître, puis vérifie sa position dans le SVG de la carte et le PNG livré aux tailles prévues.