Apakah ada alasan logo Hillary Clinton menyembunyikan takik?

Pertanyaan ini paling tidak bersifat politis!

Sambil melihat versi SVG dari logo Hillary yang ditemukan di sini , saya perhatikan ada dua takik di dua palang vertikal dari H. Bilah panah panah menutupi takik sehingga tidak terlihat saat melihat logo. Tapi saya sangat ingin tahu mengapa perancang mungkin menaruh takik ini. Adakah yang tahu

Untuk mencegah kemungkinan render artefak.

Tanpa takik, Anda mungkin akan melihat ujung-ujung bentuk bawah di mana mereka bertemu ujung-ujung bentuk overlay (toh di layar, sebenarnya tidak masalah saat mencetak).

Anda dapat melihat contoh dan penjelasan tentang kemungkinan artefak di sini:

• Gambar terlihat timbul ketika dikonversi ke SVG

• Bagaimana cara menempatkan satu objek di depan dan di belakang objek lain pada saat yang sama?

Jarang ada alasan untuk memiliki tepi selaras sempurna yang akan menyebabkan artefak seperti itu sehingga menggunakan "takik" seperti dalam logo Hillary adalah kebiasaan yang baik untuk masuk.

Memahami rasterisasi dan algoritma pelukis mungkin bisa membantu.

Salah satu cara rendering grafik vektor (grafis yang ditentukan oleh poligon, bukan piksel) ke piksel adalah dengan merasterisasi poligon saat menjalankan algoritme pelukis.

Algoritma pelukis adalah proses bottom-up di mana Anda pertama kali meletakkan latar belakang, kemudian menggambar di atas latar belakang itu dengan setiap lapisan warna sampai Anda mencapai lapisan atas.

Saat Anda menyimpan lapisan, Anda memperhatikan cakupannya (biasanya disimpan dalam saluran tambahan, saluran alpha), dan menggunakannya untuk mencampur warna yang ditambahkan dengan apa yang sudah ada.

Jika layer baru Anda mencakup piksel sebesar 50%, dan itu berwarna biru, Anda rata-rata warna piksel saat itu dengan biru dan menggambar yang ada di sana.

Segalanya menjadi sedikit lebih rumit jika Anda membuat gambar dengan transparansi, tetapi tidak secara mendasar.

Rasterisasi adalah proses mengubah poligon menjadi piksel. Di sini, kami menghitung seberapa banyak poligon mencakup piksel yang diberikan menggunakan aljabar, lalu menghitung jumlah cakupan.

Jika Anda memiliki dua sisi poligon yang bertepatan - persis di atas satu sama lain - tetapi keduanya menutupi setengah piksel yang diberikan, yang terjadi adalah masalah.

Misalkan poligon bawah berwarna merah dan biru atas dan latar belakang putih.

Pertama kita mengecat merah. Ini bercampur dengan putih, mengarah ke 50% putih, 50% merah.

Kami kemudian mengecat biru. Ini bercampur dengan 50% putih 50% merah dan kami mendapatkan 25% putih 25% merah 50% biru. Hal yang sama terjadi jika merah dan biru bertemu di tengah, atau jika biru menutupi merah sepenuhnya.

Tapi "pada kenyataannya" poligon biru benar-benar menutupi yang merah, jadi mengapa kita melihatnya? Karena algoritma lupa perincian penentuan posisi sub-pixel.

Selama ada cakupan 100% dari satu poligon, ini bukan masalah.

Sekarang, masalah ini tidak mendasar. Anda dapat melakukan rendering poligon dengan pendekatan seperti ray-tracing (di mana Anda over-render dengan faktor N ^ 2 pada titik-titik), atau bahkan pendekatan seperti vektor murni (di mana Anda mengurangi pemblokiran bentuk dari geometri bentuk di bawah mereka, hilangkan mereka). Dalam kedua kasus tidak melakukan "tersembunyi" warna bocor ke gambar output.

Algoritma pelukis bukanlah satu-satunya kasus di mana geometri "tersembunyi" dapat bocor. Jika Anda mencetak dengan media buram, terkadang lapisan warna tidak selaras sempurna. Jadi lapisan bawah bocor ketika lapisan paling atas harus menutupinya sepenuhnya.

Karena Anda tidak tahu bagaimana gambar vektor Anda akan dihasilkan, takik seperti itu memungkinkan Anda membuat gambar yang lebih kuat terhadap teknik pencetakan / tampilan yang tidak sempurna.

Cai benar. Saya pikir saya akan menambahkan jawaban visual juga.

Alasan ini terjadi adalah karena itu SVG. Tidak seperti gambar raster tempat Anda mengontrol setiap piksel yang dirender, rasterisasi SVG terjadi di peramban ... sehingga peramban membuat keputusan ini.

Salah satu keputusan yang harus diambil browser adalah kapan melakukan anti-aliasing. Biasanya akan melakukan ini ketika titik di sepanjang garis jatuh pada piksel. Maka akan anti alias pixel itu. Karena itu akan membuat semua lapisan SVG, itu akan melakukan ini untuk setiap lapisan dan di situlah Anda dapat mulai mendapatkan artefak tepi. Ini terutama benar ketika Anda bermain dengan zoom SVG karena itu akan menyebabkan tumpang tindih piksel layar yang berbeda.

Berikut cuplikan layar dari kotak hijau yang tumpang tindih dengan kotak merah di Chrome. Bagian atas adalah pada zoom halaman 100%, bagian bawah diperbesar. Perhatikan perbedaan rendering tepi itu:

Jika saya menyaring gambar itu dan memperbesar untuk menunjukkan rasterisasi, Anda dapat memperoleh gambaran yang lebih jelas tentang apa yang terjadi:

Perbaikan ideal di sini adalah agar rasterizer SVG di browser menjadi 'lebih pintar' dan tidak membuat hal-hal yang ditumpuk, tetapi mengingat bahwa elemen SVG dapat dimanipulasi secara eksternal dan hidup (karena itu hanya file XML) itu bukan solusi praktis untuk browser.

Jadi, alih-alih, perancang mengambil keputusan itu dengan menggunakan takikan yang Anda lihat.

Ngomong-ngomong, konsep ini mirip dengan cara menangani registrasi dalam pencetakan dengan menggunakan trapping .

Mencetak dalam banyak warna memerlukan registrasi yang akurat untuk menghindari kesenjangan yang tidak enak dilihat dan menjadi perhatian ketika artefak terdiri dari berbagai sumber. Kekhawatiran serupa dapat terjadi bahkan pada produk digital di mana aritmatika presisi terbatas tentu menimbulkan kesalahan.

Masalah yang dihindari adalah salah satu perangkap terbalik - di mana penyimpangan dari grafik yang dimaksudkan dapat menghasilkan garis tipis warna latar belakang yang ditampilkan di sebelah kiri tepi coincident vertikal. Karena warnanya sangat kontras, dampaknya akan terlihat (coba pindahkan garis yang terputus, bahkan 1 piksel ke kiri vertikal.

Pendekatan ini tidak dimaksudkan untuk berdampak pada pencampuran tinta. Koordinat konsisten pada layar menghindari masalah, sementara setengah-toning digunakan untuk mengelola warna.