Ubah SVG menjadi PNG pada ukuran berapa pun, tanpa mengunggahnya

Q: SVG saya tidak punya width atau height. Saya dapat ukuran berapa?

viewBox-nya, kalau ada - lebar dan tingginya adalah satuan pengguna alih-alih piksel, tapi itulah satu-satunya angka di dalam file dan peramban memperlakukannya sebagai ukuran alami gambarnya. Kalau viewBox-nya juga tidak ada, halaman ini menulis diandaikan di sebelah barisnya dan memakai ⁦300 × 150⁩, yang akan dipakai sebuah untuk menggambarnya. Bagaimanapun Anda bisa menyebut ukuran yang Anda mau dan file-nya digambar pada ukuran itu.

Cara memverifikasi klaim privasi ini

Karya Anda tidak punya tujuan ke mana pun. Content-Security-Policy menyebut satu per satu setiap alamat yang boleh dihubungi halaman ini, dan tidak satu pun milik situs ini. Tidak ada titik akhir di sini tempat file Anda bisa dikumpulkan, dan tidak ada kode yang akan mengirimnya seandainya ada.

Tidak ada di sini yang mengambil apa pun. Tidak ada fetch, tidak ada XMLHttpRequest, dan tidak ada sendBeacon di mana pun di dalam src/. Seluruh pengubahnya adalah sebuah <img> yang memuat blob dari file Anda sendiri, satu drawImage ke sebuah kanvas, dan satu canvas.toBlob.

Sebuah SVG adalah dokumen, dan ini mode di mana ia tidak bisa bertindak. Sebuah SVG bisa membawa <script>, sebuah <image href="https://…"> jarak jauh, sebuah lembar gaya, dan sebuah font web. Digambar lewat sebuah <img>, ia berada dalam apa yang disebut spesifikasi sebagai mode statis aman: skripnya tidak berjalan dan tidak satu pun alamat itu diambil. Itu jaminan peramban, bukan janji kami, dan itulah alasan halaman ini bisa membuka file yang belum pernah dilihatnya tanpa file itu bisa menelepon pulang.

Apa yang dimuat Google, dan apa yang tidak diberikan kepadanya. Skrip iklan dan pengukuran berasal dari Google, dan tombol donasi dari Buy Me a Coffee. Tidak satu pun diberi apa pun tentang gambar Anda. Setiap baris yang membaca, menetapkan ukuran, atau menggambar sebuah file disajikan dari asal ini dan terdaftar di repositori.

Jalan tanpa internet. Putuskan koneksi jaringan dan alat ini tidak berubah, karena sejak awal memang tidak ada langkah jaringan di dalamnya. Itulah bukti yang paling sederhana.

Periksa sendiri. Anda tidak perlu memercayai semua ini begitu saja. Halaman ini dihasilkan dari templat dan konfigurasi di repositori oleh skrip build yang bisa Anda baca dan jalankan sendiri, dan hasilnya dikirim ke cabang dist — jadi Anda bisa membandingkan apa yang disajikan dengan apa yang dihasilkan oleh build dari kode sumbernya:

github.com/A-Box-of-Tools/website

File yang layak dibaca lebih dulu adalah config/site.toml untuk Content-Security-Policy, src/svg.js untuk bagaimana ukuran milik sebuah file dibaca dan bagaimana tag akarnya ditulis ulang, dan src/render.js untuk delapan baris yang melakukan pengubahannya menjadi piksel — sebuah <img>, sebuah drawImage, dan sebuah toBlob, tanpa apa pun di antaranya.

Jika perangkat lunak keamanan kantor Anda memperingatkan soal unggahan. Ia mengawasi saat sebuah berkas dipilih di peramban, dan tidak bisa tahu apakah halaman ini berniat mengirimnya — jadi ia memperingatkan saat pemilihan. Tidak ada yang dikirim dari sini: buka alat pengembang peramban, pindah ke Network, lalu pilih sebuah berkas. Tidak ada permintaan yang membawanya, dan tidak ada permintaan sama sekali selain pratinjau lokal halaman ini. Pemeriksaan yang sama bisa dilakukan tim TI Anda dalam setengah menit.

1 Pilih file SVG-nya

Jatuhkan sebuah SVG di sini atau klik untuk menelusuri — beberapa sekaligus juga boleh

