Как из GIF анимации сделать SVG анимацию?

Question

[Cheizer]

Друзья, есть такой GIF рисунок, анимация по слоям, есть ли вариант его как то в SVG пересохранить без потери анимации?
В Photoshop нет такой возможности, буду признателен за любой совет.

Comments

[Froggyweb]

нет нужно рисовать заново и анимировать

[Moskus]

Усвойте разницу между векторной и растровой графикой. Первое превращается во второе естественным образом при рендеринге, второе в первое превращается только путем перерисовки (иногда - автоматической).
Хотя некоторые редакторы растровой графики и предлагают инструменты, позаимствованные из редакторов векторной графики, сохранение векторной графики из них все равно невозможно (по крайней мере, до тех пор, пока это два разных редактора, как Photoshop и Illustrator у Adobe - может быть, мы еще увидим тот день, когда они будут скрещены).

[Cheizer]

Froggyweb, ок, благодарю, понятно.

[Cheizer]

Moskus, Все понятно, никак значит, благодарю!

Answer 1

[xmoonlight]

Может взять проще?
materializecss.com/preloader.html

Или заменить: https://icons8.com/preloaders/en/free

Comments

[Cheizer]

Спасибо, но мне нужно SVG, хочу использовать как строку потом.

[xmoonlight]

Роман Кузнецов, это как? вместо линии сделать буквы или чтобы вставлять в CSS ?

[Cheizer]

xmoonlight, это вот так

data:image/svg+xml;charset=utf-8,<svg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'><defs><line%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F><%2Fdefs><g><use%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F><use%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F><use%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F><use%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F><use%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F><use%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F><use%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F><use%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F><use%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F><use%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F><use%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F><use%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F><%2Fg><%2Fsvg>

Можно скопировать эту строку и вставить в URL браузера для просмотра.

И дальше использовать в css background-image: url(....) Как делают все js библиотеки в своих слайдерах стрелки и тд.

[xmoonlight]

Роман Кузнецов, а в чем проблема вставить гифку так же?

[Cheizer]

xmoonlight, GIF это не масштабируемая графика, это основной минус, да и хочется обойтись без физических рисунков, только код.

[xmoonlight]

Роман Кузнецов, Согласен, что не масштабируемая, а вот код в данном случае - не пойму какие плюсы...

[Cheizer]

xmoonlight, ну это уже второй вопрос мнее важный, да и код исполняется шутсрее чем подгрузка img

[xmoonlight]

Роман Кузнецов, я бы нашёл что-то похожее на svg на просторах интернета и забыл бы эту микро-задачу как страшный сон)

[Cheizer]

xmoonlight, дружище спасибо! Ссылки твои в любом случае в копилку, пригодиться решение на css :) Я кажется понял, в SVG анимацию не сохранить, нарисовать я сам смогу векторе и сохранить в SVG, осталось только в строку все это дело как в примере сделать. А вращение смотрю на css все равно сделано.

[Cheizer]

xmoonlight, Вроде нашел реализацию david.ingledow.co.uk/blog/google-material-designs-...

[xmoonlight]

Роман Кузнецов, вот тут как на SVG чистом делают: https://github.com/Dapper-Gentlemen/svg-loaders

Answer 2

[Борис Шпаковский]

Тут прелоадер а ля ваш на SVG: https://github.com/rtheunissen/md-preloader
Тут есть на чистом CSS без каких-либо SVG и GIF: https://projects.lukehaas.me/css-loaders/
А если говорить про гифки и запись строкой, чтобы уменьшить количество запросов, то можно любую гифку записать в виде base64, вот пример: https://jsfiddle.net/75ph8625/

Comments

[Cheizer]

Вот по второй ссылке, есть точно такой же, я его из сети и брал, но как он так сделал в одну сроку???

https://camo.githubusercontent.com/ce652d1e71659b7...

[Cheizer]

а вот base 64 неинтересно совсем, мне нужен SVG? потому что это масштабируемая графика. А использовать его хочу как и base 64только data:image/svg+xml;charset=utf-8...........

[Борис Шпаковский]

Роман Кузнецов, я так понимаю там в примере у него просто закодированная ссылка. В исходнике так прелоадер записан:

<div class="md-preloader"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="75" width="75" viewbox="0 0 75 75"><circle cx="37.5" cy="37.5" r="33.5" stroke-width="8"/></svg></div>

[Cheizer]

Борис Шпаковский, что то не понял я, это черный круг, в прелоадеры там гифки у него, гиф это у меня есть но это не SVG

[Борис Шпаковский]

Роман Кузнецов, этот черный круг анимируется и раскрашивается с помощью CSS в любом случае. Посмотрите исходники и все станет ясно.

Answer 3

[Андрей]

Да никак. Это абсолютно разные вещи gif и svg! Я такое сделаю за минуту-две в векторном редакторе и редакторе кода.