Có một lý do nào khiến logo của Hillary Clinton bị ẩn đi?

226

Câu hỏi này không phải là chính trị trong ít nhất!

Khi nhìn vào phiên bản SVG của logo Hillary được tìm thấy ở đây , tôi nhận thấy có các rãnh ở hai thanh dọc của H. Thanh ngang mũi tên che đi các rãnh để chúng không nhìn thấy khi xem logo. Nhưng tôi rất tò mò tại sao nhà thiết kế có thể đã đưa vào các rãnh này. Có ai biết không?

logo svg best-practice

— IJ Kennedy
nguồn

53

Về mặt kỹ thuật đây là một kế hoạch lách lỗi. Thật đáng ngạc nhiên và đáng lo ngại khi nghĩ rằng tất cả các trường đại học và nhà cung cấp chính của công cụ kết xuất 2D đều mắc lỗi lặp đi lặp lại, mặc dù chúng ta biết nguyên nhân, chúng ta biết cách khắc phục nó không phải là một thành tích lớn. trên một máy tính hiện đại. Và không có người đồ họa 3D nào hiếm khi mắc lỗi này và đã biết về nó trong hơn 30 năm.

— joojaa

6

@NickT Không phải là vấn đề chiến đấu của nó, đó là vấn đề trộn lẫn độ mờ đục và độ bao phủ nhưng 3D không chỉ là trò chơi. Trong 3D, chúng tôi đã sử dụng nhiều mẫu để giải quyết vấn đề aa. Đa mẫu (thông thường, ngay cả khi kết quả sẽ không được phát âm rõ ràng) không tính toán phạm vi bảo hiểm và do đó không phạm sai lầm khi nghĩ rằng phạm vi bảo hiểm 50% là tỷ lệ che phủ 50% có thể nhìn thấy khác 50%. Mặc dù điều này có thể đúng nhưng câu trả lời cũng có thể hiển thị 50% hoặc không nhìn thấy được. Trong trường hợp này để tránh nhầm lẫn, 50% khác được xóa thủ công, chúng tôi có thể sửa 3 cái nhưng không phải tất cả. Không cần thiết.

— joojaa

5

Thật đáng buồn khi tôi nhận ra rõ ràng nó là để tránh một lỗi kết xuất của các đường viền chồng chéo. Nhưng SVG vẫn còn 14 tuổi nên tôi hy vọng điều này sẽ được khắc phục vào một ngày nào đó.

— Francisco Presencia

5

@FranciscoPresencia không phải là vấn đề với SVG, đây chỉ là vấn đề với cách chúng tôi chọn để thực hiện sai các kết xuất. Các trình kết xuất SVG khác nhau có mức độ nghiêm trọng khác nhau của vấn đề này

— joojaa

12

@ DA01 không có sửa chữa ngây thơ là cực kỳ đơn giản, ít mã hơn thuật toán hiện tại. Thay vì thực hiện tính toán dựa trên phạm vi chỉ hiển thị như thể bạn hoàn toàn không phản kháng ở độ phân giải cao hơn, sau đó lọc hình ảnh xuống độ phân giải thực. Điều này sẽ không bao giờ tràn từ dưới lên vì nó không thể phạm sai lầm phần lớn phía trước che khuất hoàn toàn nó. Các card đồ họa thực hiện điều này mọi lúc mà các cài đặt x4 x8 x16 aa nói về trong cài đặt thẻ gfx.

— joojaa

233

Để ngăn chặn các đồ tạo tác có thể.

Nếu không có các rãnh, bạn có thể thấy các cạnh của hình dạng dưới cùng, nơi chúng gặp các cạnh của hình dạng lớp phủ (dù sao trên màn hình, nó không thực sự là một vấn đề khi in).

Bạn có thể xem các ví dụ và giải thích về các đồ tạo tác có thể có ở đây:

Hiếm khi có bất kỳ lý do nào để có các cạnh được căn chỉnh hoàn hảo sẽ gây ra các đồ tạo tác như vậy, vì vậy sử dụng "các rãnh" như trong logo của Hillary là một thói quen tốt để có được.

— Cái
nguồn

6

Điều này thực sự có thể là vấn đề lớn với việc in ấn. Trong in kỹ thuật số, ít nhất, Svg thường sẽ được rasterized trước khi được gửi đến máy in và các loại tạo tác tương tự có thể xuất hiện. (dự án cuối cùng tại chủ nhân cuối cùng của tôi (máy in thương mại lớn) tham gia viết phần mềm để giúp xác định những thứ như thế trước khi công việc tốn kém đưa mực trên giấy đã được thực hiện.)

— Mr.Mindor

1

Vì chúng ta đang nói về chính trị Hoa Kỳ, bạn có nghĩa là "tạo tác"?

— Andrew Rasmussen

5

Theo tiếng Anh.se, ý tôi là đồ tạo tác, không phải đồ tạo tác. (Nhưng vì tôi là người Anh, ý tôi là đồ tạo tác bất kể)

