Logo SVG w Satori: zachowaj grafikę na karcie marki

Aby umieścić logo SVG w karcie Satori, przekaż je jako źródło obrazu, ustaw szerokość i wysokość obrazu oraz zachowaj oryginalny SVG obok wygenerowanej karty. W przykładzie poniżej SVG base64 staje się zagnieżdżonym obrazem w wyniku Satori. Nie staje się nowym zbiorem edytowalnych ścieżek logo w zewnętrznej karcie.

Satori tworzy SVG z ograniczonego zestawu HTML i CSS. Jego oficjalne wskazówki dotyczące obrazów zalecają jawne wymiary i samowystarczalne dane obrazu, gdy późniejszy renderer ma utworzyć PNG. Daje to dwa oddzielne wyniki: skomponowaną kartę SVG i rastrową kopię do przekazania.

Zachowaj trzy pliki o różnych zadaniach

SVG <image> może odwoływać się do innego SVG, jak wyjaśnia opis image MDN. Element obrazu nie oznacza więc automatycznie, że osadzona grafika jest rastrowa. Sprawdź typ danych i zdekodowaną zawartość przed diagnostyką karty za pomocą szerszej listy kontroli rastra w SVG.

Zachowaj wzorzec obok karty

Kompletny przykład lokalny

Ten przykład używa standardowego importu z wynikiem SVG z Satori 0.35.0 i resvg-js 2.6.2. W pustym folderze roboczym zainstaluj przypięte pakiety:

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

Utwórz folder fonts i pobierz Abel-Regular.ttf oraz OFL.txt z katalogu Abel w Google Fonts. Abel korzysta z SIL Open Font License 1.1; zachowaj dołączoną informację i licencję przy rozpowszechnianiu fontu z tym przykładem.

Zapisz poniższy kod jako starter.mjs i uruchom node starter.mjs. Dostarcza font do Satori, tworzy pusty romb oraz dwie karty 600×320 z prostokątami grafiki 80×80 i 160×160. Adresy plików utrzymują ścieżki fontu i wyników względem skryptu.

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') koduje utworzone bajty SVG UTF-8 przez API kodowania Buffer Node. Prefiks data:image/svg+xml;base64, identyfikuje zawartość. Zmienia reprezentację transportową, a nie geometrię logo.

Wywołanie Satori zwraca SVG karty. Następna linia przekazuje go do oddzielnego renderera PNG resvg-js. Przykład nie ma adresu obrazu zdalnego; czyta lokalny font przed renderowaniem. Sprawdź osobno własne pobieranie zdalne lub zachowanie wdrożenia.

Co dały dwa rzeczywiste wywołania

Uruchomiliśmy dokładnie ten przykład z przypiętymi pakietami, sprawdziliśmy oba wynikowe SVG i otworzyliśmy każdy SVG oraz PNG w przeglądarce. Wszystkie cztery pliki kart wczytały się jako 600×320. Litery pozostały w tym samym miejscu, a prostokąt znaku podwoił rozmiar.

Każda karta zawierała jeden zewnętrzny <image> i dwa zewnętrzne elementy <path>. Dwie ścieżki przedstawiały litery; nie były zewnętrznym i wewnętrznym konturem rombu. Zdekodowanie danych base64 obrazu odzyskało dokładne oryginalne bajty SVG: jedną ścieżkę, zero elementów obrazu i tę samą definicję pustego rombu. Karta nie miała aktywnych elementów <text> w tym uruchomieniu.

Wiersze granic malowania liczą piksele dokładnie odpowiadające jednolitemu morskozielonemu kolorowi znaku. Pomijają wygładzone krawędzie. Nie są wymiarami prostokąta obrazu: oryginalny romb rozciąga się od współrzędnej źródła 8 do 120, więc matematyczny zasięg skalowałby się do 70 lub 140 jednostek w tych prostokątach. Zmierzone granice jednolitego koloru były nieco mniejsze.

Środek oryginalnego znaku był przezroczysty, z alfa 0 przy samodzielnym renderowaniu. W każdym końcowym PNG karty otwór pokazywał nieprzezroczyste kremowe tło: RGBA 246,242,232,255. Widoczny otwór i przezroczysty piksel końcowej karty to różne wymagania. Jeśli potrzebujesz przezroczystego tła do przekazania, zmień tło karty i osobno sprawdź wynikowe alfa.

To dwa wywołania z jednym oryginalnym znakiem w dwóch rozmiarach. Nie ustalają, że każda funkcja SVG działa, że rozwiązano powtarzane zadania z obrazami zdalnymi lub że wszystkie miejsca docelowe renderują kartę identycznie.

Zmień prostokąt grafiki bez utraty źródła

