> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Logo SVG Satori: giữ hình trong thẻ mang thương hiệu > Nhúng logo SVG vào thẻ Satori với kích thước tường minh và dữ liệu ảnh độc lập. Kiểm tra hình lồng bên trong, rồi kết xuất tệp PNG bàn giao riêng. Source: https://perfectvector.com/vi/blog/satori-svg-logo Language: vi Author: Irene Kim Published: 2026-10-05T08:00:00+09:00 Updated: 2026-10-05T08:00:00+09:00 Để đặt logo SVG vào thẻ Satori, truyền nó làm nguồn ảnh, đặt chiều rộng và chiều cao ảnh, đồng thời giữ SVG gốc cạnh thẻ được tạo. Trong ví dụ bên dưới, SVG base64 trở thành ảnh lồng trong đầu ra Satori. Nó không trở thành tập hợp đường dẫn logo mới có thể chỉnh sửa trong thẻ ngoài. Satori tạo SVG từ một tập giới hạn HTML và CSS. [Hướng dẫn ảnh chính thức](https://github.com/vercel/satori#images) khuyến nghị kích thước tường minh và dữ liệu ảnh độc lập khi bộ kết xuất về sau sẽ tạo PNG. Điều đó cho công việc này hai đầu ra riêng: thẻ SVG đã bố cục và bản sao raster để bàn giao. ## Giữ ba tệp có nhiệm vụ khác nhau | Tệp | Nội dung | Nên sửa gì ở đó | | --------------- | --------------------------------------- | -------------------------------- | | SVG logo gốc | Hình học và khoảng trống của biểu trưng | Hình dạng, màu, ranh giới nguồn | | SVG thẻ Satori | Bố cục thẻ, chữ và ảnh logo nhúng | Hộp hình, vị trí và nội dung thẻ | | PNG đã kết xuất | Pixel của thẻ bàn giao | Tạo lại sau khi nguồn thay đổi | SVG `` có thể tham chiếu SVG khác, như [tài liệu tham khảo image của MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/image) giải thích. Vì vậy phần tử image không tự động có nghĩa hình nhúng là raster. Kiểm tra loại dữ liệu và nội dung đã giải mã trước khi chẩn đoán thẻ bằng [danh sách kiểm tra ảnh raster trong SVG](https://perfectvector.com/vi/blog/svg-contains-raster-image) rộng hơn. **Giữ bản chính cạnh thẻ** ![Minh họa khái niệm bản chính hình thoi rỗng và các bản sao đặt ở kích thước khác nhau trong các thẻ thương hiệu đơn giản](https://perfectvector.com/blog/satori-svg-logo/master-and-card.webp) *Minh họa: giữ hình có thể chỉnh sửa riêng với bố cục thẻ. Việc kiểm tra nguồn và đầu ra bên dưới đến từ một ví dụ Satori được tạo độc lập, không phải sơ đồ được tạo này.* ## Ví dụ cục bộ hoàn chỉnh Mã khởi đầu này dùng cách nhập tiêu chuẩn để xuất SVG từ [Satori 0.35.0](https://github.com/vercel/satori/releases/tag/0.35.0) và resvg-js 2.6.2. Trong thư mục làm việc trống, cài các gói cố định phiên bản: ```bash npm install --save-exact satori@0.35.0 @resvg/resvg-js@2.6.2 ``` Tạo thư mục `fonts` và tải `Abel-Regular.ttf` cùng `OFL.txt` từ [thư mục Abel của Google Fonts](https://github.com/google/fonts/tree/main/ofl/abel). Abel được cấp phép theo [SIL Open Font License 1.1](https://raw.githubusercontent.com/google/fonts/main/ofl/abel/OFL.txt); giữ thông báo và giấy phép đi kèm khi phân phối phông chữ cùng ví dụ này. Lưu mã sau thành `starter.mjs` và chạy `node starter.mjs`. Nó cung cấp phông chữ cho Satori, tạo hình thoi rỗng và làm hai thẻ 600×320 với hộp hình 80×80 và 160×160. URL tệp giữ các đường dẫn phông chữ và đầu ra tương đối với tập lệnh. ```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')` mã hóa các byte SVG UTF-8 được tạo bằng [API mã hóa Buffer của Node](https://nodejs.org/api/buffer.html#buffers-and-character-encodings). Tiền tố `data:image/svg+xml;base64,` xác định nội dung. Nó đổi cách biểu diễn để truyền tải, không đổi hình học logo. Lệnh gọi Satori trả về SVG thẻ. Dòng tiếp theo truyền SVG đó cho [bộ kết xuất PNG resvg-js](https://github.com/thx/resvg-js#basic-usage) riêng. Mã khởi đầu không có URL ảnh từ xa; nó đọc phông chữ cục bộ trước khi kết xuất. Kiểm thử riêng hành vi tải từ xa hoặc triển khai của bạn. ## Hai lệnh gọi thực tế tạo ra gì Chúng tôi chạy đúng mã khởi đầu này với các gói cố định phiên bản, kiểm tra cả hai SVG đầu ra và mở từng SVG cùng PNG trong trình duyệt. Cả bốn tệp thẻ tải ở 600×320. Chữ giữ nguyên vị trí trong khi hộp biểu trưng tăng gấp đôi kích thước. Mỗi thẻ chứa một `` ngoài và hai phần tử `` ngoài. Hai đường dẫn đại diện cho chữ; chúng không phải đường bao ngoài và trong của hình thoi. Giải mã dữ liệu base64 của ảnh khôi phục chính xác các byte SVG gốc: một đường dẫn, không có phần tử image và cùng định nghĩa hình thoi rỗng. Thẻ không có phần tử `` còn ở dạng văn bản trong lần chạy này. | Kiểm tra | Hộp hình 80×80 | Hộp hình 160×160 | | ------------------------------------------- | --------------------- | ----------------------- | | Kích thước thẻ | 600×320 | 600×320 | | Vị trí ảnh ngoài | x24, y64 | x24, y64 | | SVG nhúng | Bản chính gốc 128×128 | Cùng các byte bản chính | | Phạm vi PNG màu xanh mòng két đặc chính xác | 68×68 pixel | 138×138 pixel | | Pixel thẻ ở tâm khoảng trống | Màu kem, alpha 255 | Màu kem, alpha 255 | Các hàng phạm vi tô đếm pixel khớp chính xác với màu xanh mòng két đặc của biểu trưng. Chúng loại trừ cạnh được khử răng cưa. Chúng không phải kích thước hình chữ nhật ảnh: hình thoi gốc trải từ tọa độ nguồn 8 đến 120, nên phạm vi toán học sẽ co giãn thành 70 hoặc 140 đơn vị trong các hộp này. Phạm vi màu đặc đo được nhỏ hơn một chút. Phần giữa của biểu trưng gốc trong suốt, có alpha 0 khi kết xuất riêng. Trong mỗi PNG thẻ cuối, khoảng trống đó hiển thị nền kem đục: RGBA 246,242,232,255. Khoảng trống nhìn thấy và pixel thẻ cuối trong suốt là hai yêu cầu khác nhau. Nếu cần nền bàn giao trong suốt, hãy đổi nền thẻ và kiểm tra alpha kết quả riêng. Đây là hai lệnh gọi dùng một biểu trưng gốc ở hai kích thước. Chúng không xác lập rằng mọi tính năng SVG đều hoạt động, các công việc ảnh từ xa lặp lại đã được sửa hay mọi đích đều kết xuất thẻ giống hệt. ## Đổi hộp hình mà không mất nguồn Với logo của bạn, thay chuỗi `logo` bằng SVG độc lập hoặc đọc tệp bản chính trước khi mã hóa. Trước tiên kiểm tra `viewBox`, chiều rộng, chiều cao và khoảng trống. Khoảng trắng thêm bên trong phạm vi đó có thể làm logo nhìn thấy nhỏ hơn hộp thẻ được gán. Đặt cả hai kích thước ảnh theo tỷ lệ khung hình dự kiến. Nguồn của chúng tôi vuông và cả hai hộp đều vuông; ảnh đầu ra dùng `preserveAspectRatio="none"`, không gây đổi tỷ lệ ở đây. Mẫu này không thử logo chữ nhật bị ép vào ô vuông. Thay từng biến bố cục một, rồi kiểm tra SVG thực tế và PNG bàn giao. Giữ chữ ngoài logo nhúng khi muốn thay đổi độc lập. Chữ thẻ của ví dụ này trở thành đường dẫn trong SVG bàn giao, nhưng các từ vẫn sửa được trong tập lệnh. Đầu vào phông chữ, đầu vào hình và đầu ra bố cục có nhiệm vụ khác nhau; [hướng dẫn phông chữ resvg](https://perfectvector.com/vi/blog/resvg-svg-fonts) trình bày quy trình kết xuất văn bản SVG còn ở dạng chữ riêng. [Tài liệu HTML và CSS](https://github.com/vercel/satori#html-elements) của Satori mô tả tập con được hỗ trợ và các giới hạn. Ảnh chụp trình duyệt của trang có sẵn không phải lời hứa bộ máy bố cục này sẽ tái tạo nó chính xác. Bắt đầu với thẻ nhỏ và cách nhập `satori` thông thường, rồi thêm các thuộc tính thiết kế thực sự cần. ## Chuẩn bị logo bắt đầu từ pixel Nếu logo duy nhất là PNG hoặc JPG và bạn cần đường bao có thể chỉnh sửa, hãy [chuẩn bị logo SVG bằng PerfectVector](https://perfectvector.com/vi/vectorize-logo), kiểm tra dáng bao và khoảng trống bên trong, rồi giữ SVG sạch làm bản chính. Sau đó nhúng vào thẻ và xác minh cả hai kích thước hình cùng PNG cuối. Vector hóa chuẩn bị hình; Satori xử lý bố cục thẻ. SVG sạch có sẵn có thể đi thẳng tới bước nhúng. [Hướng dẫn vector hóa](https://perfectvector.com/vi/blog/what-is-image-vectorization) giải thích khác biệt giữa nguồn và đầu ra. Giữ bản chính, tập lệnh và đầu vào phông chữ sau khi bàn giao PNG. Nếu dùng giai đoạn raster hóa khác, xác minh kích thước riêng; [ví dụ SVG sang PNG bằng Sharp](https://perfectvector.com/vi/blog/sharp-svg-to-png) trình bày kích thước của bộ kết xuất đó. ## Câu hỏi thường gặp **Ảnh SVG có trở thành đường dẫn chỉnh sửa được trong thẻ Satori không?** Trong ví dụ này, logo vẫn là ảnh SVG lồng bên trong. Nguồn gốc có một đường dẫn được giữ trong dữ liệu ảnh; các đường dẫn ngoài của thẻ là chữ. Giữ bản chính gốc để chỉnh sửa hình học. **Tại sao logo nhìn thấy nhỏ hơn chiều rộng và chiều cao của nó?** Hộp ảnh chứa cả phạm vi nguồn. Hình thoi của chúng tôi để lề trong nguồn 128×128, và phạm vi pixel màu chính xác cũng loại trừ cạnh được khử răng cưa. Kiểm tra khoảng trắng nguồn và tỷ lệ khung hình được gán riêng. **Lỗ trong suốt của logo có làm thẻ trong suốt không?** Lỗ cho nền thẻ hiện qua. Nền kem của chúng tôi đục, nên pixel PNG tại khoảng trống có alpha 255. Kiểm thử nền thẻ trong suốt riêng nếu yêu cầu bàn giao cần nó. **Satori có trả về PNG không?** Mã khởi đầu này yêu cầu Satori trả chuỗi SVG, rồi kết xuất chuỗi đó thành PNG bằng resvg-js. Giữ các giai đoạn riêng để kiểm tra bố cục và bàn giao raster độc lập. ## Nguồn tham khảo 1. [Tài liệu ảnh, bố cục và phông chữ Satori](https://github.com/vercel/satori) — kích thước ảnh, đầu vào độc lập, đầu ra SVG tiêu chuẩn và phạm vi HTML/CSS được hỗ trợ. 2. [Bản phát hành Satori 0.35.0](https://github.com/vercel/satori/releases/tag/0.35.0) — phiên bản cố định dùng trong ví dụ gốc. 3. [Phần tử image SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/image) — ảnh SVG có thể tham chiếu tệp SVG khác. 4. [API mã hóa Buffer của Node](https://nodejs.org/api/buffer.html#buffers-and-character-encodings) — phép mã hóa base64 trong mã khởi đầu. 5. [Cách dùng resvg-js](https://github.com/thx/resvg-js) — giai đoạn kết xuất SVG thành PNG riêng. 6. [Giấy phép phông chữ Abel](https://raw.githubusercontent.com/google/fonts/main/ofl/abel/OFL.txt) — nguồn gốc, thông báo và giấy phép phân phối lại của phông chữ. *** Với logo PNG hoặc JPG của bạn, hãy [chuẩn bị bản chính SVG bằng PerfectVector](https://perfectvector.com/vi/vectorize-logo) và kiểm tra đường viền cùng khoảng trống bên trong. Giữ bản chính, rồi kiểm tra vị trí của nó trong SVG thẻ và PNG bàn giao ở các kích thước bạn dự định dùng. ## Explore - [Read the HTML article](https://perfectvector.com/vi/blog/satori-svg-logo) - [Biểu tượng SVG MapLibre: pixel và kích thước ký hiệu](https://perfectvector.com/vi/blog/maplibre-svg-symbol-image.md) - [Ảnh SVG trong p5.js: tải, co giãn và giữ nguồn](https://perfectvector.com/vi/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)