From 60db82e459cbe3fe32566a15aa7353d90651d8b2 Mon Sep 17 00:00:00 2001
From: Keith Solomon <ksolomon@gmail.com>
Date: Wed, 12 Aug 2026 12:08:24 -0500
Subject: [PATCH] Render social-share icons as <img> SVG data URIs

Inline <svg> elements render with their default width/height in browsers
even when 'style' and width/height attributes are set (a known quirk
in mixed HTML5/SVG content with some CSS specificity scenarios). Switched
to <img src='data:image/svg+xml,...'> instead. This is universally well-
supported, sizes via standard <img> CSS rules (no namespace/parser edge
cases), and the inline 'width=20 height=20 style=width:20px;height:20px'
on <img> reliably applies.

Added 'img' and 'style' to the kses allowed list so wp_kses() preserves
the data: URI src and the inline styles.
---
 projects-portfolio.php | 36 +++++++++++++++++++++++++++---------
 1 file changed, 27 insertions(+), 9 deletions(-)

diff --git a/projects-portfolio.php b/projects-portfolio.php
index df71359..3277b6e 100644
--- a/projects-portfolio.php
+++ b/projects-portfolio.php
@@ -350,46 +350,64 @@ function projects_portfolio_social_sharing_buttons( $project_id ) {
 
     $html = '<div class="project-social-sharing">';
 
+    $svg_icon = function( string $name, string $path ) use ( &$html ) {
+    // Render each social icon as an <img> with an inline SVG data URI.
+    // Using <img> instead of inline <svg> ensures browser CSS sizing and
+    // avoids any namespace/parser quirks with inline SVG in mixed content.
+    $svg = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#0073aa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">' . $path . '</svg>';
+    $data_uri = 'data:image/svg+xml;utf8,' . rawurlencode( $svg );
+    $html .= '<img src="' . esc_attr( $data_uri ) . '" alt="' . esc_attr( $name ) . '" width="20" height="20" style="width:20px;height:20px;display:inline-block;vertical-align:middle;" />';
+};
+
     // Facebook.
     $html .= '<a href="https://www.facebook.com/sharer/sharer.php?u=' . $url . '" target="_blank" rel="noopener noreferrer">';
-    $html .= '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#0073aa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:block;width:20px;height:20px;"><path d="M7 10v-3a1 1 0 0 1 1 -1h3v-4h4v4h3a1 1 0 0 1 1 1v3h-4v10h-4v-10h-3" /></svg>';
+    $svg_icon( 'Facebook', '<path d="M7 10v-3a1 1 0 0 1 1 -1h3v-4h4v4h3a1 1 0 0 1 1 1v3h-4v10h-4v-10h-3" />' );
     $html .= '</a>';
 
     // X (Twitter).
     $html .= '<a href="https://twitter.com/intent/tweet?text=' . $title . '&url=' . $url . '" target="_blank" rel="noopener noreferrer">';
-    $html .= '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#0073aa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:block;width:20px;height:20px;"><path d="M7 4l10 16m0 -16l-10 16" /></svg>';
+    $svg_icon( 'X', '<path d="M7 4l10 16m0 -16l-10 16" />' );
     $html .= '</a>';
 
     // LinkedIn.
     $html .= '<a href="https://www.linkedin.com/sharing/share-offsite/?url=' . $url . '" target="_blank" rel="noopener noreferrer">';
-    $html .= '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#0073aa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:block;width:20px;height:20px;"><rect x="4" y="4" width="16" height="16" rx="2" /><line x1="8" y1="11" x2="8" y2="16" /><line x1="8" y1="8" x2="8" y2="8.01" /><line x1="12" y1="16" x2="12" y2="11" /><path d="M16 16v-3a2 2 0 0 0 -4 0" /></svg>';
+    $svg_icon( 'LinkedIn', '<rect x="4" y="4" width="16" height="16" rx="2" /><line x1="8" y1="11" x2="8" y2="16" /><line x1="8" y1="8" x2="8" y2="8.01" /><line x1="12" y1="16" x2="12" y2="11" /><path d="M16 16v-3a2 2 0 0 0 -4 0" />' );
     $html .= '</a>';
 
     // Reddit.
     $html .= '<a href="https://www.reddit.com/submit?url=' . $url . '&title=' . $title . '" target="_blank" rel="noopener noreferrer">';
-    $html .= '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#0073aa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:block;width:20px;height:20px;"><circle cx="12" cy="12" r="9" /><path d="M12 12m-6 0a6 6 0 1 0 12 0a6 6 0 1 0 -12 0" /><path d="M12 12h0" /><path d="M8.5 13c.667 .667 1.333 1 2 1s1.333 -.333 2 -1" /></svg>';
+    $svg_icon( 'Reddit', '<circle cx="12" cy="12" r="9" /><path d="M12 12m-6 0a6 6 0 1 0 12 0a6 6 0 1 0 -12 0" /><path d="M12 12h0" /><path d="M8.5 13c.667 .667 1.333 1 2 1s1.333 -.333 2 -1" />' );
     $html .= '</a>';
 
     // WhatsApp.
     $html .= '<a href="https://wa.me/?text=' . $title . '%20' . $url . '" target="_blank" rel="noopener noreferrer">';
-    $html .= '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#0073aa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:block;width:20px;height:20px;"><path d="M3 21l1.65 -4.75a9 9 0 1 1 3.85 3.85z" /><path d="M9 10c1 2 3 3 5 4" /><path d="M9 13c1 1 2 2 4 3" /></svg>';
+    $svg_icon( 'WhatsApp', '<path d="M3 21l1.65 -4.75a9 9 0 1 1 3.85 3.85z" /><path d="M9 10c1 2 3 3 5 4" /><path d="M9 13c1 1 2 2 4 3" />' );
     $html .= '</a>';
 
     // Pinterest.
     $html .= '<a href="https://pinterest.com/pin/create/button/?url=' . $url . '&description=' . $title . '" target="_blank" rel="noopener noreferrer">';
-    $html .= '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#0073aa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:block;width:20px;height:20px;"><circle cx="12" cy="12" r="9" /><path d="M8 17c1 -2 1.5 -4 .5 -6s-.5 -4 .5 -6" /><path d="M15 11c.667 -1 1.667 -2.333 3 -4" /></svg>';
+    $svg_icon( 'Pinterest', '<circle cx="12" cy="12" r="9" /><path d="M8 17c1 -2 1.5 -4 .5 -6s-.5 -4 .5 -6" /><path d="M15 11c.667 -1 1.667 -2.333 3 -4" />' );
     $html .= '</a>';
 
     // Email.
     $html .= '<a href="mailto:?subject=' . $title . '&body=' . $url . '" target="_blank" rel="noopener noreferrer">';
-    $html .= '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#0073aa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:block;width:20px;height:20px;"><path d="M3 7l9 6l9 -6" /><rect x="3" y="5" width="18" height="14" rx="2" /></svg>';
+    $svg_icon( 'Email', '<path d="M3 7l9 6l9 -6" /><rect x="3" y="5" width="18" height="14" rx="2" />' );
     $html .= '</a>';
 
     $html .= '</div>';
 
-    // wp_kses_post() strips <svg> by default (the 'post' context doesn't allow it).
-    // Extend the allowed list to keep SVG markup intact so the icons render.
+    // wp_kses_post() strips <svg> tags by default (the 'post' context doesn't
+    // allow them), and would also strip <img> data: URIs we use as a fallback.
+    // Extend the allowed list to keep both forms intact so the icons render.
     $allowed = wp_kses_allowed_html( 'post' );
+    $allowed['img']   = array(
+        'src'                 => true,
+        'alt'                 => true,
+        'width'               => true,
+        'height'              => true,
+        'style'               => true,
+        'aria-hidden'         => true,
+    );
     $allowed['svg']  = array(
         'xmlns'               => true,
         'class'               => true,