Почему говорт что clip и mask лучше делать SVG, чем нативный CSS?

Question

[crdrads]

На этом форуме и во многих статьях пишут, мол, клип и маску лучше делать с помощью SVG, а не CSS. Сегодня я потратил целый день на исследование этого вопроса и смею утверждать что это похоже на ложь или заблуждение! Но тем не менее спрашиваю совета, правильные ли выводы.

Я выделил и перепробовал такие методы:

1. CSS clip-path: Все работает замечательно в Хроме, ФФ, Андроиде и мобильном Сафари айФон 6, правда не работает в Эдже

2. SVG clip-path for SVG elements: Это также работает нормально, НО есть ужасные минусы - респонсив клип сделать фактически нереально (т.е. он будет захардожен в пикселях), а также картинка в теге image мертва для СЕО, и оптимизации изображений - нету ни alt ни srcset, что для меня смерти подобно!

3. SVG clip-path for HTML elements: не работает в Сафари, Эдже + невозможность сделать респонсив

4. CSS mask-image: все отлично, работает и в Эдже!

5. SVG mask for SVG elements: все минусы п2.

6. SVG mask for HTML elements: все минусы п.3 + не работает в обычном Хроме (WTF)

Итого: ну и как SVG может быть лучше, просвятите? Я уже молчу сколько кругов ада мне пришлось пройти чтобы разобратся в нигде толком не описанных ньюансах SVG чтобы понять это все.

Comments

[archelon]

а поддержка IE/Edge?

[crdrads]

archelon, это даже не тестировал. Не думаю что поменяет картину.

[crdrads]

archelon, проверил в Эдже. Все еще печальнее п.3 и п.6 не работают в Эдже)))

[crdrads]

Также в Эдже не работает CSS clip-path, но при этом работает mask. Странно, обновил

Answer 1

[chubokabrik]

Я тоже считаю, что практичнее CSS, но в проектах типа этого https://motovskikh.ru/russia/ CSS не прокатит.
Все зависит от случая.