Logo SVG Satori: Simpan Gambar dalam Kartu Bermerek

Untuk menempatkan logo SVG dalam kartu Satori, teruskan sebagai sumber gambar, tetapkan lebar dan tinggi gambar, serta simpan SVG asli bersama kartu yang dihasilkan. Dalam contoh di bawah, SVG base64 menjadi gambar bersarang dalam keluaran Satori. Logo tidak menjadi kumpulan path baru yang bisa diedit di dalam kartu luar.

Satori membuat SVG dari kumpulan HTML dan CSS yang terbatas. Panduan gambar resminya merekomendasikan dimensi eksplisit dan data gambar mandiri ketika renderer berikutnya akan menghasilkan PNG. Dengan demikian, pekerjaan ini memiliki dua keluaran terpisah: kartu SVG hasil komposisi dan salinan raster untuk penyerahan.

Simpan tiga berkas dengan tugas berbeda

SVG <image> dapat merujuk SVG lain, seperti dijelaskan referensi image MDN. Karena itu, elemen image tidak otomatis berarti gambar tertanam berupa raster. Periksa jenis data dan isinya setelah dekode sebelum mendiagnosis kartu dengan daftar periksa gambar raster SVG yang lebih luas.

Simpan master bersama kartu

Contoh lokal yang lengkap

Kode awal ini memakai impor keluaran SVG standar dari Satori 0.35.0 dan resvg-js 2.6.2. Dalam folder kerja kosong, instal paket versi terkunci:

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

Buat folder fonts dan unduh Abel-Regular.ttf serta OFL.txt dari direktori Abel Google Fonts. Abel berlisensi SIL Open Font License 1.1; pertahankan pemberitahuan dan lisensi pendamping saat mendistribusikan font bersama contoh ini.

Simpan kode berikut sebagai starter.mjs dan jalankan node starter.mjs. Kode menyediakan font kepada Satori, membuat wajik berlubang, dan membuat dua kartu 600×320 dengan kotak gambar 80×80 dan 160×160. URL berkas menjaga jalur font serta keluaran relatif terhadap skrip.

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') mengodekan byte SVG UTF-8 yang dibuat memakai API pengodean Buffer Node. Awalan data:image/svg+xml;base64, mengidentifikasi kontennya. Ini mengubah representasi transportasi, bukan geometri logo.

Panggilan Satori mengembalikan SVG kartu. Baris berikutnya meneruskan SVG itu ke renderer PNG resvg-js terpisah. Kode awal tidak memiliki URL gambar jarak jauh; kode membaca font lokal sebelum merender. Uji perilaku pengambilan jarak jauh atau penerapan Anda sendiri secara terpisah.

Hasil dari dua panggilan sebenarnya

Kami menjalankan kode awal ini persis dengan paket versi terkunci, memeriksa kedua SVG keluaran, dan membuka setiap SVG serta PNG di peramban. Keempat berkas kartu dimuat pada 600×320. Tulisan tetap pada posisi yang sama sementara ukuran kotak lambang menjadi dua kali lipat.

Setiap kartu berisi satu <image> luar dan dua elemen <path> luar. Kedua path mewakili tulisan; bukan kontur luar dan dalam wajik. Mendekode data base64 gambar memulihkan byte SVG asli secara persis: satu path, nol elemen image, dan definisi wajik berlubang yang sama. Kartu tidak memiliki elemen <text> hidup dalam eksekusi ini.

Baris batas pewarnaan menghitung piksel yang sama persis dengan warna hijau kebiruan solid lambang. Baris itu mengecualikan tepi ber-antialias. Itu bukan dimensi persegi panjang gambar: wajik asli membentang dari koordinat sumber 8 hingga 120, sehingga jangkauan matematisnya akan berskala menjadi 70 atau 140 satuan dalam kotak ini. Batas warna solid yang diukur sedikit lebih kecil.

Bagian tengah lambang asli transparan, dengan alfa 0 saat dirender sendiri. Dalam setiap PNG kartu akhir, bukaan itu menampilkan latar krem buram: RGBA 246,242,232,255. Bukaan yang terlihat dan piksel kartu akhir transparan merupakan persyaratan berbeda. Jika membutuhkan latar penyerahan transparan, ubah latar kartu dan periksa alfa hasilnya secara terpisah.

Ini dua panggilan yang memakai satu lambang asli pada dua ukuran. Hasilnya tidak membuktikan setiap fitur SVG berfungsi, pekerjaan gambar jarak jauh berulang telah diperbaiki, atau semua tujuan merender kartu secara identik.

Ubah kotak gambar tanpa kehilangan sumber