— Cai

Hiếm khi có bất kỳ lý do ... chỉ tò mò: có bao giờ lý do?

— Alois Mahdal

@AloisMahdal Tôi rất nghi ngờ điều đó.

— Cai

61

Hiểu rasterization và thuật toán của họa sĩ có thể giúp đỡ.

Một cách để hiển thị đồ họa vector (đồ họa được xác định bởi đa giác, thay vì pixel) thành pixel là rasterize đa giác trong khi chạy thuật toán của họa sĩ.

Thuật toán của họa sĩ là một quá trình từ dưới lên, nơi đầu tiên bạn đặt nền xuống, sau đó vẽ lên trên nền đó với mỗi lớp màu cho đến khi bạn đạt đến lớp trên cùng.

Khi bạn gửi một lớp, bạn chú ý đến phạm vi bảo hiểm của nó (thường được lưu trữ trong một kênh phụ, kênh alpha) và sử dụng nó để trộn màu được thêm vào với những gì đã có.

Nếu lớp mới của bạn bao phủ một pixel bằng 50% và nó có màu xanh lam, bạn hãy trung bình màu hiện tại của pixel đó bằng màu xanh và thay vào đó hãy vẽ nó ở đó.

Mọi thứ trở nên phức tạp hơn một chút nếu bạn đang tạo một hình ảnh với độ trong suốt, nhưng về cơ bản không phải là như vậy.

Rasterization là quá trình biến đa giác thành pixel. Ở đây, chúng tôi tìm ra số lượng đa giác bao phủ một pixel đã cho bằng cách sử dụng một số đại số, sau đó tính toán mức độ bao phủ.

Nếu bạn có hai cạnh của một đa giác trùng khớp - chính xác là chồng lên nhau - nhưng cả hai đều che một pixel nhất định, điều gì xảy ra là một vấn đề.

Giả sử đa giác dưới cùng có màu đỏ và màu xanh trên cùng và nền màu trắng.

Đầu tiên chúng ta sơn màu đỏ. Điều này trộn với màu trắng, dẫn đến 50% trắng 50% đỏ.

Chúng tôi sau đó sơn màu xanh. Sự pha trộn này với 50% trắng 50% đỏ và chúng ta nhận được 25% trắng 25% đỏ 50% xanh. Điều tương tự xảy ra nếu màu đỏ và màu xanh gặp nhau ở giữa, hoặc nếu màu xanh bao phủ hoàn toàn màu đỏ.

Nhưng "trong thực tế" đa giác màu xanh hoàn toàn bao phủ màu đỏ, vậy tại sao chúng ta lại nhìn thấy nó? Bởi vì thuật toán quên chi tiết định vị pixel phụ.

Miễn là có phạm vi bao phủ 100% của một đa giác, đây không phải là vấn đề.

Bây giờ, vấn đề này không phải là cơ bản. Bạn có thể thực hiện kết xuất đa giác bằng cách tiếp cận theo dõi tia (trong đó bạn kết xuất quá mức theo hệ số N ^ 2 tại các điểm) hoặc thậm chí là cách tiếp cận giống như vectơ thuần túy (trong đó bạn trừ các hình dạng chặn khỏi hình dạng của hình dạng bên dưới họ, cắt chúng ra). Trong cả hai trường hợp, màu "ẩn" không bị rò rỉ qua hình ảnh đầu ra.

Thuật toán của họa sĩ không phải là trường hợp duy nhất mà hình học "ẩn" có thể rò rỉ qua. Nếu bạn đang in bằng phương tiện mờ, đôi khi các lớp màu không được căn chỉnh hoàn hảo. Vì vậy, lớp dưới bị rò rỉ khi lớp trên cùng phải được che phủ hoàn toàn.

Vì bạn không biết hình ảnh vector của mình sẽ được xuất như thế nào, các rãnh như thế cho phép bạn tạo ra hình ảnh mạnh mẽ hơn trước các kỹ thuật in / hiển thị không hoàn hảo.

— Yakk
nguồn

1

Mô tả của bạn áp dụng trong trường hợp đồ họa chứa các kênh alpha hoặc trong trường hợp bản vẽ subpixel khi khử răng cưa. Ví dụ về OP sẽ hiển thị các tạo phẩm notch cho các lớp được trộn lẫn với những gì được dự định. Tôi đề nghị vấn đề liên quan nhiều hơn đến lỗi đăng ký trong in ấn.

— Pekka

2

@pekka có, nhưng hầu hết kết xuất hiện không khử răng cưa ngày nay.

— Yakk

Nếu lớp trên cùng có bất kỳ độ trong suốt nào, thì phần notch sẽ dẫn đến việc rút dần dần lớp dưới từ cạnh tác động lên cả khử răng cưa và màu cấp cao nhất. Một phản ứng thích hợp hơn sẽ là giảm giá hình chữ nhật (có kích thước khó ước tính) trong khu vực không mong muốn trộn. Làm thế nào để bạn định lượng này?

