Подготовка SVG
Сначала я рисую картинку в Adobe Illustrator. Называю каждый путь своим именем. В коде эти имена станут id, к которым можно будет обращаться через CSS. Сохраняю файл в svg и открываю в html-редакторе. Тут можно его оптимизировать, убрать лишний код. А потом копирую код в Codepen. Я так делаю для того, чтобы можно было быстро подправить картинку в иллюстраторе: вношу изменения, сохраняю, переключаюсь на html-редактор и там нужно только согласиться на обновление файла из сохраненной версии иллюстратора. Так можно оперативно вносить изменения и потом копировать кусочки кода, которые менялись.
Анимация SVG
В данном случае каждое облако — отдельный путь со своим id. Я определила анимацию с помощью keyframe, так чтобы начальная точка движения была сдвинута. За это отвечает функция translate. Так же в начальной точке облака должны быть меньше и прозрачнее. Для этого можно использовать scale и opacity.
Чтобы облака не летели одной кучей все одновременно, я добавила для каждого свой сдвиг по времени animation-delay.
See the Pen Clouds by Julia (@juliaalex) on CodePen.
Ну а дальше код svg можно вставить прямо в html или через include php. Просто картинкой не получится, так как у CSS тогда не будет доступа к id путей.