SVG Animations Very Laggy after Resizing (Expert)?
<p>So I am adding an SVG to my website. I am also resizing this svg to fit most of my screen, by changing a class called <strong>"background-svg"</strong> that you'll see in my code below.</p>

<p>Basically, If you make the SVG bigger, it becomes super laggy (like its animations are super laggy) and even other animations on the page become super laggy. <a href="http://jsfiddle.net/u62h0xzf/2/embedded/" rel="nofollow">Try On JSFIDDLE</a></p>

<p>If you make the SVG small, the animations are Smooth. On the JSFIDDLE link above, try making your window smaller (you'll see the animations are better), then make your window bigger (laggy animations again). </p>

<p><strong>Problem Only Occurs on Chrome and Safari...No Lags on FireFox</strong></p>

<p>My SVG:</p>

<pre><code>&lt;svg class="background-svg"  viewBox="0 0 400 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
  &lt;defs&gt;
     &lt;filter x="" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-1"&gt;
        &lt;feOffset dx="0" dy="10" in="SourceAlpha" result="shadowOffsetOuter1"&gt;&lt;/feOffset&gt;
        &lt;feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"&gt;&lt;/feGaussianBlur&gt;
        &lt;feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.095 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"&gt;&lt;/feColorMatrix&gt;
        &lt;feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetInner1"&gt;&lt;/feOffset&gt;
        &lt;feGaussianBlur stdDeviation="1.5" in="shadowOffsetInner1" result="shadowBlurInner1"&gt;&lt;/feGaussianBlur&gt;
        &lt;feComposite in="shadowBlurInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"&gt;&lt;/feComposite&gt;
        &lt;feColorMatrix values="0 0 0 0 0.647959184   0 0 0 0 0.549016553   0 0 0 0 0.549016553  0 0 0 0.35 0" in="shadowInnerInner1" type="matrix" result="shadowMatrixInner1"&gt;&lt;/feColorMatrix&gt;
        &lt;feMerge&gt;
           &lt;feMergeNode in="shadowMatrixOuter1"&gt;&lt;/feMergeNode&gt;
           &lt;feMergeNode in="SourceGraphic"&gt;&lt;/feMergeNode&gt;
           &lt;feMergeNode in="shadowMatrixInner1"&gt;&lt;/feMergeNode&gt;
        &lt;/feMerge&gt;
     &lt;/filter&gt;
  &lt;/defs&gt;
  &lt;g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"&gt;

     &lt;g id="Artboard-1" fill="#8B65E4"&gt;
        &lt;path d="M187.785156,200 L180,232 L66,232 L58.2148437,200 L187.785156,200 Z" id="Rectangle-1" filter="url(#filter-1)"&gt;&lt;/path&gt;
        &lt;path d="M349.760339,49.1234675 L375.905579,277.733833 L199.999999,277.733834 L43.9648432,143.710938 L349.760339,49.1234675 Z" id="Triangle-1" filter="url(#filter-1)"&gt;&lt;/path&gt;
        &lt;path d="M399.8936,96.1889997 L29.4623426,250.140552 L0,36.4302476 L399.8936,96.1889997 Z" id="Triangle-2" filter="url(#filter-1)"&gt;&lt;/path&gt;

     &lt;/g&gt;
    &lt;foreignObject x="8%" y="20%" width="80%" height="100%"
           &gt;
           &lt;body xmlns="http://www.w3.org/1999/xhtml"&gt;
              &lt;div xmlns="http://www.w3.org/1999/xhtml"&gt;
                 &lt;h1&gt;
                    Hey! &lt;br /&gt;I'm &lt;span&gt;someperson&lt;/span&gt; &lt;span class="info"&gt;I like&lt;/span&gt;
                 &lt;/h1&gt;
              &lt;/div&gt;
           &lt;/body&gt;
        &lt;/foreignObject&gt;
  &lt;/g&gt;
&lt;/svg&gt;
</code></pre>

<p>My CSS:</p>

<pre><code>@import url(https://fonts.googleapis.com/css?family=Oswald|Roboto);
body {
  height: 100vh;
  overflow: hidden;
  text-align: center;
  font-family: "Roboto", sans-serif;
}

.background-svg{
  position: absolute;
  top: 0;
  left: 20%;
  width: 80%;
  height: 80%;
}


h1 {
  font-weight: 300;
  font-size: 24px;
  letter-spacing: 2px;
  color: #fff;
  text-align: left;
}
h1 .info {
  display: block;
  color: #CFBDF9;
  font-size: 16px;
  letter-spacing: 0px;
}

.box {
  text-align: right;
  padding: 0px 40px;
}


.box-item {
  display: inline-block;
  color: #fff;
  font-size: 30px;
  padding-right: 20px;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

#Triangle-1 {
  -webkit-animation: box 2.5s infinite; /* Main Anim is super laggy on chrome and safary*/
  -moz-animation: box 2.5s infinite; /* Main Anim seems good on Firefox*/
}

#Triangle-2 { 
  -webkit-animation: box2 1s infinite; /* same as above */
  -moz-animation: box2 1s infinite; /* same as above */
}

@keyframes box2 {
  10% {
    -moz-transform: rotate(1deg);
    -ms-transform: rotate(1deg);
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg);
  }
  90% {
    -moz-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }
}
@keyframes box {
  10% {
    -moz-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }
  90% {
    -moz-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
}
</code></pre>

<p><strong>TL;DR</strong>: Super Laggy SVG Animations if SVG is large, but smooth animations if SVG is small. </p>