Reduce base64 encoded svg to single instance in compiled CSS

css/avatar.css

@@ -1,4 +1,6 @@
 .avatar {
+  position: absolute;
+  top: 0;
   border-radius: var(--space-xxs);
   transition: filter var(--transition-md) ease-out;
 }

css/comment.css

@@ -8,12 +8,8 @@
 }
 
 .comment__avatar {
-  background-image: var(--windy-svg);
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: 100%;
   margin-right: var(--space-sm);
-  height: var(--icon-size-xl);
+  padding-bottom: 100%;
   width: var(--icon-size-xl);
 }
 

css/logo.css

@@ -18,11 +18,12 @@
 
 .logo__link {
   display: block;
+  position: relative;
   margin: 0 auto;
   max-width: 16rem;
-  position: relative;
   border-radius: 50%;
   transition: box-shadow var(--transition-fs) ease-out;
+  padding-bottom: 100%;
 }
 
 .logo__link:focus {
@@ -30,25 +31,15 @@
 }
 
 .logo__link:before {
-  background-image: var(--windy-svg);
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: 100%;
-  content: "";
-  display: block;
   filter: drop-shadow(0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.5));
-  padding-bottom: 100%;
-  width: 100%;
 }
 
 .logo__image {
   bottom: 0;
   display: block;
-  height: 100%;
   left: 0;
   position: absolute;
   right: 0;
   top: 0;
   transition: opacity var(--transition-sl) ease-out;
-  width: 100%;
 }

theme/classes/walker.comments.php

@@ -21,7 +21,7 @@ class Windycoys_Walker_Comments extends Walker_Comment {
     $output .= '<li class="comments__item">';
     $output .= '<div class="comment">';
     $output .= '<div class="comment__head">';
-    $output .= sprintf('<div class="comment__avatar">%s</div>', $avatar);
+    $output .= sprintf('<div class="comment__avatar has-silhouette">%s</div>', $avatar);
     $output .= '<div class="comment__metadata">';
     $output .= sprintf('<span class="comment__author">%s</span>', $author);
     $output .= sprintf('<span class="comment__date">%s</span>', $date);

theme/partials/logo.php

@@ -1,5 +1,5 @@
 <div class="logo">
-  <a class="logo__link" href="<?php echo home_url(); ?>">
+  <a class="logo__link has-silhouette" href="<?php echo home_url(); ?>">
     <img src="<?php echo get_template_directory_uri(); ?>/images/icon.png" alt="WindyCOYS logo" class="logo__image">
   </a>
 </div>