How would I be able to save animated svg code to a .svg file?

How would I be able to save an animated svg code to a .svg file? I tried putting it in a file and saving it with the .svg but that eliminates the animation code completely, leaving the svg static.

Any ideas on how to do this please or to convert the code to a gif?

<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" viewBox="0 0 100 100" style="transform-origin: 50px 50px 0px;" xml:space="preserve"><g style="transform-origin: 50px 50px 0px;"><g style="transform-origin: 50px 50px 0px; transform: scale(0.44);"><g style="transform-origin: 50px 50px 0px; animation-duration: 1.3s; animation-delay: -1.3s; animation-direction: normal;" class=""><g><style type="text/css" class="ld ld-breath" style="transform-origin: 50px 50px 0px; animation-duration: 2s; animation-delay: -2s; animation-direction: normal;">.st0{fill:#F4E6C8;} .st1{opacity:0.8;fill:#849B87;} .st2{fill:#D65A62;} .st3{fill:#E15C64;} .st4{fill:#F47E5F;} .st5{fill:#F7B26A;} .st6{fill:#FEE8A2;} .st7{fill:#ACBD81;} .st8{fill:#F5E169;} .st9{fill:#F0AF6B;} .st10{fill:#EA7C60;} .st11{fill:#A8B980;} .st12{fill:#829985;} .st13{fill:#798AAE;} .st14{fill:#8672A7;} .st15{fill:#CC5960;} .st16{fill:#E17A5F;} .st17{fill:#849B87;} .st18{opacity:0.8;fill:#E15C64;} .st19{opacity:0.8;fill:#F7B26A;} .st20{fill:#79A5B5;} .st21{opacity:0.8;fill:#79A5B4;} .st22{fill:#666766;}</style><g class="ld ld-breath" style="transform-origin: 50px 50px 0px; animation-duration: 2s; animation-delay: -1.85714s; animation-direction: normal;"><rect x="12.5" y="25" class="st2" width="15" height="50" fill="#8bb4d7" style="fill: rgb(139, 180, 215);"></rect></g><g class="ld ld-breath" style="transform-origin: 50px 50px 0px; animation-duration: 2s; animation-delay: -1.71429s; animation-direction: normal;"><rect x="32.5" y="25" class="st10" width="15" height="50" fill="#000000" style="fill: rgb(0, 0, 0);"></rect></g><g class="ld ld-breath" style="transform-origin: 50px 50px 0px; animation-duration: 2s; animation-delay: -1.57143s; animation-direction: normal;"><rect x="52.5" y="25" class="st9" width="15" height="50" fill="#939598" style="fill: rgb(147, 149, 152);"></rect></g><g class="ld ld-breath" style="transform-origin: 50px 50px 0px; animation-duration: 2s; animation-delay: -1.42857s; animation-direction: normal;"><rect x="72.5" y="25" class="st11" width="15" height="50" fill="#dcddde" style="fill: rgb(220, 221, 222);"></rect></g><metadata xmlns:d="https://loading.io/stock/" class="ld ld-breath" style="transform-origin: 50px 50px 0px; animation-duration: 2s; animation-delay: -1.28571s; animation-direction: normal;">
<d:name class="ld ld-breath" style="transform-origin: 50px 50px 0px; animation-duration: 2s; animation-delay: -1.14286s; animation-direction: normal;">bar</d:name>
<d:tags class="ld ld-breath" style="transform-origin: 50px 50px 0px; animation-duration: 2s; animation-delay: -1s; animation-direction: normal;">facebook,block,rectangle,progress,waiting,bar,spinner</d:tags>
<d:license class="ld ld-breath" style="transform-origin: 50px 50px 0px; animation-duration: 2s; animation-delay: -0.857143s; animation-direction: normal;">cc-by</d:license>
<d:slug class="ld ld-breath" style="transform-origin: 50px 50px 0px; animation-duration: 2s; animation-delay: -0.714286s; animation-direction: normal;">f15w9p</d:slug>
</metadata></g></g></g></g><style type="text/css" class="ld ld-breath" style="transform-origin: 50px 50px 0px; animation-duration: 2s; animation-delay: -0.571429s; animation-direction: normal;">path,ellipse,circle,rect,polygon,polyline,line { stroke-width: 0; }@keyframes ld-breath {
  0% {
    -webkit-transform: scale(0.86);
    transform: scale(0.86);
  }
  50% {
    -webkit-transform: scale(1.06);
    transform: scale(1.06);
  }
  100% {
    -webkit-transform: scale(0.86);
    transform: scale(0.86);
  }
}
@-webkit-keyframes ld-breath {
  0% {
    -webkit-transform: scale(0.86);
    transform: scale(0.86);
  }
  50% {
    -webkit-transform: scale(1.06);
    transform: scale(1.06);
  }
  100% {
    -webkit-transform: scale(0.86);
    transform: scale(0.86);
  }
}
.ld.ld-breath {
  -webkit-animation: ld-breath 1s infinite;
  animation: ld-breath 1s infinite;
}