2 Sebutkan seberapa besar

Inilah satu pertanyaan yang tidak bisa dijawab sebuah vektor untuk Anda. Sebuah SVG tidak punya piksel di dalamnya — ia punya instruksi untuk menggambar, dan ia akan mengikutinya pada ukuran berapa pun yang Anda sebutkan. Angka di bawah bukan batas yang sedang Anda dorong, seperti halnya pada sebuah foto; 4000 piksel dari ikon 24 piksel persis setajam 24-nya.

Tetapkan ukurannya lewat

Kalikan dengan

Setiap file di daftar dikalikan dari ukurannya sendiri, jadi sekumpulan ikon yang digambar pada ukuran berbeda tetap sebanding satu sama lain.

Tulis juga salinan berkepadatan tinggi

3 Pilih formatnya

Kualitas — 90 Hanya untuk JPEG dan WebP; PNG tanpa kehilangan sehingga tidak punya tombol kualitas. Warna datar dan tepi tajam — dan sebagian besar sebuah SVG terdiri dari itu — justru yang paling buruk ditangani encoder berjenis kehilangan; karena itu nilai ini berdiri lebih tinggi di sini daripada pada sebuah foto.

Format

Latar

4 Lihat, lalu simpan

Pratinjaunya digambar oleh kode yang sama yang menulis file-nya, dari file yang Anda pilih, di mesin ini. Yang layak diperiksa adalah dua hal yang berubah ketika sebuah gambar menjadi piksel: garis setipis rambut yang menjadi abu-abu ketika lebarnya setengah piksel, dan teks kalau ada; itu pun digambar dengan font yang ada di mesin ini, bukan font yang diambil dari web.

Tambahkan sebuah SVG dan ia muncul di sini.

{name}: alat ini hanya membaca berkas SVG. PNG atau JPEG sudah berupa piksel; untuk itu ada Pengubah Ukuran Gambar. {name}: tidak ada elemen <svg> di berkas ini. Tidak ada elemen <svg> di berkas ini. {name}: {why} Browser ini tidak bisa menggambar SVG-nya. Mungkin XML-nya tidak sah. Browser ini tidak mau menulis {format} pada ukuran itu. → {size} → terlalu besar: {why} Tambahkan sebuah SVG, lalu di sini akan tertulis akan keluar seberapa besar. Berkasnya menggambar dirinya pada ⁦{fromWidth} × {fromHeight}⁩; ini keluar pada ⁦{width} × {height}⁩, yaitu {times} dari itu. Bentuknya ditarik untuk memenuhi kotaknya, jadi gambarnya jadi melenceng. Ia di tengah kotak, dengan latarnya kelihatan di kedua sisi. ⁦{width} × {height}⁩ pada @{d}x Ditambah {list}. ⁦{width} × {height}⁩ melewati batas {max} piksel yang dipunyai sebuah kanvas per sisi. Tidak ada yang kembali selain gambar kosong. {size} lebih dari yang sanggup ditampung browser — itu {mb} MB kanvas sebelum apa pun dikodekan. Perlu ukuran yang lebih kecil. {size} di atas langit-langit {ceiling} megapiksel yang dipunyai Safari di iPhone atau iPad. Di komputer akan jalan; di ponsel bisa kembali kosong. {n} megapiksel Tanpa kehilangan mutu, dan satu-satunya dari ketiganya yang dibaca semua perangkat lunak. Warna rata dan tepi tegas — yang merupakan sebagian besar isi sebuah gambar — termampatkan dengan baik di dalamnya, jadi logo yang dirasterkan biasanya tetap lebih kecil sebagai PNG daripada sebagai JPEG. Tanpa transparansi, dan kehilangan mutunya paling kelihatan justru pada gambar semacam ini: cincin bintik di sekeliling tiap tepi tegas. Setimpal untuk gambar yang sebagian besar berupa gradasi mirip foto, dan jarang selain itu. Transparansi seperti PNG, dan berkasnya lebih kecil daripada kedua yang lain pada mutu yang sama. Dibaca semua browser masa kini; perangkat lunak lama dan sebagian percetakan masih tidak bisa membukanya. Browser ini tidak bisa menulis WebP, jadi yang keluar akan berupa PNG. Pilih salah satu dari dua yang lain. Bagian gambar yang tembus pandang tetap tembus pandang. Dicat di belakang seluruh gambar, jadi tidak ada yang tembus pandang di berkasnya. {format} tidak punya transparansi, jadi warna ini dicat di belakang gambarnya. Tanpa itu, semua yang tadinya tembus pandang akan keluar hitam. Ditampilkan pada ukuran yang akan jadi. Ditampilkan pada {times} dari berkas {size}, digambar ulang dari vektornya dan bukan dikecilkan — jadi begitulah rupanya pada ukuran itu. Pola papan catur itu tempat berkasnya nanti tembus pandang. {a} {b} {a} dan {b} {a} · {b} {a}, {b} {n} B {n} KB {n} MB Buat gambarnya Buat {count} gambarnya Satu berkas dipilih {count} berkas dipilih Menggambar satu gambar… Menggambar {count} gambar… Menggambar {name}… Selesai. {name}, {size}, {bytes}. {count} gambar ditulis dari {drawings} gambar sumber, total {bytes}. {size} — ukuran yang diminta berkasnya {size} — satu sisi dari berkasnya, satunya dari viewBox {size} — tanpa ukuran piksel, diambil dari viewBox {size} diperkirakan — berkas ini tak menyebut ukuran maupun viewBox Tampilkan yang ini di pratinjau Keluarkan {name} dari daftar Dari {name}, yang menggambar dirinya pada {size} — {times} dari itu. Dari {name}, yang menggambar dirinya pada {size} — {times} dari itu, dan @{density}x berkas di atasnya. Unduh WebP — peramban ini tidak bisa menulisnya file Anda tidak pergi ke mana pun. {total} file dimuat, semuanya milik halaman ini sendiri. {platform} sesuatu menghubungi {hosts}, dan itu tidak pernah dilakukan alat ini. Anggap itu layak diselidiki. {platform} Skrip iklan, pengukuran, dan tombol donasi milik halaman ini dimuat dari {hosts} host; tidak satu pun diberi sebuah file atau satu byte darinya. Skrip iklan, pengukuran, dan tombol donasi milik halaman ini dimuat dari {hosts} host; tidak satu pun diberi sebuah file atau satu byte darinya.

