SVG animated icon make bigger size with css - css

Question

In my project I use svg icon. but this icon is very small. I am needed to increase the size of the display.
Below I inserted image for the references. I am trying to big this icon. in this tag also present in the code.
I am needed to increase the size of the display.
So can I use css to bigger this svg. I am use many ways and seen many example for increasing the size of the svg but all are not working in a right way.
I Symbol definition is
<symbol id="saturnGif">
<g style="transform-origin: 50px 50px 0px;">
<g style="transform-origin: 50px 50px 0px; transform: scale(0.6);">
<g class="ld ld-swim-px" style="transform-origin: 50px 50px 0px; animation-duration: 1s; animation-delay: 4.23412s; animation-direction: normal;">
<g>
<g style="transform-origin: 50px 50px 0px;">
<path class="st10" d="M50,40.6c-23.5,0-42.5,4.2-42.5,9.4h14.2c0-3.5,12.7-6.3,28.3-6.3s28.3,2.8,28.3,6.3h14.2 C92.5,44.8,73.5,40.6,50,40.6z" fill="#f36c00" style="fill: rgb(243, 108, 0);"></path>
</g>
<g style="transform-origin: 50px 50px 0px;"><circle class="st1" cx="50" cy="50" r="25.7" fill="rgb(248, 178, 106)" style="fill: rgb(248, 178, 106);"></circle></g>
<g style="transform-origin: 50px 50px 0px;">
<path class="st28" d="M50,56.3c15.6,0,28.3-2.8,28.3-6.3H21.7C21.7,53.5,34.4,56.3,50,56.3z">
</path>
</g>
<g style="transform-origin: 50px 50px 0px;">
<path class="st10" d="M50,56.3c-15.6,0-28.3-2.8-28.3-6.3H7.5c0,5.2,19,9.4,42.5,9.4s42.5-4.2,42.5-9.4H78.3 C78.3,53.5,65.6,56.3,50,56.3z" fill="#f36c00" style="fill: rgb(243, 108, 0);"></path>
</g>
<metadata xmlns:d="https://loading.io/stock/" style="transform-origin: 50px 50px 0px;">
<d:name style="transform-origin: 50px 50px 0px;">saturn</d:name>
<d:tags style="transform-origin: 50px 50px 0px;">star,solar system,planet,saturn,astrology</d:tags>
<d:license style="transform-origin: 50px 50px 0px;">rf</d:license>
<d:slug style="transform-origin: 50px 50px 0px;">2ez0ua</d:slug>
</metadata>
</g>
</g>
</g>
</g>
</symbol>
and **Style :**
<style type="text/css" style="transform-origin: 50px 50px 0px;">
##keyframes ld-swim-px {
0% {
-webkit-transform: translate(0, 0) rotate(0deg);
transform: translate(0, 0) rotate(0deg);
}
12.5% {
-webkit-transform: translate(1px, -2px) rotate(3deg);
transform: translate(1px, -2px) rotate(3deg);
}
25% {
-webkit-transform: translate(0, -3px) rotate(6deg);
transform: translate(0, -3px) rotate(6deg);
}
37.5% {
-webkit-transform: translate(-1px, -2px) rotate(3deg);
transform: translate(-1px, -2px) rotate(3deg);
}
50% {
-webkit-transform: translate(0, 0) rotate(0deg);
transform: translate(0, 0) rotate(0deg);
}
62.5% {
-webkit-transform: translate(1px, 2px) rotate(-3deg);
transform: translate(1px, 2px) rotate(-3deg);
}
75% {
-webkit-transform: translate(0, 3px) rotate(-6deg);
transform: translate(0, 3px) rotate(-6deg);
}
87.5% {
-webkit-transform: translate(-1px, 2px) rotate(-3deg);
transform: translate(-1px, 2px) rotate(-3deg);
}
100% {
-webkit-transform: translate(0, 0) rotate(0deg);
transform: translate(0, 0) rotate(0deg);
}
}
##-webkit-keyframes ld-swim-px {
0% {
-webkit-transform: translate(0, 0) rotate(0deg);
transform: translate(0, 0) rotate(0deg);
}
12.5% {
-webkit-transform: translate(1px, -2px) rotate(3deg);
transform: translate(1px, -2px) rotate(3deg);
}
25% {
-webkit-transform: translate(0, -3px) rotate(6deg);
transform: translate(0, -3px) rotate(6deg);
}
37.5% {
-webkit-transform: translate(-1px, -2px) rotate(3deg);
transform: translate(-1px, -2px) rotate(3deg);
}
50% {
-webkit-transform: translate(0, 0) rotate(0deg);
transform: translate(0, 0) rotate(0deg);
}
62.5% {
-webkit-transform: translate(1px, 2px) rotate(-3deg);
transform: translate(1px, 2px) rotate(-3deg);
}
75% {
-webkit-transform: translate(0, 3px) rotate(-6deg);
transform: translate(0, 3px) rotate(-6deg);
}
87.5% {
-webkit-transform: translate(-1px, 2px) rotate(-3deg);
transform: translate(-1px, 2px) rotate(-3deg);
}
100% {
-webkit-transform: translate(0, 0) rotate(0deg);
transform: translate(0, 0) rotate(0deg);
}
}
.ld.ld-swim-px {
-webkit-animation: ld-swim-px 3s infinite linear;
animation: ld-swim-px 3s infinite linear;
}
</style>
<style type="text/css" style="transform-origin: 50px 50px 0px;">
.st0 {
fill: #E0E0E0;
}
.st1 {
fill: #F8B26A;
}
.st2 {
fill: #F5E6C8;
}
.st3 {
fill: #849B87;
}
.st4 {
opacity: 0.2;
fill: #F8B26A;
}
.st5 {
opacity: 0.2;
fill: #ABBD81;
}
.st6 {
opacity: 0.5;
fill: #F8B26A;
}
.st7 {
opacity: 0.5;
fill: #ABBD81;
}
.st8 {
fill: none;
stroke: #E0E0E0;
stroke-width: 4;
stroke-miterlimit: 10;
}
.st9 {
fill: #666666;
}
.st10 {
fill: #F47E60;
}
.st11 {
fill: #ABBD81;
}
.st12 {
fill: #A0C8D7;
}
.st13 {
fill: #333333;
}
.st14 {
fill: #FFFFFF;
stroke: #1A1A1A;
stroke-width: 6;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st15 {
fill: #666666;
stroke: #1A1A1A;
stroke-width: 6;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st16 {
fill: none;
stroke: #1A1A1A;
stroke-width: 6;
stroke-miterlimit: 10;
}
.st17 {
fill: #1A1A1A;
}
.st18 {
fill: #FFFFFF;
stroke: #1A1A1A;
stroke-width: 6;
stroke-miterlimit: 10;
}
.st19 {
fill: #666666;
stroke: #1A1A1A;
stroke-width: 6;
stroke-miterlimit: 10;
}
.st20 {
fill: none;
stroke: #FFFFFF;
stroke-width: 6;
stroke-miterlimit: 10;
}
.st21 {
fill: none;
stroke: #FFFFFF;
stroke-width: 6;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st22 {
fill: #FFFFFF;
}
.st23 {
fill: #353035;
}
.st24 {
fill: #F5E169;
}
.st25 {
fill: none;
stroke: #ABBD81;
stroke-width: 8;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.st26 {
fill: none;
stroke: #E0E0E0;
stroke-width: 8;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.st27 {
fill: #FFDC6C;
}
.st28 {
fill: none;
}
.st29 {
fill: #C59B6D;
}
.st30 {
fill: #E6E6E6;
}
.st31 {
fill: #77A4BD;
}
.st32 {
fill: #6079BD;
}
.st33 {
fill: #405A9E;
}
.st34 {
fill: none;
stroke: #405A9E;
stroke-width: 1.1292;
stroke-miterlimit: 10;
}
.st35 {
fill: #7D5A41;
}
.st36 {
fill: #E6CCAE;
}
.st37 {
fill: #CC632F;
}
.st38 {
fill: #998268;
}
.st39 {
fill: #D4C097;
}
.st40 {
fill: #A8A8A8;
}
.st41 {
fill: #CCCCCC;
}
.st42 {
fill: #999999;
}
.st43 {
stroke: #000000;
stroke-width: 1.8743;
stroke-miterlimit: 10;
}
.st44 {
fill: #FFFFFF;
stroke: #000000;
stroke-width: 1.1246;
stroke-miterlimit: 10;
}
.st45 {
fill: #FFDC6D;
}
.st46 {
fill: #A0C8D7;
stroke: #FFFFFF;
stroke-width: 4;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.st47 {
stroke: #F5E6C8;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st48 {
fill: none;
stroke: #F5E6C8;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st49 {
fill: #FFFFFF;
stroke: #F5E6C8;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st50 {
fill: none;
stroke: #F5E6C8;
stroke-miterlimit: 10;
}
.st51 {
stroke: #F5E6C8;
stroke-width: 3;
stroke-miterlimit: 10;
}
.st52 {
stroke: #F5E6C8;
stroke-miterlimit: 10;
}
.st53 {
fill: none;
stroke: #F5E6C8;
stroke-linecap: round;
stroke-linejoin: round;
}
.st54 {
fill: none;
stroke: #F5E169;
stroke-width: 0.7105;
stroke-miterlimit: 10;
}
.st55 {
fill: none;
stroke: #F5E169;
stroke-width: 0.675;
stroke-miterlimit: 10;
}
.st56 {
fill: none;
stroke: #F5E169;
stroke-width: 0.6594;
stroke-miterlimit: 10;
}
.st57 {
fill: #1A1A1A;
stroke: #F5E169;
stroke-width: 0.8;
stroke-miterlimit: 10;
}
.st58 {
fill: #FF0000;
}
.st59 {
fill: #D686A5;
}
.st60 {
fill: #AFA5CD;
}
.st61 {
opacity: 0.5;
fill: none;
}
.st62 {
opacity: 0.2;
fill: #849B87;
}
.st63 {
opacity: 0.2;
fill: #A0C8D7;
}
.st64 {
opacity: 0.2;
fill: #77A4BD;
}
.st65 {
opacity: 0.5;
fill: #849B87;
}
.st66 {
opacity: 0.5;
fill: #A0C8D7;
}
.st67 {
opacity: 0.5;
fill: #77A4BD;
}
.st68 {
fill: none;
stroke: #333333;
stroke-width: 4;
stroke-miterlimit: 10;
}
.st69 {
fill: #F5E6C8;
stroke: #333333;
stroke-width: 3;
stroke-miterlimit: 10;
}
</style>
Image for Reference

Answer 1

You will need to give the symbol a viewBox attribute:
<symbol id="saturnGif" viewBox="24 34 52 32">
Then when you use the symbol you give the <use> element a width and a height.
<use xlink:href="#saturnGif" width="104" height="64" />
Also you can position the <use> with an x and y attributes.
<svg viewBox="0 0 52 32">
<symbol id="saturnGif" viewBox="24 34 52 32">
svg{border:1px solid}
<svg viewBox="0 0 200 200">
<symbol id="saturnGif" viewBox="7 24 87 53">
<path class="st10" d="M50,40.6c-23.5,0-42.5,4.2-42.5,9.4h14.2c0-3.5,12.7-6.3,28.3-6.3s28.3,2.8,28.3,6.3h14.2 C92.5,44.8,73.5,40.6,50,40.6z" fill="#f36c00" stroke="#f36c00" ></path>
<circle class="st1" cx="50" cy="50" r="25.7" fill="rgb(248, 178, 106)" ></circle>
<path class="st10" d="M50,56.3c-15.6,0-28.3-2.8-28.3-6.3H7.5c0,5.2,19,9.4,42.5,9.4s42.5-4.2,42.5-9.4H78.3 C78.3,53.5,65.6,56.3,50,56.3z" fill="#f36c00" stroke="#f36c00" ></path>
</symbol>
<use xlink:href="#saturnGif" x="13" y="48" width="174" height="106" >
</use>
</svg>
If you need to use this symbol alone like an inline icon you may use the same viewBox for both svg and symbol. If you are using an svg element without width and height but with a viewBox attribute the svg element will take the width of the container element.
<svg viewBox="0 0 52 32">
<symbol id="saturnGif" viewBox="24 34 52 32">...</symbol>
</svg>
.......
<div class="container">
<svg viewBox="0 0 52 32"><use xlink:href="#saturnGif" /></svg>
</div>
Next comes an animated version where I'm using SMIL animations. I'm animating the use element: The values attribute represent the stages of the animation. I'm animating the attribute transform: attributeName="transform" type="rotate" and the animation's duration is 4 seconds: dur="4s". The animation happens around the point {x:100,y:100}:
values="0,100,100; -5,100,100; 0,100,100; 5,100,100; 0,100,100"
svg{border:1px solid;width:90vh}
<svg viewBox="0 0 200 200">
<symbol id="saturnGif" viewBox="7 24 87 53">
<path class="st10" d="M50,40.6c-23.5,0-42.5,4.2-42.5,9.4h14.2c0-3.5,12.7-6.3,28.3-6.3s28.3,2.8,28.3,6.3h14.2 C92.5,44.8,73.5,40.6,50,40.6z" fill="#f36c00" stroke="#f36c00" ></path>
<circle class="st1" cx="50" cy="50" r="25.7" fill="rgb(248, 178, 106)" ></circle>
<path class="st10" d="M50,56.3c-15.6,0-28.3-2.8-28.3-6.3H7.5c0,5.2,19,9.4,42.5,9.4s42.5-4.2,42.5-9.4H78.3 C78.3,53.5,65.6,56.3,50,56.3z" fill="#f36c00" stroke="#f36c00" ></path>
</symbol>
<use xlink:href="#saturnGif" x="13" y="48" width="174" height="106" >
<animateTransform
attributeType="XML"
attributeName="transform"
type="rotate"
values="0,100,100; -5,100,100; 0,100,100; 5,100,100; 0,100,100"
dur="4s"
repeatCount="indefinite" />
</use>
</svg>