Solution

You' ve just forget to close the svg tag. Add </svg> at the end. Your file should look like this :

<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" viewBox="0 0 100 100" style="transform-origin: 50px 50px 0px;" xml:space="preserve">
<style type="text/css">
.st0{fill:#F4E6C8;} 
.st1{opacity:0.8;fill:#849B87;} 
.st2{fill:#D65A62;} 
.st3{fill:#E15C64;} 
.st4{fill:#F47E5F;} 
.st5{fill:#F7B26A;} 
.st6{fill:#FEE8A2;} 
.st7{fill:#ACBD81;} 
.st8{fill:#F5E169;} 
.st9{fill:#F0AF6B;} 
.st10{fill:#EA7C60;} 
.st11{fill:#A8B980;} 
.st12{fill:#829985;} 
.st13{fill:#798AAE;} 
.st14{fill:#8672A7;} 
.st15{fill:#CC5960;} 
.st16{fill:#E17A5F;} 
.st17{fill:#849B87;} 
.st18{opacity:0.8;fill:#E15C64;} .st19{opacity:0.8;fill:#F7B26A;} 
.st20{fill:#79A5B5;} .st21{opacity:0.8;fill:#79A5B4;} 
.st22{fill:#666766;}

path,ellipse,circle,rect,polygon,polyline,line { stroke-width: 0; }@keyframes ld-breath {
  0% {
    -webkit-transform: scale(0.86);
    transform: scale(0.86);
  }
  50% {
    -webkit-transform: scale(1.06);
    transform: scale(1.06);
  }
  100% {
    -webkit-transform: scale(0.86);
    transform: scale(0.86);
  }
}
@-webkit-keyframes ld-breath {
  0% {
    -webkit-transform: scale(0.86);
    transform: scale(0.86);
  }
  50% {
    -webkit-transform: scale(1.06);
    transform: scale(1.06);
  }
  100% {
    -webkit-transform: scale(0.86);
    transform: scale(0.86);
  }
}
.ld.ld-breath {
  -webkit-animation: ld-breath 1s infinite;
  animation: ld-breath 1s infinite;
}


</style>

<g style="transform-origin: 50px 50px 0px;">
<g style="transform-origin: 50px 50px 0px; transform: scale(0.44);">
<g style="transform-origin: 50px 50px 0px; animation-duration: 1.3s; animation-delay: -1.3s; animation-direction: normal;" class="">
<g>
<g class="ld ld-breath" style="transform-origin: 50px 50px 0px; animation-duration: 2s; animation-delay: -1.85714s; animation-direction: normal;"><rect x="12.5" y="25" class="st2" width="15" height="50" fill="#8bb4d7" style="fill: rgb(139, 180, 215);"></rect></g><g class="ld ld-breath" style="transform-origin: 50px 50px 0px; animation-duration: 2s; animation-delay: -1.71429s; animation-direction: normal;"><rect x="32.5" y="25" class="st10" width="15" height="50" fill="#000000" style="fill: rgb(0, 0, 0);"></rect></g><g class="ld ld-breath" style="transform-origin: 50px 50px 0px; animation-duration: 2s; animation-delay: -1.57143s; animation-direction: normal;"><rect x="52.5" y="25" class="st9" width="15" height="50" fill="#939598" style="fill: rgb(147, 149, 152);"></rect></g><g class="ld ld-breath" style="transform-origin: 50px 50px 0px; animation-duration: 2s; animation-delay: -1.42857s; animation-direction: normal;"><rect x="72.5" y="25" class="st11" width="15" height="50" fill="#dcddde" style="fill: rgb(220, 221, 222);"></rect></g><metadata xmlns:d="https://loading.io/stock/" class="ld ld-breath" style="transform-origin: 50px 50px 0px; animation-duration: 2s; animation-delay: -1.28571s; animation-direction: normal;">
<d:name class="ld ld-breath" style="transform-origin: 50px 50px 0px; animation-duration: 2s; animation-delay: -1.14286s; animation-direction: normal;">bar</d:name>
<d:tags class="ld ld-breath" style="transform-origin: 50px 50px 0px; animation-duration: 2s; animation-delay: -1s; animation-direction: normal;">facebook,block,rectangle,progress,waiting,bar,spinner</d:tags>
<d:license class="ld ld-breath" style="transform-origin: 50px 50px 0px; animation-duration: 2s; animation-delay: -0.857143s; animation-direction: normal;">cc-by</d:license>
<d:slug class="ld ld-breath" style="transform-origin: 50px 50px 0px; animation-duration: 2s; animation-delay: -0.714286s; animation-direction: normal;">f15w9p</d:slug>
</metadata></g></g></g></g>
</svg>

group all style statements to be clearer