SVG shape-rendering crispEdges: Kapan Membantu?

Gunakan shape-rendering="crispEdges" ketika SVG sengaja memiliki tepi tegas yang sebagian besar lurus dan pengujian pada ukuran tampilan akhir terlihat lebih baik dengannya. Pertahankan default auto ketika perbedaannya sangat kecil. Pada karya melengkung, petunjuk ini dapat membuat tepi tampak lebih kasar. Petunjuk mengubah cara renderer menggambar bentuk yang ada, bukan bentuk itu sendiri. Spesifikasi SVG 2 menyebutnya petunjuk dan mengizinkan renderer mengurangi anti-aliasing atau menyelaraskan sebagian tepi dengan piksel perangkat.

Perbedaan tersebut penting jika ikon kecil tampak kabur atau logo terlihat bergerigi setelah ekspor. crispEdges tidak dapat mengubah PNG tertanam menjadi path, memperbaiki kontur rusak, atau menjanjikan piksel yang sama di setiap browser. Sebelum mengubah file secara global, bandingkan satu bentuk representatif dengan auto, crispEdges, dan geometricPrecision pada ukuran yang benar-benar akan dilihat orang.

Apa yang diminta crispEdges dari renderer

SVG memiliki empat nilai shape-rendering. Nilai tersebut adalah prioritas, bukan empat format ekspor. Default auto membiarkan renderer menyeimbangkan kecepatan, kontras tepi, dan akurasi geometri. crispEdges mengutamakan kontras tepi yang kuat dan dapat menekan anti-aliasing; geometricPrecision mengutamakan geometri yang setia. Referensi atribut SVG MDN menjelaskan bahwa renderer mungkin memperlakukan semua tepi, atau hanya tepi yang hampir horizontal dan vertikal, secara berbeda. Tidak ada filter penajaman yang diwajibkan.

Atribut pada SVG induk dapat diwarisi bentuk anaknya, sehingga penerapan pada akar dapat memengaruhi lingkaran yang seharusnya tetap mulus. Anda dapat menargetkan satu persegi panjang atau path sebagai gantinya. Jika atribut presentasi SVG dan deklarasi CSS shape-rendering sama-sama berlaku, properti CSS mendapat prioritas.

Kami membandingkan bentuk yang sama pada dua ukuran

Kami membuat satu tanda kisi persegi panjang dan satu kontur melengkung sebagai bentuk SVG asli. Markup, isian, dan viewBox identik pada ketiga kolom; hanya nilai shape-rendering berubah. Setiap bentuk dirender pada 63 dan 111 piksel CSS di Chromium dengan zoom browser 100%. Gambar berikut adalah tangkapan browser dari pengujian lokal tersebut, bukan ilustrasi hasil yang dibayangkan.

Geometri SVG sama, tiga petunjuk, dua ukuran

Tidak satu pun mode mengubah path. Dalam tangkapan ini, perbedaannya terlalu kecil untuk menyatakan satu pengaturan sebagai pemenang umum. Namanya terdengar seperti alat perbaikan, tetapi efeknya bisa kecil untuk bentuk, ukuran, dan renderer tertentu. Periksa aplikasi tujuan sebenarnya sebelum mempertahankan atribut tambahan itu.

Ini adalah satu render Chromium, bukan studi kompatibilitas browser. Penampil PDF, editor desain, atau browser pada skala perangkat lain dapat merasterkan path yang sama secara berbeda. Definisi SVG 2 sengaja membiarkan pilihan implementasi terbuka.

Uji pada satu bentuk sebelum menerapkannya di mana-mana

Simpan salinan SVG, lalu letakkan petunjuk pada bentuk yang representatif. Misalnya, terapkan pada bagian persegi panjang ikon sementara detail melengkung tetap memakai auto:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <rect x="4" y="4" width="16" height="8" fill="#154b67"
        shape-rendering="crispEdges" />
  <path d="M5 18 Q12 11 19 18" fill="none" stroke="#23a6a1"
        stroke-width="2" shape-rendering="auto" />
