Thankyou in advance for any feedback you might have. To describe the general challenge. An SVG is need for the brandmark in a website that utilizes Google fonts, jquery, and CSS. What's the best way of sharing external resources between SVG elements and global resources loaded in the theme, such as Google fonts? What's the best way of triggering an SVG animation, from an external javascript? or within the SVG file itself? Sharing font and script resources between the website theme and SVG graphics would be an excellent performance strategy, is this possible? I'm trying to achieve a simple effect that animates a company acronym on hover, expanding the logo area to display the whole company name, testing this on a personal project before I apply to a commercial application. The "trigger" effect which cues the animation could be jquery, CSS, or embedded in the SVG... doesn't matter to me. However, the goal is to preserve as much of the animation functionality within the SVG file itself in the interests of portability and responsive scaling. The following example demonstrates the desired effect in pure SVG form.... https://simondelasalle.com/wp-content/themes/sdls-2023-uncode/template-test-wordmark-click.svg Here's the code: <svg xmlns="http://www.w3.org/2000/svg" width="600" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"> <style type="text/css"> @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;500;900&display=swap'); .brace { font-family: 'Nunito', sans-serif; font-weight: 200; font-size: 80px; line-height: 70px; } .acronym { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 40px; text-transform: uppercase; letter-spacing: -2.4px; } .company-name { font-family: 'Nunito', sans-serif; font-weight: 500; font-size: 24px; } .subheader { font-family: 'Nunito', sans-serif; font-weight: 200; font-size: 14px; color: #666; text-align: center; } </style> <!-- Left brace --> <text class="brace left-brace" x="0" y="100">{</text> <!-- Acronym letters --> <g id="acronym-group" class="acronym" transform="translate(36, 73)"> <text class="letter" x="0" y="0">S</text> <text class="letter" x="35" y="0">D</text> <text class="letter" x="2" y="40">L</text> <text class="letter" x="37" y="40">S</text> </g> <!-- Full company name --> <g id="company-group" class="company-details" transform="translate(26, 75)" opacity="0"> <text class="company-name" x="0" y="0">Simon de la Salle</text> <text class="subheader" x="0" y="20">Web Design & Development</text> </g> <!-- Right brace --> <text class="brace right-brace" x="110" y="100">}</text> <!-- JavaScript logic --> <script type="application/ecmascript"> <![CDATA[ document.addEventListener('DOMContentLoaded', function() { const acronymGroup = document.getElementById('acronym-group'); const companyName = document.getElementById('company-group'); const leftBrace = document.querySelector('.left-brace'); const rightBrace = document.querySelector('.right-brace'); let showingAcronym = true; // Function to animate in the company name function showCompanyName() { acronymGroup.style.transition = "opacity 0.6s ease-out, transform 0.6s ease-out"; acronymGroup.style.opacity = 0; // acronymGroup.style.transform = "translateX(-100px)"; // Slide out to the left companyName.style.transition = "opacity 0.6s ease-out, transform 0.6s ease-out"; companyName.style.opacity = 1; // companyName.style.transform = "translate(100)"; // Slide back into place leftBrace.style.transition = "font-size 0.6s ease, transform 0.6s ease-out, transform 0.6s ease-out"; leftBrace.style.fontSize = "40px"; leftBrace.style.transform = "translate(0,-12px)"; rightBrace.style.transition = "font-size 0.6s ease, transform 0.6s ease-out, transform 0.6s ease-out"; rightBrace.style.fontSize = "40px"; rightBrace.style.transform = "translate(116px,-12px)"; showingAcronym = false; } // Function to animate back to the acronym function showAcronym() { // acronymGroup.style.transform = "translateX(100, 75)"; // Slide back into place acronymGroup.style.opacity = 1; companyName.style.opacity = 0; leftBrace.style.transition = "font-size 0.6s ease, transform 0.6s ease-out"; leftBrace.style.fontSize = "80px"; leftBrace.style.transform = "translateX(0)"; rightBrace.style.transition = "font-size 0.6s ease, transform 0.6s ease-out"; rightBrace.style.fontSize = "80px"; rightBrace.style.transform = "translateX(0)"; showingAcronym = true; } // Add click event listener document.addEventListener('click', function() { if (showingAcronym) { showCompanyName(); } else { showAcronym(); } }); }); ]]> </script> </svg> Looking for general feedback on how to approach these questions... Thanks for your time in advance stackers!