Logos SVG no Satori: preserve a arte no cartão da marca

Para colocar um logotipo SVG em um cartão Satori, passe-o como origem de imagem, defina largura e altura da imagem e mantenha o SVG original junto do cartão gerado. No exemplo abaixo, um SVG base64 se torna uma imagem aninhada na saída do Satori. Não se torna uma nova coleção de caminhos editáveis do logo no cartão externo.

O Satori cria SVG a partir de um conjunto limitado de HTML e CSS. Sua orientação oficial sobre imagens recomenda dimensões explícitas e dados de imagem independentes quando um renderizador posterior produzirá PNG. Isso dá a este trabalho duas saídas separadas: um cartão SVG composto e uma cópia raster de entrega.

Mantenha três arquivos com tarefas diferentes

Um <image> SVG pode referenciar outro SVG, como explica a referência de image da MDN. Portanto, um elemento de imagem não significa automaticamente que a arte incorporada é raster. Examine seu tipo de dados e conteúdo decodificado antes de diagnosticar o cartão com a lista mais ampla de imagens raster em SVG.

Guarde o original junto do cartão

Um exemplo local completo

Este exemplo usa a importação padrão de saída SVG do Satori 0.35.0 e resvg-js 2.6.2. Em uma pasta de trabalho vazia, instale os pacotes fixados:

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

Crie uma pasta fonts e baixe Abel-Regular.ttf e OFL.txt do diretório Abel do Google Fonts. Abel usa a SIL Open Font License 1.1; mantenha o aviso e a licença acompanhantes ao distribuir a fonte com este exemplo.

Salve o conteúdo a seguir como starter.mjs e execute node starter.mjs. Ele fornece a fonte ao Satori, cria um losango vazado e faz dois cartões 600×320 com caixas de arte de 80×80 e 160×160. URLs de arquivo mantêm os caminhos da fonte e da saída relativos ao 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 os bytes UTF-8 do SVG criado usando a API de codificação Buffer do Node. O prefixo data:image/svg+xml;base64, identifica o conteúdo. Ele muda a representação de transporte, não a geometria do logotipo.

A chamada do Satori retorna o SVG do cartão. A linha seguinte passa esse SVG ao renderizador PNG resvg-js separado. O exemplo não tem URL de imagem remota; lê a fonte local antes de renderizar. Teste separadamente seu próprio comportamento de busca remota ou implantação.

O que as duas chamadas reais produziram

Executamos exatamente este exemplo com os pacotes fixados, examinamos os dois SVGs de saída e abrimos cada SVG e PNG em um navegador. Os quatro arquivos de cartão carregaram a 600×320. As letras ficaram na mesma posição enquanto a caixa do emblema dobrou de tamanho.

Cada cartão continha um <image> externo e dois elementos <path> externos. Os dois caminhos representavam as letras; não eram os contornos externo e interno do losango. Decodificar os dados base64 da imagem recuperou os bytes exatos do SVG original: um caminho, zero elementos de imagem e a mesma definição de losango vazado. O cartão não tinha elementos <text> ativos nesta execução.

As linhas de limites de pintura contam pixels que correspondem exatamente à cor verde-petróleo sólida do emblema. Excluem bordas com antisserrilhamento. Não são as dimensões do retângulo da imagem: o losango original vai das coordenadas de origem 8 a 120, portanto sua extensão matemática seria escalada para 70 ou 140 unidades nessas caixas. Os limites medidos de cor sólida foram um pouco menores.

O centro do emblema original era transparente, com alfa 0 quando renderizado sozinho. Em cada PNG final do cartão, a abertura mostrou o fundo creme opaco: RGBA 246,242,232,255. Uma abertura visível e um pixel transparente no cartão final são requisitos diferentes. Se precisa de fundo transparente na entrega, mude o fundo do cartão e examine o alfa resultante separadamente.

São duas chamadas usando um emblema original em dois tamanhos. Não estabelecem que todo recurso SVG funciona, que trabalhos repetidos de imagens remotas estão resolvidos ou que todos os destinos renderizam o cartão de forma idêntica.