</svg>

Buka file dalam penampil tujuan pada ukuran ikon kecil dan ukuran lebih besar. Bandingkan dengan asli yang disimpan, termasuk diagonal dan kurva. Jika Anda memberi gaya SVG inline dengan CSS, periksa aturan yang menimpa atribut Anda. Hapus petunjuk ketika tidak menghasilkan perbaikan berarti; properti yang tidak diperlukan mempersulit diagnosis perbedaan tampilan berikutnya.

Sesuaikan perbaikan dengan gejala sebenarnya

Untuk sprite PNG yang kisi piksel persisnya merupakan desain, mempertahankan raster bisa menjadi pilihan paling sederhana. CSS image-rendering: pixelated mengendalikan cara gambar yang diskalakan di-sampling; properti itu berbeda dari shape-rendering SVG. Panduan konversi pixel art membahas kapan mempertahankan kisi, membuat ubin vektor, atau sengaja menghaluskan kontur.

Kapan PerfectVector sesuai

Jika satu-satunya sumber Anda adalah PNG kecil yang diratakan dan Anda memerlukan path yang bisa diedit, petunjuk rendering tidak dapat menyediakannya. PerfectVector berguna pada tahap sebelumnya itu: konversikan PNG menjadi kandidat SVG, lalu periksa bentuk pada ukuran yang diperlukan. Periksa outline, lubang dalam, dan detail kecil sebelum mencoba petunjuk tampilan pada path tertentu. Tracing dapat menafsirkan ulang piksel sebagai geometri; tracing tidak dapat menentukan apakah bentuk bertangga pixel art seharusnya menjadi kurva mulus.

Pertahankan PNG ketika kisi asli adalah karya akhirnya. Jika Anda sudah memiliki SVG bersih dan hanya tampilan browsernya yang aneh, perbaiki tampilan atau geometri secara langsung. Ketika PNG yang diratakan memang memerlukan kontur yang bisa diedit, buat kandidat SVG dengan PerfectVector, periksa path-nya, dan bandingkan render browser pada ukuran akhir sebelum menambahkan crispEdges.

FAQ

Apakah crispEdges menghapus anti-aliasing dari setiap bentuk SVG? Tidak. Petunjuk meminta renderer mengutamakan kontras tepi. Spesifikasi mengizinkan implementasi berbeda, termasuk yang hanya mengubah beberapa tepi yang hampir vertikal atau horizontal. Uji keluaran dalam penampil yang akan Anda gunakan.

Haruskah saya memasang shape-rendering="crispEdges" pada seluruh SVG? Hanya jika setiap bentuk anak mendapat manfaat. Petunjuk pada akar juga dapat memengaruhi anak yang melengkung. Menerapkan atribut pada satu bentuk persegi panjang lebih mudah dievaluasi dan lebih kecil kemungkinannya mengasari kurva.

Apakah crispEdges memperbaiki sambungan putih atau PNG kabur dalam SVG? Petunjuk tidak dapat menutup celah nyata atau mengganti piksel raster dengan path vektor. Diagnosiskan geometri sambungan terlebih dahulu. Untuk PNG yang diskalakan, gunakan metode penskalaan raster yang sesuai atau buat path vektor yang bisa diedit jika itulah kebutuhan sebenarnya.

Sources

1. W3C — Properti shape-rendering SVG 2 — Mendefinisikan empat nilai sebagai petunjuk renderer dan menjelaskan kompromi yang diizinkan.
2. MDN — Atribut shape-rendering SVG — Mendokumentasikan bentuk SVG yang berlaku, pewarisan, dan prioritas CSS.
3. MDN — Properti shape-rendering CSS — Menjelaskan perilaku properti dan mengapa rendering kurva dapat berbeda.
4. MDN — Properti image-rendering CSS — Membedakan penskalaan piksel raster dari rendering tepi bentuk vektor.