Untuk logo sendiri, ganti string logo dengan SVG mandiri atau baca berkas master sebelum mengodekannya. Periksa viewBox, lebar, tinggi, dan bukaannya terlebih dahulu. Ruang kosong tambahan dalam batas tersebut dapat membuat logo terlihat lebih kecil daripada kotak kartu yang ditetapkan.

Tetapkan kedua dimensi gambar sesuai rasio aspek yang dimaksud. Sumber kami persegi dan kedua kotaknya persegi; gambar keluaran memakai preserveAspectRatio="none", yang tidak mengubah rasio aspek di sini. Contoh uji ini tidak menguji logo persegi panjang yang dipaksa masuk slot persegi. Ubah satu variabel tata letak setiap kali, lalu periksa SVG sebenarnya dan PNG penyerahannya.

Pisahkan tulisan dari logo tertanam jika ingin mengubahnya secara independen. Teks kartu contoh ini menjadi path dalam SVG yang diserahkan, tetapi kata-katanya tetap bisa diedit dalam skrip. Masukan font, masukan gambar, dan keluaran komposisi memiliki tugas berbeda; panduan font resvg membahas alur rendering teks SVG hidup yang terpisah.

Dokumentasi HTML dan CSS Satori menjelaskan bagian yang didukung dan batasnya. Tangkapan layar peramban dari halaman yang ada bukan janji bahwa mesin tata letak ini akan mereproduksinya persis. Mulailah dengan kartu kecil dan impor satori biasa, lalu tambahkan properti yang benar-benar dibutuhkan desain.

Siapkan logo yang berawal dari piksel

Jika satu-satunya logo adalah PNG atau JPG dan Anda membutuhkan kontur yang bisa diedit, siapkan logo SVG dengan PerfectVector, periksa siluet dan bukaan dalam, lalu simpan SVG bersih sebagai master. Kemudian sematkan dalam kartu dan verifikasi kedua ukuran gambar serta PNG akhir. Vektorisasi menyiapkan gambar; Satori menangani komposisi kartu. SVG bersih yang sudah ada bisa langsung ke tahap penyematan. Panduan vektorisasi menjelaskan perbedaan sumber dan keluaran.

Simpan master, skrip, dan masukan font setelah menyerahkan PNG. Jika memakai tahap rasterisasi berbeda, verifikasi ukurannya secara terpisah; contoh SVG-ke-PNG Sharp membahas dimensi renderer tersebut.

Pertanyaan umum

Apakah gambar SVG menjadi path yang bisa diedit di kartu Satori? Dalam contoh ini, logo tetap berupa gambar SVG bersarang. Sumber aslinya yang memiliki satu path dipertahankan di dalam data gambar; path kartu luar adalah tulisan. Simpan master asli untuk pengeditan geometri.

Mengapa logo yang terlihat lebih kecil daripada lebar dan tingginya? Kotak gambar menyertakan batas sumber. Wajik kami menyisakan margin di dalam sumber 128×128, dan batas piksel warna persis juga mengecualikan tepi ber-antialias. Periksa ruang kosong sumber dan rasio aspek yang ditetapkan secara terpisah.

Apakah lubang transparan logo membuat kartu transparan? Lubang membuat latar kartu terlihat. Latar krem kami buram, sehingga piksel PNG pada bukaan memiliki alfa 255. Uji latar kartu transparan secara terpisah jika penyerahan membutuhkannya.

Apakah Satori mengembalikan PNG? Kode awal ini meminta string SVG dari Satori, lalu merender string itu menjadi PNG dengan resvg-js. Pisahkan tahap tersebut agar Anda bisa memeriksa tata letak dan penyerahan raster secara independen.

Sumber

1. Dokumentasi gambar, tata letak, dan font Satori — dimensi gambar, masukan mandiri, keluaran SVG standar, dan cakupan HTML/CSS yang didukung.
2. Rilis Satori 0.35.0 — versi terkunci yang dipakai dalam contoh asli.
3. Elemen image SVG — gambar SVG dapat merujuk berkas SVG lain.
4. API pengodean Buffer Node — operasi pengodean base64 kode awal.
5. Penggunaan resvg-js — tahap rendering SVG-ke-PNG terpisah.
6. Lisensi font Abel — asal font, pemberitahuan, dan lisensi distribusi ulang.

Untuk logo PNG atau JPG Anda sendiri, siapkan master SVG dengan PerfectVector dan periksa kontur serta bukaan dalamnya. Simpan master, lalu periksa penempatannya dalam SVG kartu dan PNG yang diserahkan pada ukuran yang akan digunakan.