# SVG ke Gambar — ubah vektor menjadi PNG, JPEG, atau WebP pada ukuran berapa pun Sebutkan ukurannya. Sebuah vektor tidak punya ukuran sendiri untuk hilang. > Ubah SVG menjadi PNG, JPEG, atau WebP pada ukuran berapa pun, di peramban Anda. Sebutkan lebarnya, sebuah kelipatan, atau sebuah kotak; dapatkan salinan @2x dan @3x juga. Transparansi terjaga, tidak ada yang diunggah. Halaman ini adalah alat interaktif yang berjalan sepenuhnya di peramban Anda, di https://abox.tools/id/svg-ke-png/ — tidak ada yang Anda berikan padanya yang diunggah. Berikut ini semua yang dikatakan halaman tentang alat ini dalam kata-kata; untuk memakainya, buka alamat tersebut. ## file SVG Anda **tidak pernah diunggah**. Tidak ada server. Gambarnya diubah menjadi piksel oleh mesin yang sama yang baru saja menampilkannya di layar Anda. File Anda dibaca dari disk Anda, tag akarnya ditulis ulang ke ukuran yang Anda minta oleh seratus baris di `src/svg.js` yang bisa Anda baca, dan ia digambar ke sebuah kanvas yang memang sudah dibawa peramban Anda. Alat ini tidak punya fitur jaringan dalam bentuk apa pun — tidak ada yang diambil, tidak ada yang dikirim — dan seandainya pun ada, tidak ada server di ujung lain halaman ini untuk menerima sebuah logo. - ✗ Tanpa unggah - ✗ Tanpa akun - ✗ Tanpa tanda air - ✓ Jalan tanpa internet - ✓ Sumber terbuka ## Cara mengubah SVG menjadi PNG tanpa mengunggahnya 1. **Pilih SVG-nya.** Jatuhkan satu ke pemilih file, atau pilih satu folder berisi SVG dan ubah semuanya sekali jalan. File dibaca peramban langsung dari disk Anda; tidak ada yang dikirim ke mana pun saat Anda melakukannya. Setiap baris mengatakan file itu menganggap dirinya berukuran berapa — dan mengatakannya secara berbeda kalau ukuran itu datang dari `viewBox`-nya, atau diandaikan karena file-nya tidak menyatakan apa pun. 2. **Sebutkan seberapa besar.** Kelipatan dari ukuran milik file itu sendiri adalah jawaban tercepat dan yang tepat untuk satu kumpulan: setiap gambar diskalakan dari titik awalnya sendiri, jadi sekumpulan ikon tetap sebanding. Selain itu, sebutkan sebuah lebar, sebuah tinggi, sisi terpanjang, atau sebuah kotak dengan kedua sisinya diberikan. Tidak ada hukuman untuk angka besar di sini seperti pada sebuah foto — gambarnya digambar ulang pada ukuran itu, bukan diregangkan ke sana. 3. **Tambahkan salinan berkepadatan tinggi kalau Anda butuh.** Ponsel dan laptop Retina menggambar dua atau tiga piksel perangkat untuk setiap piksel CSS, jadi logo 200 piksel butuh file 400 atau 600 piksel di belakangnya. Mintalah `@2x` dan `@3x` dan mereka keluar dengan nama yang diharapkan Xcode, perkakas Android, dan `image-set()` di CSS, dan masing-masing persis dua atau tiga kali yang pertama alih-alih dibulatkan sendiri-sendiri. 4. **Pilih formatnya dan putuskan soal transparansinya.** PNG kecuali Anda punya alasan: ia tanpa kehilangan, ia menjaga transparansi, dan warna datar terkompres dengan baik di dalamnya. JPEG sama sekali tidak punya transparansi, jadi sebuah warna latar dicat masuk entah Anda memilihnya atau tidak — tanpanya setiap piksel transparan keluar hitam. WebP melakukan keduanya dan membuat file lebih kecil, dengan biaya perangkat lunak yang cukup tua sehingga tidak bisa membacanya. 5. **Lihat pratinjaunya sebelum Anda mengunduh.** Ia digambar oleh kode yang sama yang menulis file-nya, dari file Anda, di mesin Anda. Dua hal berubah ketika sebuah gambar menjadi piksel dan keduanya muncul di sini: garis setipis rambut yang tadinya selebar setengah piksel menjadi abu-abu, dan teks apa pun digambar dengan font yang dimiliki komputer ini alih-alih yang diambil dari web. 6. **Ambil file-nya.** Satu unduhan per file, atau seluruh kumpulan sebagai satu zip. Namanya mengikuti SVG asalnya, dengan `@2x` dan `@3x` pada salinannya, dan dua file yang akan bernama sama diberi nomor alih-alih yang satu diam-diam menimpa yang lain. ## Versi lebih lengkap [Cara mengubah SVG menjadi PNG pada ukuran yang tepat](https://abox.tools/id/panduan/svg-ke-png/): Sebuah vektor tidak punya ukuran piksel miliknya sendiri, jadi angkanya Anda yang pilih. Dari mana angka itu datang untuk sebuah layar, sebuah ikon aplikasi, dan sebuah pencetak, dan apa yang berubah ketika sebuah gambar menjadi piksel. ## Juga ada di dalam kotak - [Gambar ke SVG](https://abox.tools/id/gambar-ke-svg/): Satu bentuk, satu garis luar. Tunjuk saja yang seharusnya tidak ada. - [Pembanding Tinggi Badan](https://abox.tools/id/bandingkan-tinggi-badan/): Ketik tingginya, bawa gambarnya. Tidak ada yang dikirim untuk menggambarnya. - [Kompresor Gambar](https://abox.tools/id/kompres-gambar/): Sebutkan ukurannya. Sisanya dia yang hitung. - [Pengubah Ukuran Gambar](https://abox.tools/id/ubah-ukuran-gambar/): Sebutkan ukurannya. Gambar kotaknya. Pilih formatnya. ## Pertanyaan ### Apakah SVG saya diunggah ke suatu tempat? Tidak. File dibaca oleh peramban Anda sendiri di perangkat keras Anda sendiri, digambar ke sebuah kanvas oleh mesin yang sama yang menggambar setiap gambar lain yang Anda lihat, dan diserahkan kembali sebagai sebuah unduhan. Alat ini tidak punya fitur jaringan dalam bentuk apa pun — ia tidak pernah mengambil apa pun dan tidak pernah mengirim apa pun — dan `Content-Security-Policy` halaman ini menyebut satu per satu setiap alamat yang boleh dihubunginya, dan tidak satu pun milik situs ini. ### Pada ukuran berapa sebaiknya saya mengubah SVG menjadi piksel? Berapa pun yang diminta oleh yang akan membacanya, dikalikan rasio piksel perangkat layar tempat ia akan dilihat. Logo yang menempati 200 piksel CSS butuh 400 untuk laptop Retina dan 600 untuk ponsel masa kini, dan itulah salinan `@2x` dan `@3x` di sini. Untuk ikon aplikasi atau kartu di toko aplikasi, tokonya menyebut angka yang persis dan itulah angkanya. Kalau tidak ada yang memberi tahu Anda, 1024 pada sisi terpanjang adalah bawaan yang berguna: cukup besar untuk hampir semua keperluan dan cukup kecil untuk dikirim lewat email. ### Apakah memperbesarnya menurunkan kualitas? Tidak, dan inilah satu tempat di mana jawaban itu benar-benar tidak. Sebuah vektor adalah instruksi alih-alih piksel, jadi peramban menggambar kurvanya lagi pada ukuran berapa pun yang diminta. 4000 piksel dari ikon 24 piksel persis setajam 24-nya. Yang tidak bisa Anda lakukan adalah arah sebaliknya: begitu ia menjadi PNG ia adalah piksel seperti yang lain, jadi ubahlah ke piksel pada ukuran yang Anda butuhkan alih-alih mengubah ukuran hasilnya nanti. ### SVG saya tidak punya width atau height. Saya dapat ukuran berapa? `viewBox`-nya, kalau ada — lebar dan tingginya adalah satuan pengguna alih-alih piksel, tapi itulah satu-satunya angka di dalam file dan peramban memperlakukannya sebagai ukuran alami gambarnya. Kalau viewBox-nya juga tidak ada, halaman ini menulis *diandaikan* di sebelah barisnya dan memakai ⁦300 × 150⁩, yang akan dipakai sebuah `<img>` untuk menggambarnya. Bagaimanapun Anda bisa menyebut ukuran yang Anda mau dan file-nya digambar pada ukuran itu. ### Kenapa teksnya tampak berbeda di PNG-nya? Karena font-nya tidak ada di dalam SVG. Sebuah SVG yang menggambar teks menyebut nama sebuah font dan menyerahkan pencariannya kepada mesin, dan file yang menarik font dari Google Fonts lewat `@import` tidak mendapat apa-apa di sini: SVG yang digambar lewat sebuah `<img>` tidak diizinkan mengambil apa pun, dan itu aturan yang sama yang menghentikannya menelepon pulang dengan file Anda. Perbaikannya adalah yang sudah diketahui setiap desainer — ubah teksnya menjadi jalur di program gambar sebelum mengekspor. Setelah itu ia adalah geometri, dan ia tampak sama di mana-mana. ### Bisakah ia mengubah beberapa file sekaligus? Bisa. Setiap SVG di daftar digambar dengan setelan yang sama dan kumpulannya turun sebagai satu zip. Sebuah kelipatan — “4× ukuran yang diminta file-nya” — biasanya setelan yang tepat untuk satu kumpulan, karena setiap gambar diskalakan dari ukurannya sendiri alih-alih semuanya dipaksa ke jumlah piksel yang sama. Klik baris mana pun untuk menaruh yang itu di pratinjaunya. ### Adakah batas ukurannya? Batas peramban, bukan batas kami. Sebuah kanvas menyerah di suatu titik melewati 16.384 piksel di satu sisi, dan Safari di iPhone atau iPad berhenti pada sekitar 16,7 megapiksel luas — ⁦4096 × 4096⁩. Di atas itu halaman ini memperingatkan Anda alih-alih menyerahkan gambar kosong, yang justru dilakukan peramban ketika ia kehabisan: `toBlob` tidak mengembalikan apa pun, tanpa galat yang menjelaskan dirinya. Melewati 100 megapiksel alat ini menolak, karena itu berarti 400 MB kanvas sebelum satu byte pun dikodekan. ### Apa yang terjadi pada transparansinya? Ia terjaga, di PNG dan di WebP. JPEG sama sekali tidak punya kanal alfa, jadi sebuah warna dicat di belakang seluruh gambarnya entah Anda memintanya atau tidak — tanpa itu, semua yang transparan akan keluar hitam, yang tampak seperti kerusakan alih-alih seperti JPEG. Memilih warna latar dengan PNG juga hal yang sangat lumrah untuk diinginkan: ia meratakan gambarnya ke warna itu alih-alih meninggalkan lubang. ### Bisakah ia membaca SVG yang memuat skrip atau gambar eksternal? Ia bisa membacanya, dan ia akan menggambar persis bagian yang mau digambar sebuah peramban. SVG yang dimuat lewat sebuah `<img>` berada dalam *mode statis aman*: skrip tidak berjalan, rujukan eksternal tidak diambil, dan animasi tidak diputar — bingkai pertamanyalah yang Anda dapat. Jadi file dengan `<image>` jarak jauh di dalamnya keluar dengan bagian itu hilang. Itu peramban yang menolak atas nama Anda, dan itulah alasan halaman ini bisa dengan aman membuka file yang belum pernah dilihatnya. ### Apa bedanya ini dengan Pengubah Ukuran Gambar? Sumbernya. Pengubah Ukuran Gambar mulai dari piksel — sebuah JPEG, sebuah PNG — jadi memperbesarnya harus mengarang detail yang tidak pernah ada. Yang ini mulai dari sebuah gambar, jadi tidak ada yang perlu dikarang dan tidak ada batas atas yang layak dikhawatirkan. Kalau yang Anda punya adalah SVG, inilah yang memberi hasil tajam; kalau yang Anda punya adalah foto, itulah yang lain. ### Apakah gratis, dan apakah saya perlu akun? Gratis, dan tidak ada akun, tidak ada masuk, tidak ada masa uji coba, dan tidak ada tanda air. Tidak ada batas jumlah atau ukuran file-nya juga, karena tidak ada server yang membayarnya — pekerjaannya terjadi di mesin Anda sendiri. Situs ini memasang iklan, dan itulah yang membiayainya; iklan tidak diberi apa pun tentang file Anda. ### Apakah jalan tanpa internet? Ya. Muat halamannya sekali, lalu putuskan koneksi internet dan ia tetap bekerja. Itu juga cara paling sederhana untuk membuktikan tidak ada yang diunggah: alat yang mengirim karya Anda ke tempat lain untuk digambar akan berhenti begitu Anda mencabut koneksi. ## Cara memverifikasi klaim privasi ini - **Karya Anda tidak punya tujuan ke mana pun.** Content-Security-Policy menyebut satu per satu setiap alamat yang boleh dihubungi halaman ini, dan tidak satu pun milik situs ini. Tidak ada titik akhir di sini tempat file Anda bisa dikumpulkan, dan tidak ada kode yang akan mengirimnya seandainya ada. - **Tidak ada di sini yang mengambil apa pun.** Tidak ada `fetch`, tidak ada `XMLHttpRequest`, dan tidak ada `sendBeacon` di mana pun di dalam `src/`. Seluruh pengubahnya adalah sebuah `<img>` yang memuat blob dari file Anda sendiri, satu `drawImage` ke sebuah kanvas, dan satu `canvas.toBlob`. - **Sebuah SVG adalah dokumen, dan ini mode di mana ia tidak bisa bertindak.** Sebuah SVG bisa membawa `<script>`, sebuah `<image href="https://…">` jarak jauh, sebuah lembar gaya, dan sebuah font web. Digambar lewat sebuah `<img>`, ia berada dalam apa yang disebut spesifikasi sebagai *mode statis aman*: skripnya tidak berjalan dan tidak satu pun alamat itu diambil. Itu jaminan peramban, bukan janji kami, dan itulah alasan halaman ini bisa membuka file yang belum pernah dilihatnya tanpa file itu bisa menelepon pulang. - **Apa yang dimuat Google, dan apa yang tidak diberikan kepadanya.** Skrip iklan dan pengukuran berasal dari Google, dan tombol donasi dari Buy Me a Coffee. Tidak satu pun diberi apa pun tentang gambar Anda. Setiap baris yang membaca, menetapkan ukuran, atau menggambar sebuah file disajikan dari asal ini dan terdaftar di repositori. - **Jalan tanpa internet.** Putuskan koneksi jaringan dan alat ini tidak berubah, karena sejak awal memang tidak ada langkah jaringan di dalamnya. Itulah bukti yang paling sederhana. **Periksa sendiri.** Anda tidak perlu memercayai semua ini begitu saja. Halaman ini dihasilkan dari templat dan konfigurasi di repositori oleh skrip build yang bisa Anda baca dan jalankan sendiri, dan hasilnya dikirim ke cabang `dist` — jadi Anda bisa membandingkan apa yang disajikan dengan apa yang dihasilkan oleh build dari kode sumbernya: https://github.com/A-Box-of-Tools/website File yang layak dibaca lebih dulu adalah `config/site.toml` untuk Content-Security-Policy, `src/svg.js` untuk bagaimana ukuran milik sebuah file dibaca dan bagaimana tag akarnya ditulis ulang, dan `src/render.js` untuk delapan baris yang melakukan pengubahannya menjadi piksel — sebuah <img>, sebuah `drawImage`, dan sebuah `toBlob`, tanpa apa pun di antaranya.

