SVG Diimpor pada Ukuran Keliru: Temukan Penyebab dan Perbaiki

Ketika SVG diimpor pada ukuran keliru, path biasanya tidak rusak. Aplikasi ekspor dan impor berbeda pendapat tentang pemetaan satuan koordinat SVG ke piksel, inci, atau milimeter. Itulah sebabnya file sama dapat terlihat benar di browser, menjadi sangat kecil di Figma, dan masuk pada skala lain di CAD atau perangkat lunak potong.

Jangan menggambar ulang atau mengubah ukuran bagian individual dahulu. Tambahkan persegi acuan berukuran diketahui, impor seluruh file, lalu ukur persegi tersebut. Satu pengukuran menunjukkan apakah skala dokumen berubah atau gambar itu sendiri keliru.

Tiga ukuran di dalam SVG

SVG dapat menjelaskan tiga hal terkait yang sering disebut “ukuran”. Spesifikasi sistem koordinat SVG 2 mendefinisikan hubungan koordinat pengguna, viewport, dan viewBox.

1. Geometri merupakan koordinat dalam path dan bentuk. Persegi panjang mungkin memiliki rentang 0 hingga 100 dalam sistem koordinat file sendiri.
2. viewBox menyatakan persegi panjang sistem koordinat yang terlihat. viewBox="0 0 100 100" berarti area gambar terlihat memiliki rentang 100 satuan pengguna pada setiap arah.
3. Viewport merupakan ukuran tampilan atau impor. Elemen akar mungkin menyatakan width="100mm", width="400", atau tanpa lebar. Aplikasi penerima kemudian menentukan cara mengubah nilai itu menjadi satuan dokumennya sendiri.

Berikut persegi lengkap 100 satuan dengan ukuran keluaran fisik eksplisit:

<svg xmlns="http://www.w3.org/2000/svg"
  width="25mm" height="25mm" viewBox="0 0 100 100">
  <rect x="0" y="0" width="100" height="100" fill="#2563eb" />
</svg>

Geometrinya 100 kali 100 satuan pengguna, sementara viewport yang diinginkan 25 kali 25 mm. viewBox memetakan satu ruang koordinat ke lainnya. Hapus width dan height, atau ubah menjadi angka tanpa satuan, dan pengimpor memiliki lebih banyak kebebasan memilih ukuran tampilannya sendiri.

Panduan mengedit SVG yang lebih panjang membahas perubahan kode aman. Untuk masalah ini, biarkan data path tetap sama sambil memeriksa elemen akar <svg>.

Mengapa DPI disalahkan

Path SVG tidak memiliki resolusi piksel seperti PNG atau JPG. DPI muncul ketika perangkat lunak mengonversi piksel CSS dan satuan fisik, atau ketika aplikasi desain menerapkan konvensi ekspor sendiri pada satuan tersebut.

Spesifikasi CSS Values mendefinisikan 1in sebagai 96 piksel CSS dan 1pt sebagai 1/72 inci. Alur yang keliru memperlakukan piksel CSS sebagai point menghasilkan ketidaksesuaian skala 96 banding 72, atau 1.333, yang umum. Faktor lain dapat muncul ketika pengimpor mengabaikan width dan height fisik, hanya menggunakan viewBox, atau menerapkan pengaturan satuan dokumen sendiri.

Karena itu, “ubah DPI” merupakan saran tidak lengkap. Mungkin tidak ada nilai DPI raster untuk diubah. Hitung faktor skala dahulu:

scale factor = intended size / imported size

Jika persegi 100 mm diimpor sebagai 75 mm, faktor koreksinya 100 / 75 = 1.3333. Skalakan seluruh sketsa atau dokumen impor dengan faktor tersebut, lalu periksa persegi lagi.

Persegi acuan membedakan dua masalah yang tampak sama pada impor pertama. Jika persegi dan gambar meleset dengan proporsi sama, perbaiki seluruh dokumen. Jika persegi benar tetapi gambar tidak, jangan ubah satuan dokumen dan periksa batas atau transformasi gambar.

Jalankan uji persegi acuan

Gunakan persegi cukup besar untuk diukur dengan nyaman tetapi cukup kecil untuk ditempatkan di samping gambar.

1. Dalam editor sumber, gambar persegi tepat 10 mm, 1 inci, atau ukuran lain yang diketahui.
2. Berikan isian atau stroke berbeda dan tempatkan di luar desain akhir.
3. Ekspor gambar dan persegi bersama sebagai satu SVG.
4. Impor file ke aplikasi tujuan tanpa menyeret pegangan pengubah ukuran.
5. Ukur persegi dengan alat dimensi aplikasi tujuan.
6. Bagi dimensi yang diinginkan dengan dimensi impor.
7. Skalakan seluruh impor sekali. Jangan ubah ukuran bentuk terpisah.
8. Hapus persegi hanya setelah pengukuran akhir benar.

Uji ini juga menemukan diagnosis keliru. Jika persegi acuan diimpor benar, satuan dokumen kemungkinan baik. Cari grup bertransformasi, stroke yang lebar visualnya termasuk dalam batas, objek di luar kanvas, atau pengimpor yang menyesuaikan isi ke halaman. Jika satu sudut tajam ber-stroke mengubah batas terlihat, ikuti diagnosis lonjakan miter sebelum mengubah skala fisik dokumen.

