> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Logo SVG w Satori: zachowaj grafikę na karcie marki > Osadź logo SVG w karcie Satori z jawnymi wymiarami i samowystarczalnymi danymi obrazu. Sprawdź zagnieżdżoną grafikę i wyrenderuj osobny PNG do przekazania. Source: https://perfectvector.com/pl/blog/satori-svg-logo Language: pl Author: Irene Kim Published: 2026-10-05T08:00:00+09:00 Updated: 2026-10-05T08:00:00+09:00 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](https://github.com/vercel/satori#images) 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 | Plik | Co zawiera | Co w nim zmieniać | | ------------------- | ----------------------------------------- | ------------------------------------------ | | Oryginalny SVG logo | Geometrię znaku i otwór | Kształt, kolor, granice źródła | | SVG karty Satori | Układ karty, litery i osadzony obraz logo | Prostokąt grafiki, położenie i treść karty | | Wyrenderowany PNG | Piksele przekazywanej karty | Wygenerować ponownie po zmianie źródła | SVG `` może odwoływać się do innego SVG, jak wyjaśnia [opis image MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/image). 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](https://perfectvector.com/pl/blog/svg-contains-raster-image). **Zachowaj wzorzec obok karty** ![Schemat koncepcyjny pustego wzorcowego rombu i kopii umieszczonych w różnych rozmiarach na prostych kartach marki](https://perfectvector.com/blog/satori-svg-logo/master-and-card.webp) *Ilustracja: zachowaj edytowalną grafikę oddzielnie od kompozycji karty. Kontrola źródła i wyniku poniżej pochodzi z niezależnie przygotowanego przykładu Satori, a nie z tego wygenerowanego schematu.* ## Kompletny przykład lokalny Ten przykład używa standardowego importu z wynikiem SVG z [Satori 0.35.0](https://github.com/vercel/satori/releases/tag/0.35.0) i resvg-js 2.6.2. W pustym folderze roboczym zainstaluj przypięte pakiety: ```bash 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](https://github.com/google/fonts/tree/main/ofl/abel). Abel korzysta z [SIL Open Font License 1.1](https://raw.githubusercontent.com/google/fonts/main/ofl/abel/OFL.txt); 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. ```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')` koduje utworzone bajty SVG UTF-8 przez [API kodowania Buffer Node](https://nodejs.org/api/buffer.html#buffers-and-character-encodings). 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](https://github.com/thx/resvg-js#basic-usage). 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 `` i dwa zewnętrzne elementy ``. 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 `` w tym uruchomieniu. | Kontrola | Prostokąt grafiki 80×80 | Prostokąt grafiki 160×160 | | --------------------------------------------------------- | -------------------------- | ------------------------- | | Wymiary karty | 600×320 | 600×320 | | Położenie obrazu zewnętrznego | x24, y64 | x24, y64 | | Osadzony SVG | Oryginalny wzorzec 128×128 | Te same bajty wzorca | | Granice PNG dokładnego jednolitego koloru morskozielonego | 68×68 pikseli | 138×138 pikseli | | Piksel karty w środku otworu | Kremowy, alfa 255 | Kremowy, alfa 255 | 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](https://perfectvector.com/pl/blog/resvg-svg-fonts) opisuje oddzielny proces renderowania aktywnego tekstu SVG. [Dokumentacja HTML i CSS Satori](https://github.com/vercel/satori#html-elements) 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](https://perfectvector.com/pl/vectorize-logo), 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](https://perfectvector.com/pl/blog/what-is-image-vectorization) 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](https://perfectvector.com/pl/blog/sharp-svg-to-png) 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](https://github.com/vercel/satori) — wymiary obrazów, samowystarczalne wejścia, standardowy wynik SVG i zakres HTML/CSS. 2. [Wydanie Satori 0.35.0](https://github.com/vercel/satori/releases/tag/0.35.0) — przypięta wersja użyta w oryginalnym przykładzie. 3. [Element image SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/image) — obrazy SVG mogą odwoływać się do innych SVG. 4. [API kodowania Buffer Node](https://nodejs.org/api/buffer.html#buffers-and-character-encodings) — operacja kodowania base64 w przykładzie. 5. [Użycie resvg-js](https://github.com/thx/resvg-js) — oddzielny etap renderowania SVG do PNG. 6. [Licencja fontu Abel](https://raw.githubusercontent.com/google/fonts/main/ofl/abel/OFL.txt) — pochodzenie fontu, informacja i licencja redystrybucji. *** Dla własnego logo PNG lub JPG [przygotuj wzorzec SVG w PerfectVector](https://perfectvector.com/pl/vectorize-logo) 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. ## Explore - [Read the HTML article](https://perfectvector.com/pl/blog/satori-svg-logo) - [Ikony SVG MapLibre: sprawdź piksele i rozmiar symbolu](https://perfectvector.com/pl/blog/maplibre-svg-symbol-image.md) - [Obrazy SVG w p5.js: wczytaj, skaluj i zachowaj źródło](https://perfectvector.com/pl/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)