Pertanyaan

Apakah SVG saya diunggah ke suatu tempat?

Tidak. File dibaca oleh peramban Anda sendiri di perangkat keras Anda sendiri, digambar ke sebuah kanvas oleh mesin yang sama yang menggambar setiap gambar lain yang Anda lihat, dan diserahkan kembali sebagai sebuah unduhan. Alat ini tidak punya fitur jaringan dalam bentuk apa pun — ia tidak pernah mengambil apa pun dan tidak pernah mengirim apa pun — dan Content-Security-Policy halaman ini menyebut satu per satu setiap alamat yang boleh dihubunginya, dan tidak satu pun milik situs ini.

Pada ukuran berapa sebaiknya saya mengubah SVG menjadi piksel?

Berapa pun yang diminta oleh yang akan membacanya, dikalikan rasio piksel perangkat layar tempat ia akan dilihat. Logo yang menempati 200 piksel CSS butuh 400 untuk laptop Retina dan 600 untuk ponsel masa kini, dan itulah salinan @2x dan @3x di sini. Untuk ikon aplikasi atau kartu di toko aplikasi, tokonya menyebut angka yang persis dan itulah angkanya. Kalau tidak ada yang memberi tahu Anda, 1024 pada sisi terpanjang adalah bawaan yang berguna: cukup besar untuk hampir semua keperluan dan cukup kecil untuk dikirim lewat email.

