Sematkan gambar dan font di SVG
Tambahkan 1 SVG beserta gambar (PNG, JPEG, WebP, GIF) atau font (TTF, OTF, WOFF, WOFF2) yang direferensikannya, lalu gabungkan menjadi 1 SVG sehingga asetnya tidak perlu dibagikan terpisah. Tentukan aset yang dipakai untuk setiap referensi lalu buat SVG-nya. Setelah pratinjaunya berhasil ditampilkan, Anda dapat menyimpannya. Aset pada URL eksternal tidak diambil secara otomatis.
Yang dapat Anda lakukan
Satukan gambar dan font
Tanam aset lokal yang ditambahkan ke dalam SVG agar aset tidak perlu dikirim secara terpisah.
Periksa referensi dan aset
Tentukan berkas yang sesuai untuk setiap path gambar atau nama font di dalam SVG. SVG tidak akan dibuat selama masih ada referensi yang belum terselesaikan.
Periksa tampilan SVG yang dibuat dan simpan
Periksa tampilannya sebagai gambar lalu simpan SVG dengan aset yang sudah ditanam. Berkas asli tidak ditimpa.
Cara penggunaan
Tambahkan SVG dan aset
Pilih satu SVG beserta gambar dan font yang direferensikannya. Anda juga dapat menambahkannya sekaligus dari sebuah folder.
Petakan aset yang akan ditanam
Periksa berkas lokal yang akan dipakai untuk setiap referensi. Untuk referensi yang tidak dicocokkan otomatis, pilih dari aset yang sudah ditambahkan.
Buat SVG
Setelah tidak ada referensi yang belum terselesaikan, tekan “Buat SVG dengan gambar dan font”.
Periksa tampilan dan simpan
Periksa teks dan gambar pada pratinjau hasil pembuatan sebelum menyimpan. Jika gagal ditampilkan, periksa SVG dan aset aslinya.
Berguna ketika
Serahkan SVG dan asetnya sekaligus
Gabungkan grafis yang mereferensikan gambar dan font di folder terpisah menjadi satu SVG yang mudah diserahkan.
Periksa penyebab referensi rusak
Cocokkan aset yang dibutuhkan dengan berkas yang ditambahkan, lalu tentukan gambar atau font yang hilang.
Cara kerja referensi dan penyisipan
Path relatif dan pencocokan berkas
Referensi dicocokkan secara otomatis bila path referensi relatif terhadap SVG cocok secara unik dengan path aset yang ditambahkan. Pilih secara manual bila berkas dengan nama sama berada di folder berbeda atau kandidatnya tumpang tindih.
Tentukan berkas untuk setiap nama font
Alat ini tidak mengambil font dari perangkat Anda hanya berdasarkan nama font di dalam SVG. Tambahkan berkas font yang diperlukan dan tentukan berkas yang cocok.
Aset di URL tidak diambil secara otomatis
Meskipun URL eksternal direferensikan, sediakan gambar atau font secara lokal lalu tentukan. Layar ini tidak memiliki operasi untuk mengambil aset dari URL.
Penanaman terpisah dari pengurangan ukuran berkas
Menyertakan data gambar di dalam SVG dapat menambah ukuran berkas SVG itu sendiri. Font dikonversi ke WOFF2 dan ditanam. Optimalkan kode SVG dengan alat terpisah.
Perbedaan menurut cara ditampilkan
Pratinjau menampilkan SVG sebagai gambar. Tampilan yang sama tidak dijamin di semua aplikasi, jadi periksa juga tampilan yang dibutuhkan di tempat tujuan.
Pertanyaan yang sering diajukan
Apa yang harus saya lakukan jika aset tidak ditemukan?
Tambahkan gambar atau font, lalu tentukan di kolom pilihan untuk referensi yang sesuai. Pencocokan otomatis mungkin tidak berhasil jika folder berbeda, path yang sama ganda, atau URL eksternal.
Aset apa saja yang bisa saya gunakan?
Gambar dapat berupa PNG, JPEG, WebP, atau GIF; font dapat berupa TTF, OTF, WOFF, atau WOFF2. Tentukan SVG satu per satu.
Apakah font ditemukan secara otomatis?
Alat ini tidak mencari font di perangkat Anda atau di web hanya dari nama font. Tambahkan dan pilih berkas yang Anda miliki secara lokal.
Apa yang terjadi pada aset yang sudah ditanam?
Gambar dan font yang ditanam sebagai data URI, serta referensi # di dalam SVG, tidak dihitung sebagai referensi eksternal. SVG dapat dibuat jika tidak ada referensi terdeteksi yang tersisa belum terselesaikan.
Apa yang terjadi ketika saya menambahkan atau memilih ulang aset?
Jika Anda hanya menambahkan aset, aset tersebut masuk ke daftar dan aset yang sebelumnya ditugaskan tetap dipertahankan. Periksa pencocokan otomatis, misalnya ketika tersedia lebih banyak kandidat dengan path yang sama. Input yang berisi SVG baru akan menggantikan SVG saat ini beserta seluruh asetnya.
Bagaimana jika ada referensi yang tidak didukung?
Referensi use atau script eksternal tidak dapat ditanam. SVG yang berisi import CSS eksternal juga tidak dapat dimuat. Atur referensinya di aplikasi asal atau aplikasi lain yang sesuai sebelum memilih SVG.
Apakah SVG menjadi lebih kecil?
Mengurangi ukuran berkas bukan tujuan alat ini. Menanam aset di dalam SVG dapat menambah ukurannya. Gunakan SVG optimization jika ingin merapikan kodenya.
Bagaimana jika SVG yang dibuat tidak dapat ditampilkan?
Opsi simpan tidak ditampilkan di layar ini sampai SVG berhasil ditampilkan. Periksa SVG dan aset aslinya, tinjau pemetaan atau berkasnya, lalu buat lagi.
Input dan hasil
- Input
- 1 SVG beserta gambar dan font. Tambahkan dari berkas atau folder.
- Gambar
- Data asli gambar yang ditambahkan akan ditanam. Gambar tidak diubah ukurannya maupun dikompresi.
- Font
- Font yang dipetakan dikonversi ke WOFF2 dan ditanam.
- Output
- original-name-embedded.svg. Anda dapat menyimpan setelah SVG yang dibuat berhasil ditampilkan.