Mude a caixa da arte sem perder a origem

Para seu próprio logo, substitua a string logo por um SVG independente ou leia o arquivo original antes de codificá-lo. Confira primeiro viewBox, largura, altura e abertura. Espaço vazio extra nesses limites pode deixar o logo visível menor que a caixa atribuída no cartão.

Defina as duas dimensões da imagem para corresponder à proporção pretendida. Nossa origem é quadrada, assim como as duas caixas; a imagem de saída usou preserveAspectRatio="none", o que não causou mudança de proporção aqui. Este arquivo de teste não verifica um logo retangular forçado em um espaço quadrado. Mude uma variável de layout por vez e examine o SVG real e o PNG de entrega.

Mantenha as letras fora do logo incorporado quando quiser mudá-las de forma independente. O texto do cartão deste exemplo vira caminhos no SVG entregue, mas as palavras continuam editáveis no script. Entrada de fonte, entrada de arte e saída composta têm tarefas diferentes; o passo a passo de fontes no resvg cobre um fluxo separado de renderização de texto SVG ativo.

A documentação de HTML e CSS do Satori descreve o subconjunto suportado e seus limites. Uma captura no navegador da sua página existente não é uma promessa de que esse mecanismo de layout a reproduzirá exatamente. Comece com um cartão pequeno e a importação comum de satori e acrescente as propriedades de que seu design realmente precisa.

Prepare um logo que começa em pixels

Se seu único logotipo é PNG ou JPG e você precisa de contornos editáveis, prepare um logo SVG com o PerfectVector, examine a silhueta e as aberturas internas e mantenha esse SVG limpo como original mestre. Depois incorpore-o ao cartão e verifique os dois tamanhos de arte e o PNG final. A vetorização prepara a arte; o Satori faz a composição do cartão. Um SVG limpo existente pode ir direto à etapa de incorporação. O guia de vetorização explica a distinção entre origem e saída.

Mantenha o original, o script e as fontes de entrada depois de entregar o PNG. Se usar outra etapa de rasterização, verifique seu dimensionamento separadamente; o exemplo SVG para PNG com Sharp cobre as dimensões desse renderizador.

Perguntas frequentes

Uma imagem SVG vira caminhos editáveis no cartão Satori? Neste exemplo, o logo continua sendo uma imagem SVG aninhada. Sua origem original de um caminho é preservada nos dados da imagem; os caminhos externos do cartão são letras. Mantenha o original para editar a geometria.

Por que o logo visível é menor que sua largura e altura? A caixa de imagem inclui os limites da origem. Nosso losango deixa margens dentro de uma origem 128×128, e limites de pixels de cor exata também excluem bordas com antisserrilhamento. Examine separadamente o espaço vazio da origem e a proporção atribuída.

O furo transparente do logo torna o cartão transparente? O furo deixa o fundo do cartão aparecer. Nosso fundo creme é opaco, portanto o pixel PNG na abertura tem alfa 255. Teste um fundo transparente do cartão separadamente se sua entrega exigir isso.

O Satori retorna o PNG? Este exemplo pede ao Satori uma string SVG e depois a renderiza em PNG com resvg-js. Mantenha essas etapas separadas para examinar layout e entrega raster independentemente.

Fontes

1. Documentação de imagens, layout e fontes do Satori — dimensões de imagem, entradas independentes, saída SVG padrão e escopo de HTML/CSS suportado.
2. Lançamento Satori 0.35.0 — versão fixada usada no exemplo original.
3. Elemento image SVG — imagens SVG podem referenciar outros arquivos SVG.
4. API de codificação Buffer do Node — operação de codificação base64 do exemplo.
5. Uso do resvg-js — etapa separada de renderização de SVG para PNG.
6. Licença da fonte Abel — origem, aviso e licença de redistribuição da fonte.

Para seu próprio logo PNG ou JPG, prepare um original SVG com o PerfectVector e examine seu contorno e aberturas internas. Mantenha o original e confira sua posição no cartão SVG e no PNG entregue nos tamanhos que pretende usar.