Apakah memperbesarnya menurunkan kualitas?

Tidak, dan inilah satu tempat di mana jawaban itu benar-benar tidak. Sebuah vektor adalah instruksi alih-alih piksel, jadi peramban menggambar kurvanya lagi pada ukuran berapa pun yang diminta. 4000 piksel dari ikon 24 piksel persis setajam 24-nya. Yang tidak bisa Anda lakukan adalah arah sebaliknya: begitu ia menjadi PNG ia adalah piksel seperti yang lain, jadi ubahlah ke piksel pada ukuran yang Anda butuhkan alih-alih mengubah ukuran hasilnya nanti.

SVG saya tidak punya width atau height. Saya dapat ukuran berapa?

viewBox-nya, kalau ada — lebar dan tingginya adalah satuan pengguna alih-alih piksel, tapi itulah satu-satunya angka di dalam file dan peramban memperlakukannya sebagai ukuran alami gambarnya. Kalau viewBox-nya juga tidak ada, halaman ini menulis diandaikan di sebelah barisnya dan memakai ⁦300 × 150⁩, yang akan dipakai sebuah <img> untuk menggambarnya. Bagaimanapun Anda bisa menyebut ukuran yang Anda mau dan file-nya digambar pada ukuran itu.

Kenapa teksnya tampak berbeda di PNG-nya?

