<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="30%" height="30%" viewBox="0 0 47.4 47.7" >
<style type="text/css">
.st0 {
fill:none;
stroke:#FEC558;
stroke-width:0.5;
}
.st1{fill:#FFC656;}
</style>
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%" >
<stop offset="0%" stop-color="#33363D"/>
<stop offset="100%" stop-color="#5B5D5A"/>
</lineargradient>
</defs>
<rect width="100%" height="100%" fill="url(#grad)"/>
<path id="circle" class="st0" stroke-dashoffset="138" stroke-dasharray="138" d="M23.7,45.8c12.1,0,22-9.9,22-22c0-12.1-9.9-22-22-22c-12.1,0-22,9.9-22,22C1.7,35.9,11.6,45.8,23.7,45.8z">
<animate id="an_circle" attributeName="stroke-dashoffset" values="138;0" dur="2s" fill="freeze" />
</path>
<g stroke-width="0.5">
<path id="trap" class="st1" stroke-dashoffset="60" stroke-dasharray="60" style="fill:none; stroke:#FEC558;" d="M14.1,17.9 14.1,20.2 14.1,22.2 14.1,23.4 14.1,24.7 14.1,27.6 32.7,35.2 32.7,32.5 32.7,30.7 32.7,29.7 32.7,28.5 32.7,25.2z">
<animate id="an_trap" attributeName="stroke-dashoffset" values="60;0" dur="1s" fill="freeze" />
<animate id="fill_trap" attributeName="fill" values="#33363D;#FEC558" begin="an_circle.end" dur="1s" fill="freeze" />
</path>
<path id="triangle" class="st1" stroke-dashoffset="35" stroke-dasharray="35" style="fill:none; stroke:#FEC558;" d="M19.2,18.7 24.3,20.6 27.5,21.9 27.5,21.2 27.5,19.4 27.5,17.5 27.5,16.3 27.5,15.2 27.5,12.5 15.5,17.2 19.2,18.7">
<animate id="an_triangle" attributeName="stroke-dashoffset" begin="an_trap.end" values="35;0" dur="1s" fill="freeze" />
<animate id="fill_triangle" attributeName="fill" values="#33363D;#FEC558" begin="fill_trap.end-0.5s" dur="1s" fill="freeze" />
</path>
</g>
</svg>
Из примера видно, что нужно анимировать строки трёх объектов логотипа: круга, трапеции и треугольника, затем заполнить цветом трапецию и треугольник.
Для анимации строк определяем их длину с помощью JS
<script>
function TotalLength(){
var path = document.querySelector('#circle');
var len = Math.round(path.getTotalLength() );
alert("path length - " + len);
};
</script>
Найденная длина для:
окружности - 138px
трапеции - 60px
треугольника - 35px
- Команды для анимации рисования строк
<animate id="an_circle" attributeName="stroke-dashoffset" values="138;0"
dur="2s" fill="freeze" />
<animate id="an_trap" attributeName="stroke-dashoffset" values="60;0"
dur="1s" fill="freeze" />
<animate id="an_triangle" attributeName="stroke-dashoffset"
begin="an_trap.end" values="35;0" dur="1s" fill="freeze" />
- Анимация рисования треугольника начнется, когда закончится анимация
рисования трапеции
begin="an_trap.end"
- Анимация закрашивания трапеции начнется, когда закончится анимация
рисования окружности
<animate id="fill_trap" attributeName="fill" values="#33363D;#FEC558"
begin="an_circle.end" dur="1s" fill="freeze" />
- Анимация заполнение цветом треугольника начнется, когда закончится
анимация заполнения цветом трапеции
<animate id="fill_triangle" attributeName="fill"
values="#33363D;#FEC558"
begin="fill_trap.end-0.5s" dur="1s" fill="freeze" />
UPD
Поддержка всеми современными браузерами кроме IE https://caniuse.com/#search=svg%20smil
Свободный перевод ответа от участника @Alexandr_TT.