Apakah ada alasan logo Hillary Clinton menyembunyikan takik?

226

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

logo svg best-practice

— IJ Kennedy
sumber

53

Secara teknis ini adalah skema pengelakan bug. Agak mengejutkan dan meresahkan untuk berpikir bahwa semua universitas dan vendor arus utama mesin rendering 2D melakukan kesalahan yang sama berulang kali, meskipun kita tahu penyebabnya, kita tahu bagaimana cara memperbaikinya dan tidak seberapa besar kinerja yang sukses pada komputer modern. Dan tidak ada grafis 3D yang jarang dilakukan oleh orang yang melakukan kesalahan ini dan telah mengetahuinya selama 30+ tahun.

— joojaa

6

@NickT Ini bukan masalah pertempuran, ini masalah pencampuran opacity dan cakupan tetapi 3D lebih dari sekadar game. Dalam 3D, kami telah lama menggunakan multisampling untuk menyelesaikan masalah aa. Multisampling (biasanya, bahkan jika hasilnya tidak akan diucapkan begitu) tidak menghitung cakupan dan dengan demikian tidak membuat kesalahan dengan berpikir bahwa cakupan 50% adalah 25% terlihat melalui cakupan 50% lainnya. Meskipun ini mungkin benar, kita juga bisa 50% terlihat atau tidak ada yang terlihat. Dalam hal ini untuk menghindari kebingungan, 50% lainnya dihapus secara manual, kita dapat memperbaiki 3 kasus tetapi tidak semua. Seharusnya tidak dibutuhkan.

— joojaa

5

Sangat menyedihkan bahwa saya jelas mengenalinya untuk menghindari rendering bug perbatasan yang tumpang tindih. Tetapi SVG masih berusia 14 tahun, jadi saya berharap ini bisa diperbaiki suatu hari nanti.

— Francisco Presencia

5

@FranciscoPresencia ini bukan masalah dengan SVG itu hanya masalah dengan cara kami memilih untuk mengimplementasikan render secara salah. Para

— pemberi render

12

@ DA01 tidak ada perbaikan naif sangat sederhana, kode kurang dari algoritma saat ini. Alih-alih melakukan perhitungan berdasarkan cakupan hanya membuat seolah-olah Anda tidak antialias sama sekali pada resolusi yang lebih tinggi kemudian filter gambar ke resolusi nyata. Ini tidak akan pernah tumpah dari bawah ke atas karena tidak dapat membuat kesalahan karena sebagian besar elemen depan mengaburkan seluruhnya. Kartu grafis melakukan ini sepanjang waktu tentang pengaturan x4 x8 x16 aa dalam pengaturan kartu gfx.

— joojaa

233

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:

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.

— Cai
sumber

6

Ini sebenarnya bisa sama besarnya dengan masalah pencetakan. Dalam pencetakan digital setidaknya svg biasanya akan dirasterisasi sebelum dikirim ke printer, dan jenis artefak yang sama dapat muncul. (proyek terakhir di perusahaan terakhir saya (printer komersial besar) melibatkan penulisan perangkat lunak untuk membantu mengidentifikasi hal-hal semacam ini sebelum pekerjaan mahal untuk meletakkan tinta di atas kertas selesai.)

— Mr.Mindor

1

Karena kita berbicara tentang politik AS, maksudmu "artefak"?

— Andrew Rasmussen

5

Menurut english.se maksud saya artefak, bukan artefak. (Tapi karena saya orang Inggris, maksud saya artefak terlepas)

— Cai

Ada jarang ada alasan ... hanya ingin tahu: apakah ada yang pernah alasan apapun?

— Alois Mahdal

@AloisMahdal Saya sangat meragukannya.

— Cai

61

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.

— Yakk
sumber

1

Deskripsi Anda berlaku dalam kasus grafik yang mengandung saluran alfa, atau dalam kasus menggambar subpixel saat anti-aliasing. Contoh OP akan menunjukkan artefak takik untuk lapisan campuran yang bertentangan dengan yang dimaksudkan. Saya sarankan masalah ini lebih terkait dengan kesalahan registrasi dalam pencetakan.

— Pekka

2

@ Pekka ya, tapi kebanyakan rendering tidak anti-aliasing hari ini.

— Yakk

Jika lapisan atas memiliki transparansi, maka takik akan menghasilkan penarikan bertahap dari lapisan bawah dari tepi yang berdampak pada warna anti-aliasing dan tingkat atas. Respons yang lebih tepat adalah memiliki potongan harga persegi panjang (dengan ukuran yang sulit diperkirakan) di daerah di mana pencampuran tidak diinginkan. Bagaimana Anda menghitung ini?

— Pekka

@ pekka Jika lapisan atas memiliki jumlah transparansi sedang, masalah ini jauh lebih tidak bermasalah (karena Anda dapat melihat warna merah di bawah warna biru). Ketika transparansi atas mendekati opacity, dekati solusi di atas. Saat ia pergi dari opacity, pendekatan pra-komposisi itu. Masalah umumnya rumit mengingat kesalahan registrasi, masalah build-up (terlalu banyak layer!), Anti-aliasing, dan yang lainnya: pada titik tertentu, Anda ingin menulis vektor khusus untuk setiap format output, atau membuat vektor entah bagaimana caranya. Saya hanya mencoba untuk menjawab penyebab teknis yang tepat dari masalah yang diselesaikan takik.

— Yakk

1

@ Pekka persegi panjang lebih sulit untuk menggambar dan kemudian Anda berakhir dengan masalah yang berlawanan dari masalah yang sama di latar belakang menunjukkan palung. Notch adalah semacam kompromi antara satu bug atas sejumlah bug lainnya (takik untuk rendering pada layar tidak memiliki rongga persegi sehingga pelat cetak berlebih dapat dibuat jika diperlukan dengan kesalahan minimal). Tetapi benar-benar tidak ada alasan untuk ada kebutuhan untuk melakukan ini, hanya saja penyaji kami melakukan kesalahan itulah yang ada di sana. Kita bisa 3 masalah dengan mudah dengan mengubah cara kita rasterize.

— joojaa

48

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 .

— DA01
sumber

16

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.

— Pekka
sumber