Karena font-nya tidak ada di dalam SVG. Sebuah SVG yang menggambar teks menyebut nama sebuah font dan menyerahkan pencariannya kepada mesin, dan file yang menarik font dari Google Fonts lewat @import tidak mendapat apa-apa di sini: SVG yang digambar lewat sebuah <img> tidak diizinkan mengambil apa pun, dan itu aturan yang sama yang menghentikannya menelepon pulang dengan file Anda. Perbaikannya adalah yang sudah diketahui setiap desainer — ubah teksnya menjadi jalur di program gambar sebelum mengekspor. Setelah itu ia adalah geometri, dan ia tampak sama di mana-mana.

Bisakah ia mengubah beberapa file sekaligus?

Bisa. Setiap SVG di daftar digambar dengan setelan yang sama dan kumpulannya turun sebagai satu zip. Sebuah kelipatan — “4× ukuran yang diminta file-nya” — biasanya setelan yang tepat untuk satu kumpulan, karena setiap gambar diskalakan dari ukurannya sendiri alih-alih semuanya dipaksa ke jumlah piksel yang sama. Klik baris mana pun untuk menaruh yang itu di pratinjaunya.

Adakah batas ukurannya?

Batas peramban, bukan batas kami. Sebuah kanvas menyerah di suatu titik melewati 16.384 piksel di satu sisi, dan Safari di iPhone atau iPad berhenti pada sekitar 16,7 megapiksel luas — ⁦4096 × 4096⁩. Di atas itu halaman ini memperingatkan Anda alih-alih menyerahkan gambar kosong, yang justru dilakukan peramban ketika ia kehabisan: toBlob tidak mengembalikan apa pun, tanpa galat yang menjelaskan dirinya. Melewati 100 megapiksel alat ini menolak, karena itu berarti 400 MB kanvas sebelum satu byte pun dikodekan.