— Pekka

@pekka Nếu lớp trên cùng có độ trong suốt trung bình, thì vấn đề này sẽ ít gặp vấn đề hơn (dù sao bạn cũng có thể thấy màu đỏ dưới màu xanh). Khi tính minh bạch của các phương pháp tiếp cận hàng đầu, tiếp cận giải pháp trên. Khi nó đi xa khỏi độ mờ đục, tiếp cận tiền tổng hợp nó. Vấn đề chung là các lỗi đăng ký khó khăn, các vấn đề xây dựng (quá nhiều lớp!), Khử răng cưa và mọi thứ khác: đến một lúc nào đó, bạn muốn viết các vectơ tùy chỉnh cho mỗi định dạng đầu ra hoặc bằng cách nào đó chuyển các vectơ. Tôi chỉ đơn giản là cố gắng trả lời nguyên nhân kỹ thuật chính xác của vấn đề mà notch giải quyết.

— Yakk

1

@Pekka một hình chữ nhật khó vẽ hơn và sau đó bạn kết thúc với vấn đề ngược lại của cùng một vấn đề trong đó nền hiển thị máng. Notch là một sự thỏa hiệp giữa một lỗi so với một số lỗi khác (notch dành cho hiển thị trên màn hình sẽ không có khoang vuông để có thể tạo ra các tấm in đè nếu cần với các lỗi tối thiểu). Nhưng thực sự không có lý do gì để cần phải làm điều này, chỉ là các trình kết xuất của chúng tôi hoạt động sai, đó là tất cả những gì có trong đó. Chúng ta có thể dễ dàng cả 3 vấn đề bằng cách chuyển đổi cách chúng ta rasterize.

— joojaa

48

Cai là đúng. Tôi nghĩ tôi cũng muốn thêm một câu trả lời trực quan.

Lý do điều này xảy ra là vì nó là một SVG. Không giống như hình ảnh raster nơi bạn điều khiển từng pixel được hiển thị, quá trình raster của SVG xảy ra trong trình duyệt ... vì vậy trình duyệt đưa ra các quyết định này.

Một trong những quyết định mà trình duyệt phải đưa ra là khi nào nên khử răng cưa. Nó thường sẽ làm điều này khi một điểm dọc theo một điểm rơi trên một pixel. Sau đó nó sẽ chống bí danh pixel đó. Vì nó sẽ kết xuất tất cả các lớp của SVG, nên nó sẽ thực hiện điều này cho từng lớp và đó là nơi bạn có thể bắt đầu tạo ra các tạo tác cạnh. Điều này đặc biệt đúng khi bạn chơi với zoom của SVG vì điều đó sẽ khiến nó chồng lấp các pixel màn hình khác nhau.

Đây là ảnh chụp màn hình của hộp màu xanh chồng lên hộp màu đỏ trong Chrome. Phần trên cùng là thu phóng trang 100%, phần dưới được phóng to. Lưu ý sự khác biệt trong hiển thị cạnh đó:

Nếu tôi chụp màn hình đó và phóng to để hiển thị rasterization, bạn có thể hình ảnh rõ hơn về những gì đang diễn ra:

Cách khắc phục lý tưởng ở đây sẽ là trình rasterizer SVG trong trình duyệt trở nên 'thông minh hơn' và không hiển thị những thứ được xếp chồng lên nhau, nhưng do các phần tử SVG có thể được thao tác bên ngoài và sống (vì đó chỉ là một tệp XML), đó không phải là một giải pháp thực tế cho trình duyệt.

Vì vậy, thay vào đó, nhà thiết kế đưa ra quyết định đó bằng cách sử dụng các rãnh mà bạn nhìn thấy.

Nhân tiện, đây là khái niệm tương tự như cách đối phó với đăng ký trong in ấn bằng cách sử dụng bẫy .

— DA01
nguồn

16

In nhiều màu đòi hỏi phải đăng ký chính xác để tránh những khoảng trống khó coi và là mối quan tâm khi các tạo tác được sáng tác từ nhiều nguồn. Mối quan tâm tương tự có thể xảy ra ngay cả trong các sản phẩm kỹ thuật số trong đó số học chính xác hạn chế nhất thiết phải đưa ra lỗi.

Vấn đề cần tránh là một trong những bẫy ngược - trong đó độ lệch so với đồ họa dự định có thể dẫn đến một đường mỏng của màu nền hiển thị ở bên trái của các cạnh trùng khớp dọc. Vì màu sắc có độ tương phản cao, tác động sẽ rất đáng chú ý (hãy thử di chuyển đường gãy thậm chí 1 pixel sang bên trái theo chiều dọc.

Cách tiếp cận không nhằm mục đích tác động đến việc trộn mực. Các tọa độ nhất quán trên màn hình sẽ tránh được vấn đề, trong khi nửa tông màu được sử dụng để quản lý màu sắc.

— Bắc Kinh
nguồn