Untuk CNC, laser, dan pekerjaan 3D, gunakan persegi dengan satuan fisik. Persegi piksel dapat memastikan penskalaan proporsional, tetapi tidak membuktikan milimeter yang dibutuhkan alur mesin.

Perbaiki file atau impor?

Mengedit file berguna ketika Anda mengontrol master dan berulang kali mengirim ke jenis alur sama. Memperbaiki impor lebih aman ketika aplikasi CAD atau potong memiliki konvensi skala diketahui dan SVG sudah bekerja benar di tempat lain.

Perangkat lunak CAD dan potong membutuhkan pemeriksaan tambahan

Browser hanya perlu menampilkan gambar. Alur CNC, laser, dan 3D membutuhkan hasil fisik tepat. Setelah skala benar, periksa geometri terpisah:

• Pastikan dokumen mesin menggunakan satuan yang diharapkan.
• Ukur fitur nyata, bukan hanya kotak batas keseluruhan.
• Pastikan profil tertutup tetap tertutup.
• Cari persegi panjang latar tersembunyi yang memperbesar batas.
• Pastikan pratinjau toolpath, sketsa, atau ekstrusi sebelum menggunakan bahan.

Panduan gambar ke SVG untuk CNC membahas pembersihan path dan penyerahan CAM. Jika langkah berikutnya ekstrusi, gunakan alur SVG pencetakan 3D setelah skala benar.

Untuk Shaper Origin, lanjutkan dengan daftar pemeriksaan ukuran fisik dan jenis potongan. Memastikan skala merupakan satu langkah; path impor juga membutuhkan penetapan potongan yang diinginkan sebelum routing.

Setelah memastikan dimensi yang diinginkan, periksa ukuran terhadap alas potong sebelum layar persiapan akhir mesin.

Untuk kartu gambar cetak, panduan tata letak kartu jadwal visual memeriksa kesesuaian gambar, dimensi halaman PDF, dan penskalaan cetak. SVG berukuran benar masih dapat berada pada halaman yang diperkecil printer.

Peran PerfectVector

PerfectVector mengonversi gambar raster menjadi path SVG yang dapat diedit. Alur SVG dan DXF untuk CNC berguna ketika satu-satunya sumber PNG atau JPG dan Anda membutuhkan geometri vektor untuk CAM. Alat ini tidak mengetahui ukuran fisik akhir bagian Anda, sehingga tetap perlu menetapkan dan memeriksa dimensi di perangkat lunak tujuan.

Pembagian itu penting. Pemvektoran memulihkan bentuk yang dapat diskalakan. Persegi berukuran diketahui dan pengukuran CAM menetapkan skala fisik. Memperlakukan keduanya sebagai dua pemeriksaan mencegah penelusuran bersih menjadi potongan berukuran keliru.

FAQ

Mengapa SVG diimpor lebih kecil daripada ukuran ekspor? Aplikasi ekspor dan impor mungkin memetakan satuan pengguna SVG, piksel CSS, point, atau satuan fisik secara berbeda. Tambahkan persegi berukuran diketahui dan bandingkan dimensi yang diinginkan dengan hasil impor. Jika seluruh file berubah dengan satu faktor, skalakan dokumen sekali, jangan edit path individual.

Apakah SVG memiliki DPI? Geometri SVG tidak bergantung pada resolusi, sehingga tidak memiliki kepadatan piksel tetap seperti raster. Konversi menyerupai DPI penting ketika perangkat lunak memetakan piksel CSS atau satuan desain ke inci atau milimeter. Konvensi pengimpor, bukan resolusi gambar tersembunyi, sering menjadi sumber ketidaksesuaian.

Apa pengaruh viewBox terhadap ukuran SVG? viewBox mendefinisikan persegi panjang koordinat terlihat dan memungkinkan perender memetakan satuan pengguna ke viewport. Dengan sendirinya, viewBox tidak menyatakan ukuran fisik. width dan height akar, CSS, atau aplikasi penerima menentukan besar viewport.

Mengapa SVG berukuran benar di browser tetapi keliru di Fusion atau LightBurn? Browser dapat merender SVG dalam viewport CSS, sementara CAD dan perangkat lunak laser harus memetakannya ke satuan dokumen fisik. Pengimpor mungkin menggunakan konvensi berbeda atau mengabaikan sebagian metadata ukuran SVG. Ukur persegi acuan dan koreksi seluruh impor dengan faktor skala yang diperoleh.

Apakah SVG perlu dikonversi ke DXF untuk memperbaiki ukuran? Bukan sebagai langkah pertama. Konversi format dapat membawa ambiguitas skala sama atau menambahkan yang baru. Temukan faktor dengan persegi acuan dahulu. Gunakan DXF ketika alur tujuan lebih menyukainya, lalu periksa dimensi lagi setelah impor.

Sources

1. W3C — Sistem Koordinat SVG 2 — Mendefinisikan satuan pengguna, viewport, viewBox, dan transformasi.
2. W3C — CSS Values and Units Level 4 — Mendefinisikan konversi acuan antara piksel CSS, inci, dan point.
3. Autodesk Fusion — Insert SVG — Mendokumentasikan kontrol penempatan dan skala SVG dalam sketsa Fusion.

Sebelum toolpath atau potongan, siapkan SVG atau DXF untuk CNC dan periksa hasil. Ukur persegi acuan, satu fitur nyata, dan pratinjau CAM akhir sebelum menghapus persegi dari file produksi.