Как нарисовать автомобиль с помощью команд SVG

Ниже изображение автомобиля в формате PNG.
 Я хочу сделать анимацию движения автомобиля вдоль какой-нибудь траектории. Желательно
чтобы колёса автомобиля вращались. Я понимаю, что для этого необходимо перевести картинку в формат SVG.   

Как это сделать?    

С помощью векторного редактора или вручную, используя формулы SVG, или, как-то по другому, например, применяя трансформации CSS3.


    

Ответы

Ответ 1

Движение автобуса по заданной траектории:



* {
  margin: 0;
  padding: 0;
}

line {
  stroke-width: 3px;
  stroke: #bf0208;
}


Ответ 2

Анимация движения автомобиля по заданной траектории

Cначала нам нужно нарисовать траекторию. Для этого открываем в векторном редакторе файл svg автомобиля   

   


Рисуем путь
Сохраняем файл
Чтобы убрать из файла SVG лишнюю информацию, которую сохраняет
векторный редактор необходимо оптимизировать файл с помощью любого
оптимизатора, например - SVG EDITOR
Копируем из файла  Path траектории   


Для анимации движения вдоль заданного пути используем команду:  

 
         
        ,где  

#car-dodger"  -  уникальный идентификатор автомобиля    

#carPath"  - идентификатор пути, по которому движется автомобиль   

Внизу полный код:  






Ответ 3

Это учебный пример. Шаг за шагом будут прорисовываться детали автомобиля и по мер
продвижения легко будет понять, как применяются на практике основные команды svg: line, rect, circle, path 

Код svg автомобиля был взят с сайта  Юлии Бухваловой (Yulya Buhvalova) 


Рисуем контур крыши и кузова автомобиля,- всего одна команда    




    


 


Рисуем основную часть кузова:   




    





Добавляем оконные стойки




    





Добавляем передний и задний бампер:  




    





Добавляем колёса:




    


     


Добавляем фары:     




    


   

Автомобиль готов. Конечно можно продолжать дальше,- украшать, добавлять новые детали
но в принципе достаточно, потому-что в анимации будет использоваться малый размер автомобиля и деталей особо не будет видно.
А вот шины лысые, добавим протектор с помощью stroke-dasharray  и добавим вращение колёс:       











Связанный вопрос: Движение поезда с помощью SVG


Ответ 4

Пример на css



*,
:before,
:after {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.car {
  position: relative;
  height: 200px;
  overflow: hidden;
  border-bottom: 7px solid #ccc;
}

.car__inner {
  padding-bottom: 30px;
  -webkit-animation: goToCar 5s linear infinite;
  animation: goToCar 5s linear infinite;
}

@-webkit-keyframes goToCar {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}

@keyframes goToCar {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}

.car__contour {
  height: 130px;
  width: 220px;
  margin: 25px auto -70px auto;
  border: 10px solid #1E90FF;
  -webkit-border-radius: 220px / 130px;
  border-radius: 220px / 130px;
  position: relative;
}

.car__contour:before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -40px;
  height: 100%;
  width: 80px;
  border: 10px solid #1E90FF;
  border-top: none;
}

.car__body {
  width: 340px;
  height: 80px;
  background: #1E90FF;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  margin: 0 auto;
  position: relative;
}

.car__headlight {
  position: absolute;
  top: 10px;
  left: -5px;
  background: #DC143C;
  width: 20px;
  height: 20px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  z-index: -1;
}

.car__headlight--front {
  top: 5px;
  left: auto;
  right: -10px;
  background: #FFD700;
  width: 30px;
  height: 30px;
  z-index: 1;
}

.car__bumper {
  position: absolute;
  bottom: 20px;
  left: -5px;
  width: 40px;
  height: 20px;
  background: #999;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

.car__bumper--front {
  left: auto;
  right: -20px;
}

.car__wheel {
  position: absolute;
  bottom: -35px;
  left: 45px;
  width: 90px;
  height: 90px;
  background: #fff;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

.car__wheel:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 76px;
  height: 76px;
  background: #222;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  z-index: 1;
  margin: -38px 0 0 -38px;
  -webkit-animation: rotateWheel 2s linear infinite;
  animation: rotateWheel 2s linear infinite;
  border: 2px dashed #fff;
}

@-webkit-keyframes rotateWheel {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotateWheel {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.car__wheel:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  background: #555;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  z-index: 1;
  margin: -15px 0 0 -15px
}

.car__wheel--front {
  left: auto;
  right: 45px;
}