Apa yang terjadi pada transparansinya?

Ia terjaga, di PNG dan di WebP. JPEG sama sekali tidak punya kanal alfa, jadi sebuah warna dicat di belakang seluruh gambarnya entah Anda memintanya atau tidak — tanpa itu, semua yang transparan akan keluar hitam, yang tampak seperti kerusakan alih-alih seperti JPEG. Memilih warna latar dengan PNG juga hal yang sangat lumrah untuk diinginkan: ia meratakan gambarnya ke warna itu alih-alih meninggalkan lubang.

Bisakah ia membaca SVG yang memuat skrip atau gambar eksternal?

Ia bisa membacanya, dan ia akan menggambar persis bagian yang mau digambar sebuah peramban. SVG yang dimuat lewat sebuah <img> berada dalam mode statis aman: skrip tidak berjalan, rujukan eksternal tidak diambil, dan animasi tidak diputar — bingkai pertamanyalah yang Anda dapat. Jadi file dengan <image> jarak jauh di dalamnya keluar dengan bagian itu hilang. Itu peramban yang menolak atas nama Anda, dan itulah alasan halaman ini bisa dengan aman membuka file yang belum pernah dilihatnya.

Apa bedanya ini dengan Pengubah Ukuran Gambar?

Sumbernya. Pengubah Ukuran Gambar mulai dari piksel — sebuah JPEG, sebuah PNG — jadi memperbesarnya harus mengarang detail yang tidak pernah ada. Yang ini mulai dari sebuah gambar, jadi tidak ada yang perlu dikarang dan tidak ada batas atas yang layak dikhawatirkan. Kalau yang Anda punya adalah SVG, inilah yang memberi hasil tajam; kalau yang Anda punya adalah foto, itulah yang lain.

Apakah gratis, dan apakah saya perlu akun?

Gratis, dan tidak ada akun, tidak ada masuk, tidak ada masa uji coba, dan tidak ada tanda air. Tidak ada batas jumlah atau ukuran file-nya juga, karena tidak ada server yang membayarnya — pekerjaannya terjadi di mesin Anda sendiri. Situs ini memasang iklan, dan itulah yang membiayainya; iklan tidak diberi apa pun tentang file Anda.

Apakah jalan tanpa internet?

Ya. Muat halamannya sekali, lalu putuskan koneksi internet dan ia tetap bekerja. Itu juga cara paling sederhana untuk membuktikan tidak ada yang diunggah: alat yang mengirim karya Anda ke tempat lain untuk digambar akan berhenti begitu Anda mencabut koneksi.