Чи є причина, що логотип Хілларі Клінтон заховав виїмки?

226

Це питання принаймні не політичне!

Дивлячись на знайдений тут варіант SVG з логотипом Хілларі , я помітив, що в двох вертикальних смугах H. поперечина стрілки прикриває виїмки, щоб їх не було видно при перегляді логотипу. Але мені дуже цікаво, чому дизайнер може поставити ці виїмки. Хтось знає?

logo svg best-practice

— IJ Kennedy
джерело

53

Технічно це схема обходу помилок. Це трохи дивно і неспокійно думати, що всі університети та основні постачальники 2D-рендеринга роблять одну і ту ж помилку знову і знову, хоча ми знаємо причину, ми знаємо, як виправити це, і це не такий великий хіт продуктивності на сучасному комп’ютері. І жодна людина з 3D-графікою рідко робить цю помилку і знає про неї вже 30 років.

— joojaa

6

@ NickT Це не боротьба з проблемою, це питання змішування непрозорості та покриття, але 3D - це набагато більше, ніж ігри. У 3D ми протягом століть використовували мультисемплінг для вирішення проблеми. Мультисемплінг (як правило, навіть якщо це не буде таким вираженим), не обчислює покриття і, таким чином, не помиляється, думаючи, що 50% покриття є 25% видимим через ще 50% покриття. Хоча це може бути правдою, відповідь також може бути 50% видно або жодне не видно. У цьому випадку, щоб уникнути плутанини, інші 50% видаляються вручну, ми можемо виправити 3 випадки, але не всі. Не повинні бути потрібні.

— joojaa

5

Сумно, що я чітко визнав це таким чином, щоб уникнути помилки, що перекриває рамки. Але SVG ще 14 років, тому я сподіваюся, що це буде виправлено через день.

— Francisco Presencia

5

@FranciscoPresencia це не проблема зі SVG, а лише проблема з тим, як ми вирішили помилково реалізувати рендери. Різні представники SVG мають різну серйозність цієї проблеми

— joojaa

12

@ DA01 жодне наївне виправлення не є надзвичайно простим, його менше коду, ніж поточний алгоритм. Замість того, щоб робити обчислення на основі покриття, просто виведіть так, як ніби ви взагалі не антиалії на більш високій роздільній здатності, а потім відфільтруйте зображення до реальної роздільної здатності. Це ніколи не проллється знизу вгору, оскільки не може помилитися, передня частина елемента повністю затьмарює його. Графічні картки роблять це постійно, що стосується налаштувань x4 x8 x16 aa в налаштуваннях карти gfx.

— joojaa

233

Для запобігання можливого відображення артефактів.

Без виїмок ви, швидше за все, побачите краї нижньої форми, де вони відповідають краям накладених фігур (все одно на екрані це справді не проблема при друкуванні).

Ви можете побачити приклади та пояснення можливих артефактів тут:

Рідко є якісь причини мати ідеально вирівняні краї, які могли б викликати подібні артефакти, тому використання "прорізів", як у логотипі Хілларі, є доброю звичкою потрапляти.

— Цай
джерело

6

Це насправді може бути настільки ж великою проблемою з друком. При цифровій друку щонайменше svg зазвичай буде растеризовано перед надсиланням на принтер, і можуть з'являтися однакові артефакти. (останній проект мого останнього роботодавця (великого комерційного принтера) передбачав написання програмного забезпечення, яке допоможе визначити подібні речі до того, як була здійснена дорога робота над нанесенням чорнила на папір.)

— Містер Міндор,

1

Оскільки ми говоримо про політику США, ви маєте на увазі "артефакти"?

— Ендрю Расмуссен

5

Як повідомляє english.se, я маю на увазі артефакти, а не артефакти. (Але оскільки я британець, я маю на увазі артефакти незалежно)

— Кай

Тут рідко є якісь причини ... просто цікаво: чи є колись причина?

— Alois Mahdal

@AloisMahdal Я дуже сумніваюся в цьому.

— Кай

61

Розуміння растерізації та алгоритму художника може допомогти.

Один із способів надання векторної графіки (графіки, визначеної багатокутниками, замість пікселів) до пікселів, - це растеризація полігонів під час виконання алгоритму художника.

Алгоритм художника - це процес знизу вгору, коли ви спочатку кладете фон, а потім малюєте зверху цього фону кожним шаром кольору, поки не досягнете верхнього шару.

Коли ви наносите шар, ви звертаєте увагу на його покриття (зазвичай зберігається в додатковому каналі, альфа-каналі) і використовуєте його для змішування доданого кольору з тим, що вже є.

Якщо ваш новий шар покриває піксель на 50%, а він синій, ви порівнюєте поточний колір цього пікселя із синім та малюєте його замість цього.

Речі стають трохи складнішими, якщо ви створюєте зображення з прозорістю, але не принципово.

Растерізація - це процес перетворення багатокутника в пікселі. Тут ми розробимо, наскільки багатокутник охоплює заданий піксель за допомогою деякої алгебри, а потім обчислимо суму покриття.

Якщо у вас є два краї багатокутника, які збігаються - точно один над одним - але обидва наполовину покривають заданий піксель, те, що відбувається, є проблемою.

Припустимо, нижній багатокутник червоний, а верхній синій, а фон білий.

Спочатку фарбуємо червоний. Це змішується з білим, приводячи до 50% білого 50% червоного.

Потім фарбуємо в синій. Це змішується з 50% білим 50% червоним, і ми отримуємо 25% білий 25% червоний 50% синій. Те ж саме відбувається, якщо червоний і синій зустрічаються посередині, або якщо синій покриває червоний колір повністю.

