Swaps svgs for the pngs on the homepage (#17325)

assets/sass/_base.sass

@@ -488,9 +488,9 @@ footer
 
 .social a
   display: inline-block
-  background-image: url(/images/social_sprite.png)
+  background-image: url(/images/social_sprite.svg)
   background-repeat: no-repeat
-  background-size: auto
+  background-size: 300px
   width: 50px
   height: 50px
   border-radius: 5px
@@ -1132,7 +1132,7 @@ $feature-box-div-margin-bottom: 40px
   section#cncf
     padding-top: 60px
     padding-bottom: 140px
-    background-image: url(/images/cncf-color.png)
+    background-image: url(/images/cncf-color.svg)
     background-position: center 100px
     background-repeat: no-repeat
     background-size: 300px
@@ -1308,10 +1308,10 @@ $feature-box-div-margin-bottom: 40px
 #features
   padding-top: 140px
   background-color: $light-grey
-  background-image: url(/images/wheel.png)
+  background-image: url(/images/wheel.svg)
   background-position: center 60px
   background-repeat: no-repeat
-  background-size: auto
+  background-size: 60px
 
 .feature-box
   //padding: 50px 0

assets/sass/_desktop.sass

@@ -129,7 +129,7 @@ $video-section-height: 550px
           transform: translateY(-50%)
 
           img
-            max-width: 425px
+            width: 425px
 
         //.content
         //	width: 50%
@@ -211,9 +211,9 @@ $video-section-height: 550px
 
   .social a
     display: inline-block
-    background-image: url(../images/social_sprite.png)
+    background-image: url(../images/social_sprite.svg)
     background-repeat: no-repeat
-    background-size: auto
+    background-size: 300px
     width: 50px
     height: 50px
     border-radius: 5px