Как правильно настроить внутреннюю тень SVG?

Question

[Space Around]

Проблема заключается в том, что тень не полностью прилегает к контуру фигуры, почему так происходит и как это исправить? Единственное решение, которое мне удалось найти это увеличить значение размытия по Гауссу, но это костыль, который мне не подходит!
Пример
Здесь я выделил красным, про что я говорю

Answer 1

[Ivan Bogachev]

Тут все дело в том, что вы используете для создания тени не саму кривую штуку, а "прозрачность" вокруг нее. Это немного нелогично с точки зрения понятия "тень". То есть у вас тень отбрасывает "пустота" вокруг кривой штуки (и эта "пустота" еще и обрезается в неудачном месте). Тут нужно использовать обратный подход, когда именно кривая штука используется для создания тени. В вашем примере для этого нужно поменять tableValues в feFuncA с "1 0" на "0 1" и в первом feComposite заменить "in" на "out".

Как альтернативный пример:


Вобщем сделать это можно по-разному, главное в конце проверить кроссбраузерность на всякий случай.

Comments

[Space Around]

Ivan Bogachev, не хочу создавать отдельный вопрос, поэтому пару вопросов задам здесь. Проблема заключается в том, что я ничего не понимаю в этих svg фильтрах, найти удачный гайд мне не удалось, а на MDN web docs тяжко для понимания, возможно, Вы сможете мне посоветовать нормальный и понятный гайд?
Чем отличается настоящий SVG от SVG, который на самом деле PNG, но закодированный в base64?

[Space Around]

Ivan Bogachev, Вы фигуру нарисовали в векторном редакторе? Вы настолько хорошо разбираетесь в svg фильтрах, что сами всё настраиваете (имеется ввиду в ручную) или есть какой-то более простой способ?

[Ivan Bogachev]

Максим Виксна,

MDN web docs тяжко для понимания

Ну а никто и не говорил, что будет просто. Но на самом деле все не так страшно, вам просто нужно понять, какие теги там для чего вообще нужны, какой у них смысл, а потом сходить на CodePen и посмотреть разные примеры. Тут практика решает.

Чем отличается настоящий SVG от SVG, который на самом деле PNG, но закодированный в base64?

SVG - текст, разметка, составленная по определенным правилам. Как HTML, только SVG. PNG - это растровая картинка (в пикселях), нечитаемый бинарник. PNG можно встроить в SVG, закодировав в base64, но это как был бинарник с набором пикселей, так им и останется. Ничего общего с SVG, как текстовой разметкой, он иметь не будет.

Вы фигуру нарисовали в векторном редакторе?

Да, в InkScape нарисовал.

Вы настолько хорошо разбираетесь в svg фильтрах, что сами всё настраиваете (имеется ввиду в ручную) или есть какой-то более простой способ?

Фильтры обычно вручную делаю. В InkScape есть какие-то встроенные фильтры, но руками обычно проще это сделать. Это как с версткой книг - можно долго париться с кнопочками в офисе, а можно взять LaTeX и сделать все быстро и надежно, но руками.

[Space Around]

Ivan Bogachev, Спасибо большое за помощь!

[Space Around]

Ivan Bogachev, ещё вопросец: Почему Ваш рисунок примыкает вплотную к левому и правому краю экрана, он примыкает, как на CodePen, так и у меня, но мой рисунок не примыкает у меня, но примыкает на CodePen, что за прикол такой? Мой рисунок примкнул к боковым сторонам экрана при viewBox="0 0 1920 920", как это работает (я как бы знаю как это работает, но как знаю я это почему-то не работает)?

[Ivan Bogachev]

Максим Виксна, Если честно, то я не совсем понял вопрос, что именно у вас изменилось по сравнению с CodePen. Но есть предположение, что изменение может быть связано не только с viewBox, но и с заданием высоты SVG (я ее не задаю).

[Space Around]

Ivan Bogachev, ещё раз большое спасибо! Действительно не стоит задавать тегу svg высоту, без высоты всё как надо!