Dla własnego logo zastąp ciąg logo samowystarczalnym SVG lub odczytaj wzorcowy plik przed kodowaniem. Najpierw sprawdź viewBox, szerokość, wysokość i otwór. Nadmiar pustego miejsca w tych granicach może sprawić, że widoczne logo będzie mniejsze niż przypisany prostokąt karty.

Ustaw oba wymiary obrazu zgodnie z zamierzonymi proporcjami. Nasze źródło i oba prostokąty są kwadratowe; wynikowy obraz używał preserveAspectRatio="none", co nie zmieniło tutaj proporcji. Przykład nie testuje prostokątnego logo wymuszonego w kwadratowym polu. Zmieniaj jedną zmienną układu naraz, a potem sprawdź faktyczny SVG i PNG do przekazania.

Zachowaj litery poza osadzonym logo, jeśli chcesz zmieniać je niezależnie. Tekst karty w tym przykładzie staje się ścieżkami w przekazanym SVG, ale słowa pozostają edytowalne w skrypcie. Font wejściowy, grafika wejściowa i wynikowa kompozycja pełnią różne role; poradnik fontów resvg opisuje oddzielny proces renderowania aktywnego tekstu SVG.

Dokumentacja HTML i CSS Satori opisuje obsługiwany podzbiór i ograniczenia. Zrzut istniejącej strony w przeglądarce nie jest obietnicą, że ten silnik układu odtworzy ją dokładnie. Zacznij od małej karty i zwykłego importu satori, a potem dodawaj właściwości faktycznie potrzebne w projekcie.

Przygotuj logo zaczynające się od pikseli

Jeśli jedyne logo to PNG lub JPG i potrzebujesz edytowalnych konturów, przygotuj logo SVG przez PerfectVector, sprawdź sylwetkę i otwory wewnętrzne oraz zachowaj czysty SVG jako wzorzec. Potem osadź go w karcie i sprawdź oba rozmiary grafiki oraz końcowy PNG. Wektoryzacja przygotowuje grafikę; Satori zajmuje się kompozycją karty. Istniejący czysty SVG może przejść od razu do osadzania. Poradnik wektoryzacji wyjaśnia różnicę między źródłem a wynikiem.

Zachowaj wzorzec, skrypt i fonty wejściowe po przekazaniu PNG. Jeśli używasz innego etapu rasteryzacji, zweryfikuj jego wymiary oddzielnie; przykład SVG do PNG przez Sharp opisuje wymiarowanie tego renderera.

Najczęstsze pytania

Czy obraz SVG staje się edytowalnymi ścieżkami w karcie Satori? W tym przykładzie logo pozostaje zagnieżdżonym obrazem SVG. Jego oryginalne jednościeżkowe źródło jest zachowane w danych obrazu; zewnętrzne ścieżki karty są literami. Zachowaj oryginalny wzorzec do edycji geometrii.

Dlaczego widoczne logo jest mniejsze niż jego szerokość i wysokość? Prostokąt obrazu obejmuje granice źródła. Nasz romb pozostawia marginesy wewnątrz źródła 128×128, a granice pikseli dokładnego koloru pomijają wygładzone krawędzie. Sprawdź osobno puste miejsce źródła i przypisane proporcje.

Czy przezroczysty otwór logo czyni kartę przezroczystą? Otwór pozwala zobaczyć tło karty. Nasze kremowe tło jest nieprzezroczyste, więc piksel PNG w otworze ma alfa 255. Osobno przetestuj przezroczyste tło karty, jeśli wymaga go przekazanie.

Czy Satori zwraca PNG? Ten przykład prosi Satori o ciąg SVG, a następnie renderuje go do PNG przez resvg-js. Zachowaj etapy oddzielnie, aby niezależnie sprawdzać układ i rastrowy wynik.

Źródła

1. Dokumentacja obrazów, układu i fontów Satori — wymiary obrazów, samowystarczalne wejścia, standardowy wynik SVG i zakres HTML/CSS.
2. Wydanie Satori 0.35.0 — przypięta wersja użyta w oryginalnym przykładzie.
3. Element image SVG — obrazy SVG mogą odwoływać się do innych SVG.
4. API kodowania Buffer Node — operacja kodowania base64 w przykładzie.
5. Użycie resvg-js — oddzielny etap renderowania SVG do PNG.
6. Licencja fontu Abel — pochodzenie fontu, informacja i licencja redystrybucji.

Dla własnego logo PNG lub JPG przygotuj wzorzec SVG w PerfectVector i sprawdź kontur oraz wewnętrzne otwory. Zachowaj wzorzec, a potem sprawdź jego położenie w SVG karty i przekazanym PNG w zamierzonych rozmiarach.