Але "насправді" синій багатокутник повністю покрив червоний, то чому ми його бачимо? Тому що алгоритм забуває деталі розміщення підпікселів.

Поки є 100% охоплення одного багатокутника, це не проблема.

Тепер ця проблема не є принциповою. Ви можете робити багатокутну візуалізацію за допомогою підходу, що нагадує промінь (де ви переказуєте на коефіцієнт N ^ 2 у точках), або навіть чисто-векторний підхід (де ви віднімаєте блокуючі фігури з геометрії фігур під їх, вирізавши). Ні в якому разі не "проховані" кольори просочуються до вихідного зображення.

Алгоритм художника не єдиний випадок, коли «прихована» геометрія може просочитися. Якщо ви друкуєте непрозорі носії, іноді кольорові шари не ідеально вирівнюються. Тому під шарами просочується, коли верхній шар повинен повністю покривати його.

Оскільки ви не знаєте, як буде виводитися ваше векторне зображення, подібні виїмки дозволяють робити більш надійні зображення проти недосконалих технік друку / відображення.

— Якка
джерело

1

Ваш опис застосовується у випадку графіки, що містить альфа-канали, або у випадку малювання субпікселів при антизбуджуванні. На прикладі ОП будуть показані надрізні артефакти для змішаних шарів всупереч наміченому. Я б припустив, що ця проблема більше пов'язана з помилками реєстрації друку.

— Pekka

2

@pekka так, але сьогодні більшість візуалізацій робить протизгладжуванням.

— Якк

Якщо верхній шар має будь-яку прозорість, то надріз призведе до поступового відтягування нижнього шару від краю, що впливає як на колір, так і на верхній рівень. Більш підходящою відповіддю було б мати прямокутну скидку (розмір, який важко оцінити) в районі, де перемішування не бажане. Як ви це оцінюєте?

— Пекка

@pekka Якщо верхній шар має середню прозорість, ця проблема є набагато менш проблематичною (як можна побачити червоний під синім будь-яким чином). Оскільки прозорість верху наближається до непрозорості, підходьте до вищезгаданого рішення. У міру того, як він відходить від непрозорості, підходьте до його попереднього складання. Загальна проблема складна з урахуванням помилок реєстрації, проблем з накопиченням (занадто багато шарів!), Антизбудження та всього іншого: у якийсь момент ви хочете написати спеціальні вектори для кожного вихідного формату чи якось зв'язати вектори. Я просто намагався відповісти на точну технічну причину проблеми, яку вирішує висічка.

— Якк

1

@Pekka прямокутний складніше намалювати, і тоді ви закінчите з протилежною проблемою того ж питання, що на тлі показано корито. Виріз - це компроміс між однією помилкою щодо ряду інших (виїмка призначена для того, щоб на екрані віллеризація не була площею порожниною, щоб при необхідності з мінімальними помилками можна було зробити надруковані таблички). Але насправді немає причин для того, щоб це робити, це лише те, що наші рендери працюють неправильно, це все, що там є. Ми могли б усі три проблеми легко змінити спосіб, який ми растерізуємо.

— joojaa

48

Чай правильний. Я думав також додати візуальну відповідь.

Причиною цього є те, що це SVG. На відміну від растрового зображення, де ви керуєте кожним відтвореним пікселем, растерізація SVG відбувається в браузері ... тому браузер приймає ці рішення.

Одне з рішень, який повинен приймати браузер, - це коли робити антизбудження. Зазвичай це робиться, коли точка по лінії падає на піксель. Тоді він буде створювати псевдонім цього пікселя. Оскільки він буде рендерувати всі шари SVG, він зробить це для кожного шару і саме там ви можете почати отримувати артефактування краю. Це особливо актуально, коли ви граєте зі збільшенням SVG, оскільки це призведе до перекриття різних пікселів екрана.

Ось знімок екрана зеленого поля, що перекриває червоне поле в Chrome. Верхня частина на 100% збільшенні сторінки, знизу зменшена. Зауважте різницю в рендерингу цього краю:

Якщо я знімаю це зображення на екрані і збільшую масштаб, щоб показати растризацію, ви можете чіткіше уявити, що відбувається:

Ідеальним виправленням цього є розширення SVG у браузері "розумнішим" і не робить речей, які складаються, але враховуючи, що SVG елементами можна маніпулювати зовнішньо та жити (оскільки це лише XML-файл), це не практичне рішення для браузера.

Отже, натомість дизайнер приймає це рішення, використовуючи виїмки, які ви бачите.

До речі, це схоже за концепцією, як боротися з реєстрацією в друкарні, використовуючи пастку .

— DA01
джерело

16

Друк у кількох кольорах вимагає точної реєстрації, щоб уникнути непривабливих прогалин і викликає занепокоєння, коли артефакти складаються з кількох джерел. Подібні занепокоєння можуть виникати навіть у цифрових продуктах, де обмежена арифметика точності обов'язково вносить помилки.

Проблема, яку можна уникнути, полягає в зворотному захопленні - коли відхилення від наміченої графіки може призвести до тонкої лінії кольору фону, що відображається зліва від вертикальних ребер, що збігаються. Оскільки кольори сильно контрастні, вплив буде помітний (спробуйте перемістити зламану лінію навіть на 1 піксель зліва від вертикалі.

Підхід не призначений для впливу на змішування чорнила. Послідовні координати на екрані уникають проблеми, тоді як для управління кольором використовується напівтонування.

— Пекка
джерело