0

Столкнулся с проблемой ухудшения качества картинки при использовании анимации. Понимая, что далеко не первый, кто с этим столкивается - загуглил и понял, что SVG сможет решить мою проблему. Сначала изменил просто формат самого изображения на .svg, но не помогло => нужно именно через тег <svg>...<svg>. Проблема в том, что даже не знаю, можно ли с помощью этого тега сделать то, что мне нужно (картинку прикрепил) и как это сделать...

введите сюда описание изображения

Код анимации, на всякий случай:

 .orderOnlineB {
    position: fixed;
    animation: animOrderOnlineB 6s linear infinite;
}

@keyframes animOrderOnlineB {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

2 ответа 2

0

Для этого нужно конвертировать растровую картинку в векторную. Можно ручками, можно онлаин https://convertio.co/ru/jpg-svg/

1
  • Thank you very much! 9 сен 2022 в 8:17
0

Распространенная проблема. Как уже писали выше что нужно конвертировать в svg. Кстати не обязательно вставлять инлайн как теги <svg>...</svg>, можно как <img stc="our_image.svg">

Теперь вопрос как растр превратить в вектор, есть очень много путей(ai, corel), но самый бесплатный figma + плагин image tracer. И как всегда чем выше в разрешении картинка тем она точнее. На выходе вектор может быть "не совсем" круглым и поэтому надо его поместить в frame(ctrl + alt + g) и выровнять (В правой панели будут всем знакомые значки )

введите сюда описание изображения

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.