Визуальное скрытие SVG в разметке делается для того что бы сам SVG документ на странице не занимал место и не было пустого пространства ...
USE - это дубликат какого то объекта и этот тег помогает с экономить место на странице за счёт дублирования нужного SVG хотя в инспекторе кода будет отображаться как будто вставлен реальный код
Используйте функцию плавности : https://easings.net/ru
В каждом браузере есть такая возможность ..открыть инструменты разработчика а hide/show имеют настройки в том числе easing
Это только дописать в самом SVG надо вот это : preserveAspectRatio="none" ну и разумеется что svg это обычное изображение ну и указать ему размер в vw vh
Можно в SVG но я чуток не в том состоянии
Наложить маску ...цвета в маске SVG отличаются прозрачностью ....к примеру #fff полностью прозрачный а #000 не прозрачный ...и потому надо искать промежуточные варианты
Абсолютным позиционированием
К примеру имеем Родительский Блок с изображением он имеет относительное позиционирование,
И имеем вложенный блок который расположен абсолютно т.е top:0; left:0; и имеет ширину и высоту в 100% внутри содержимое можно располагать как угодно
