I am not too familiar with animating SVG's embedded within HTML but here's what I attempted to do.
I have one SVG image on my site like so:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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 125 219.1" style="enable-background:new 0 0 125 219.1;" xml:space="preserve">
<style type="text/css">
.st0{fill:#735545;}
.st1{fill:#5C4033;}
.st2{fill:none;}
.st3{fill:#3E3E48;}
.st4{fill:#2D2E39;}
.st5{fill:#BAB9B5;}
.st6{fill:#A3A2A1;}
.st7{fill:#CFCDC6;}
.st8{fill:#E0E0DC;}
.st9{fill:#E64D3C;}
.st10{fill:#CC3E36;}
.st11{fill:#C9C3BB;}
.st12{fill:#B0A79A;}
.st13{fill:#B5AEA4;}
.st14{fill:#E1CBB9;}
.st15{fill:#CDAE98;}
.st16{fill:#CB8E7E;}
.st17{fill:#B27669;}
.st18{fill:#393631;}
.st19{fill:#484642;}
.st20{fill:#F0C419;}
.st21{fill:#F29D1F;}
.st22{fill:#E57E25;}
.st23{fill:#D15627;}
.st24{fill:#C03B2B;}
</style>
<title>molay</title>
<g>
<g>
<g>
<polygon class="st0" points="37.5,8.7 37.5,201.1 61.8,201.1 61.8,0 "/>
<polygon class="st1" points="61.8,0 61.8,201.1 86.2,201.1 86.2,7.6 "/>
</g>
<g>
<g>
<polygon class="st2" points="94,86.4 67.5,98.1 61.8,100.6 86.2,89.8 "/>
<polygon class="st3" points="53,74.6 35.9,81.9 29.7,86.4 56.2,98.1 61.8,100.6 61.8,75.8 "/>
<polygon class="st4" points="94,86.4 87.8,81.9 70.7,74.6 61.8,75.8 61.8,100.6 67.5,98.1 "/>
<polygon class="st5" points="103.3,102.3 94,86.4 86.2,89.8 86.2,141.2 100,128.6 "/>
<polygon class="st6" points="29.7,86.4 20.5,102.3 23.7,128.6 37.5,141.2 37.5,89.8 "/>
<polygon class="st7" points="57.7,133.5 55.6,133.5 58.1,131.8 59.7,128.6 59.8,121.3 52.5,121.4 49.3,123 47.6,125.5
47.6,123.4 47.6,119.2 47.6,115.1 47.6,113 49.3,115.4 52.5,117.1 59.8,117.2 59.7,109.9 58.1,106.7 55.6,104.9 57.7,104.9
61.8,104.9 61.8,100.6 37.5,89.8 37.5,141.2 37.5,166.6 61.8,175.4 61.8,133.5 "/>
<polygon class="st8" points="61.8,100.6 61.8,104.9 61.9,104.9 66,104.9 68.1,104.9 65.7,106.7 64,109.9 63.9,117.2 71.2,117.1
74.4,115.4 76.1,113 76.1,115.1 76.1,119.2 76.1,123.4 76.1,125.5 74.4,123 71.2,121.4 63.9,121.3 64,128.6 65.7,131.8
68.1,133.5 66,133.5 61.9,133.5 61.8,133.5 61.8,175.4 86.2,166.6 86.2,141.2 86.2,89.8 "/>
<polygon class="st9" points="55.6,104.9 58.1,106.7 59.7,109.9 59.8,117.2 52.5,117.1 49.3,115.4 47.6,113 47.6,115.1
47.6,119.2 47.6,123.4 47.6,125.5 49.3,123 52.5,121.4 59.8,121.3 59.7,128.6 58.1,131.8 55.6,133.5 57.7,133.5 61.8,133.5
61.8,104.9 57.7,104.9 "/>
<polygon class="st10" points="61.9,133.5 66,133.5 68.1,133.5 65.7,131.8 64,128.6 63.9,121.3 71.2,121.4 74.4,123 76.1,125.5
76.1,123.4 76.1,119.2 76.1,115.1 76.1,113 74.4,115.4 71.2,117.1 63.9,117.2 64,109.9 65.7,106.7 68.1,104.9 66,104.9
61.9,104.9 61.8,104.9 61.8,133.5 "/>
</g>
<g>
<g>
<g>
<polygon class="st11" points="81.6,72.8 81.6,65.9 78.1,59.3 78.1,54.7 74.4,43.8 61.8,43.8 61.8,84.1 62.8,88.6 65.4,89.8
69.1,87.9 70.2,83.1 70.2,74.8 84.5,80.5 "/>
<polygon class="st12" points="53.5,83.1 54.6,87.9 53.5,83.1 "/>
<polygon class="st13" points="49.3,43.8 45.7,54.7 45.7,59.3 42.1,65.9 42.1,72.8 39.2,80.5 53.5,74.8 53.5,83.1 54.6,87.9
58.3,89.8 60.9,88.6 61.8,84.1 61.8,43.8 "/>
</g>
<g>
<polygon class="st14" points="71.2,40.3 74.4,43.8 74.4,48.3 72.9,55.3 72.7,59.3 69,67.6 69,67.6 72.7,59.2 72.9,55.2
74.4,48.2 74.4,43.7 "/>
<path class="st14" d="M55.8,38.5l-3.4,1.7l-3.2,3.6v4.5l1.5,7l0.2,4l3.7,8.4c0,0,4.5-3,4.6-3l2.6-0.1V37.3L55.8,38.5z"/>
<path class="st15" d="M72.9,55.3l1.5-7v-4.5l-3.1-3.5l-3.4-1.7l-6-1.2v27.3v0.1l2.6,0.1c0.2,0,4.5,2.9,4.5,2.9l0-0.1l3.7-8.3
L72.9,55.3z"/>
</g>
</g>
<g>
<polygon class="st16" points="59.2,64.7 61.8,66.8 64.5,64.7 61.8,59.4 "/>
<polygon class="st17" points="61.8,59.4 59.2,64.7 61.8,66.8 61.8,66.8 "/>
<polygon class="st18" points="52.6,52.4 53.5,51.3 58.6,49.3 59.7,50.1 "/>
<polygon class="st19" points="56.1,55.5 54.5,55.1 55.1,54.4 57,54.4 57.7,55.1 "/>
<polygon class="st19" points="67.6,55.4 66.1,55 66.7,54.3 68.6,54.3 69.2,55 "/>
<polygon class="st18" points="71.1,52.4 70.2,51.3 65.1,49.3 64,50.1 "/>
</g>
</g>
</g>
</g>
<g>
<g>
<g>
<polygon class="st20" points="50,141.8 53.2,131.6 37.7,138.8 45.4,155.8 37.3,163.5 30.8,159 29.2,145.6 0,144.3 17.3,155.8
11.2,174.4 25.3,203.7 61.6,214.9 61.6,155.8 "/>
<polygon class="st21" points="123.3,144.3 94.1,145.6 92.5,159 85.9,163.5 77.8,155.8 85.6,138.8 70.1,131.6 73.2,141.8
61.6,155.8 61.6,214.9 98,203.7 112.1,174.4 106,155.8 "/>
</g>
<g>
<polygon class="st22" points="50,146 53.2,135.8 37.7,142.9 45.4,159.9 37.3,167.6 30.8,163.2 29.2,149.8 0,148.4 17.3,159.9
11.2,178.6 25.3,207.9 61.6,219.1 61.6,159.9 "/>
<polygon class="st23" points="123.3,148.4 94.1,149.8 92.5,163.2 85.9,167.6 77.8,159.9 85.6,142.9 70.1,135.8 73.2,146
61.6,159.9 61.6,219.1 98,207.9 112.1,178.6 106,159.9 "/>
</g>
<g>
<polygon class="st9" points="54,171 56.1,164.3 45.9,169 51,180.1 45.7,185.2 41.4,182.3 40.3,173.5 21.1,172.6 32.5,180.1
28.4,192.4 37.7,211.7 61.6,219.1 61.6,180.1 "/>
<polygon class="st24" points="102.2,172.6 83,173.5 81.9,182.3 77.6,185.2 72.3,180.1 77.4,169 67.2,164.3 69.3,171 61.6,180.1
61.6,219.1 85.6,211.7 94.8,192.4 90.8,180.1 "/>
</g>
</g>
<polygon class="st21" points="107.6,135.1 125,128.1 107.6,131.3 "/>
<polygon class="st20" points="17.4,135.1 0,128.1 17.4,131.3 "/>
<polygon class="st20" points="10.8,122.9 13.8,126.6 15.6,122.9 "/>
<polygon class="st21" points="112.3,122.9 109.3,126.6 107.6,122.9 "/>
</g>
I tried to animate some sections within the 'g' brackets using animate.css. So I would wrap them around a...
<section class="wow animated fadeInLeft">
</section>
But it wasn't working so obviously I am doing it completely wrong. I want a certain section of the .svg to start pulsing (so zooming in and out infinitely). The following section...
<g>
<g>
<polygon class="st20" points="50,141.8 53.2,131.6 37.7,138.8 45.4,155.8 37.3,163.5 30.8,159 29.2,145.6 0,144.3 17.3,155.8
11.2,174.4 25.3,203.7 61.6,214.9 61.6,155.8 "/>
<polygon class="st21" points="123.3,144.3 94.1,145.6 92.5,159 85.9,163.5 77.8,155.8 85.6,138.8 70.1,131.6 73.2,141.8
61.6,155.8 61.6,214.9 98,203.7 112.1,174.4 106,155.8 "/>
</g>
<g>
<polygon class="st22" points="50,146 53.2,135.8 37.7,142.9 45.4,159.9 37.3,167.6 30.8,163.2 29.2,149.8 0,148.4 17.3,159.9
11.2,178.6 25.3,207.9 61.6,219.1 61.6,159.9 "/>
<polygon class="st23" points="123.3,148.4 94.1,149.8 92.5,163.2 85.9,167.6 77.8,159.9 85.6,142.9 70.1,135.8 73.2,146
61.6,159.9 61.6,219.1 98,207.9 112.1,178.6 106,159.9 "/>
</g>
<g>
<polygon class="st9" points="54,171 56.1,164.3 45.9,169 51,180.1 45.7,185.2 41.4,182.3 40.3,173.5 21.1,172.6 32.5,180.1
28.4,192.4 37.7,211.7 61.6,219.1 61.6,180.1 "/>
<polygon class="st24" points="102.2,172.6 83,173.5 81.9,182.3 77.6,185.2 72.3,180.1 77.4,169 67.2,164.3 69.3,171 61.6,180.1
61.6,219.1 85.6,211.7 94.8,192.4 90.8,180.1 "/>
</g>
</g>
What code can I implement to make that part of the svg group to pulse in and out. Thanks for any help.
You don't have to add any wrapper elements at all. Just add the animate.css specific classes to the wrapper g element like in the below snippet and it would work.
One additional thing that you need to do is to set the transform-origin for the animated g element. I've set it as the bottom-right point based on the coords of the g elements.
.animated {
transform-origin: 61.6px 219.1px;
animation-iteration-count: infinite;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet"/>
<?xml version="1.0" encoding="utf-8" ?>
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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 125 219.1" style="enable-background:new 0 0 125 219.1;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #735545;
}
.st1 {
fill: #5C4033;
}
.st2 {
fill: none;
}
.st3 {
fill: #3E3E48;
}
.st4 {
fill: #2D2E39;
}
.st5 {
fill: #BAB9B5;
}
.st6 {
fill: #A3A2A1;
}
.st7 {
fill: #CFCDC6;
}
.st8 {
fill: #E0E0DC;
}
.st9 {
fill: #E64D3C;
}
.st10 {
fill: #CC3E36;
}
.st11 {
fill: #C9C3BB;
}
.st12 {
fill: #B0A79A;
}
.st13 {
fill: #B5AEA4;
}
.st14 {
fill: #E1CBB9;
}
.st15 {
fill: #CDAE98;
}
.st16 {
fill: #CB8E7E;
}
.st17 {
fill: #B27669;
}
.st18 {
fill: #393631;
}
.st19 {
fill: #484642;
}
.st20 {
fill: #F0C419;
}
.st21 {
fill: #F29D1F;
}
.st22 {
fill: #E57E25;
}
.st23 {
fill: #D15627;
}
.st24 {
fill: #C03B2B;
}
</style>
<title>molay</title>
<g>
<g>
<g>
<polygon class="st0" points="37.5,8.7 37.5,201.1 61.8,201.1 61.8,0 " />
<polygon class="st1" points="61.8,0 61.8,201.1 86.2,201.1 86.2,7.6 " />
</g>
<g>
<g>
<polygon class="st2" points="94,86.4 67.5,98.1 61.8,100.6 86.2,89.8 " />
<polygon class="st3" points="53,74.6 35.9,81.9 29.7,86.4 56.2,98.1 61.8,100.6 61.8,75.8 " />
<polygon class="st4" points="94,86.4 87.8,81.9 70.7,74.6 61.8,75.8 61.8,100.6 67.5,98.1 " />
<polygon class="st5" points="103.3,102.3 94,86.4 86.2,89.8 86.2,141.2 100,128.6 " />
<polygon class="st6" points="29.7,86.4 20.5,102.3 23.7,128.6 37.5,141.2 37.5,89.8 " />
<polygon class="st7" points="57.7,133.5 55.6,133.5 58.1,131.8 59.7,128.6 59.8,121.3 52.5,121.4 49.3,123 47.6,125.5
47.6,123.4 47.6,119.2 47.6,115.1 47.6,113 49.3,115.4 52.5,117.1 59.8,117.2 59.7,109.9 58.1,106.7 55.6,104.9 57.7,104.9
61.8,104.9 61.8,100.6 37.5,89.8 37.5,141.2 37.5,166.6 61.8,175.4 61.8,133.5 " />
<polygon class="st8" points="61.8,100.6 61.8,104.9 61.9,104.9 66,104.9 68.1,104.9 65.7,106.7 64,109.9 63.9,117.2 71.2,117.1
74.4,115.4 76.1,113 76.1,115.1 76.1,119.2 76.1,123.4 76.1,125.5 74.4,123 71.2,121.4 63.9,121.3 64,128.6 65.7,131.8
68.1,133.5 66,133.5 61.9,133.5 61.8,133.5 61.8,175.4 86.2,166.6 86.2,141.2 86.2,89.8 " />
<polygon class="st9" points="55.6,104.9 58.1,106.7 59.7,109.9 59.8,117.2 52.5,117.1 49.3,115.4 47.6,113 47.6,115.1
47.6,119.2 47.6,123.4 47.6,125.5 49.3,123 52.5,121.4 59.8,121.3 59.7,128.6 58.1,131.8 55.6,133.5 57.7,133.5 61.8,133.5
61.8,104.9 57.7,104.9 " />
<polygon class="st10" points="61.9,133.5 66,133.5 68.1,133.5 65.7,131.8 64,128.6 63.9,121.3 71.2,121.4 74.4,123 76.1,125.5
76.1,123.4 76.1,119.2 76.1,115.1 76.1,113 74.4,115.4 71.2,117.1 63.9,117.2 64,109.9 65.7,106.7 68.1,104.9 66,104.9
61.9,104.9 61.8,104.9 61.8,133.5 " />
</g>
<g>
<g>
<g>
<polygon class="st11" points="81.6,72.8 81.6,65.9 78.1,59.3 78.1,54.7 74.4,43.8 61.8,43.8 61.8,84.1 62.8,88.6 65.4,89.8
69.1,87.9 70.2,83.1 70.2,74.8 84.5,80.5 " />
<polygon class="st12" points="53.5,83.1 54.6,87.9 53.5,83.1 " />
<polygon class="st13" points="49.3,43.8 45.7,54.7 45.7,59.3 42.1,65.9 42.1,72.8 39.2,80.5 53.5,74.8 53.5,83.1 54.6,87.9
58.3,89.8 60.9,88.6 61.8,84.1 61.8,43.8 " />
</g>
<g>
<polygon class="st14" points="71.2,40.3 74.4,43.8 74.4,48.3 72.9,55.3 72.7,59.3 69,67.6 69,67.6 72.7,59.2 72.9,55.2
74.4,48.2 74.4,43.7 " />
<path class="st14" d="M55.8,38.5l-3.4,1.7l-3.2,3.6v4.5l1.5,7l0.2,4l3.7,8.4c0,0,4.5-3,4.6-3l2.6-0.1V37.3L55.8,38.5z" />
<path class="st15" d="M72.9,55.3l1.5-7v-4.5l-3.1-3.5l-3.4-1.7l-6-1.2v27.3v0.1l2.6,0.1c0.2,0,4.5,2.9,4.5,2.9l0-0.1l3.7-8.3
L72.9,55.3z" />
</g>
</g>
<g>
<polygon class="st16" points="59.2,64.7 61.8,66.8 64.5,64.7 61.8,59.4 " />
<polygon class="st17" points="61.8,59.4 59.2,64.7 61.8,66.8 61.8,66.8 " />
<polygon class="st18" points="52.6,52.4 53.5,51.3 58.6,49.3 59.7,50.1 " />
<polygon class="st19" points="56.1,55.5 54.5,55.1 55.1,54.4 57,54.4 57.7,55.1 " />
<polygon class="st19" points="67.6,55.4 66.1,55 66.7,54.3 68.6,54.3 69.2,55 " />
<polygon class="st18" points="71.1,52.4 70.2,51.3 65.1,49.3 64,50.1 " />
</g>
</g>
</g>
</g>
<g>
<g class='animated pulse'>
<g>
<polygon class="st20" points="50,141.8 53.2,131.6 37.7,138.8 45.4,155.8 37.3,163.5 30.8,159 29.2,145.6 0,144.3 17.3,155.8
11.2,174.4 25.3,203.7 61.6,214.9 61.6,155.8 " />
<polygon class="st21" points="123.3,144.3 94.1,145.6 92.5,159 85.9,163.5 77.8,155.8 85.6,138.8 70.1,131.6 73.2,141.8
61.6,155.8 61.6,214.9 98,203.7 112.1,174.4 106,155.8 " />
</g>
<g>
<polygon class="st22" points="50,146 53.2,135.8 37.7,142.9 45.4,159.9 37.3,167.6 30.8,163.2 29.2,149.8 0,148.4 17.3,159.9
11.2,178.6 25.3,207.9 61.6,219.1 61.6,159.9 " />
<polygon class="st23" points="123.3,148.4 94.1,149.8 92.5,163.2 85.9,167.6 77.8,159.9 85.6,142.9 70.1,135.8 73.2,146
61.6,159.9 61.6,219.1 98,207.9 112.1,178.6 106,159.9 " />
</g>
<g>
<polygon class="st9" points="54,171 56.1,164.3 45.9,169 51,180.1 45.7,185.2 41.4,182.3 40.3,173.5 21.1,172.6 32.5,180.1
28.4,192.4 37.7,211.7 61.6,219.1 61.6,180.1 " />
<polygon class="st24" points="102.2,172.6 83,173.5 81.9,182.3 77.6,185.2 72.3,180.1 77.4,169 67.2,164.3 69.3,171 61.6,180.1
61.6,219.1 85.6,211.7 94.8,192.4 90.8,180.1 " />
</g>
</g>
<polygon class="st21" points="107.6,135.1 125,128.1 107.6,131.3 " />
<polygon class="st20" points="17.4,135.1 0,128.1 17.4,131.3 " />
<polygon class="st20" points="10.8,122.9 13.8,126.6 15.6,122.9 " />
<polygon class="st21" points="112.3,122.9 109.3,126.6 107.6,122.9 " />
</g>
</g>
</svg>