Learn how to parse URL color codes to drive your SVG logo fills with JavaScript—and optional PHP preprocessing—for seamless, history-aware theming in your Huezit app.

Why Dynamic SVG Logo Coloring?

By pulling hex codes directly from your URL (e.g. /colors/ff0000-00ff00-0000ff), you can:

Offer user-driven theming on the fly
Generate shareable palette-based branding URLs
Keep your SVG lean (no inline fill attributes)
Integrate smoothly with History API for back/forward “undo”

This guide shows you exactly how we implemented it in Huezit, using JS (with pushState/popstate) and a lightweight PHP helper.

1. Strip Inline fill Attributes

Remove all hard-coded fill="#fff" from your <path id="logo-…">.
Let CSS or JS drive every color:

- <path id="logo-h" d="…" fill="#fff"/>
+ <path id="logo-h" d="…"/>

2. (Optional) PHP Preprocessor for Initial Page Load

If you still need server-side support (e.g. SEO crawlers), generate a small <style> block from ?colors=:

<?php
$letters = ['h','u','e','z','i','t'];
$parts   = explode('-', $_GET['colors'] ?? '');
echo "<style>\n";
foreach ($letters as $i => $ltr) {
  $col = (isset($parts[$i]) && preg_match('/^[0-9A-Fa-f]{3,6}$/',$parts[$i]))
       ? "#{$parts[$i]}" : '#fff';
  echo "#logo-{$ltr}{fill:{$col}}\n";
}
echo "</style>\n";
?>

Place this before your SVG to ensure a correct initial render.

3. JavaScript: Parse URL & Apply Fills

Drop this at the end of your page (before </body>). It:

Reads /colors/… from the path
Maps each segment to #logo-h, #logo-u, etc.
Hooks pushState, replaceState, and popstate so colors update on URL changes
Falls back to white (#fff) if a code is missing or invalid

<script>
(function(){
  const letters = ['h','u','e','z','i','t'];

  function getColorParts(){
    const m = location.pathname.match(/\/colors\/([0-9A-Fa-f\-]+)/);
    return m ? m[1].split('-') : [];
  }

  function updateLogoColors(){
    const parts = getColorParts();
    letters.forEach((ltr,i) => {
      const hex = (/^[0-9A-Fa-f]{3,6}$/).test(parts[i])
        ? '#'+parts[i] : '#fff';
      const p = document.getElementById('logo-'+ltr);
      if(p) p.setAttribute('fill', hex);
    });
  }

  ['pushState','replaceState'].forEach(fn => {
    const orig = history[fn];
    history[fn] = function(){
      orig.apply(this, arguments);
      updateLogoColors();
    };
  });
  window.addEventListener('popstate', updateLogoColors);
  document.addEventListener('DOMContentLoaded', updateLogoColors);
})();
</script>

4. Update URL & History

Ensure each palette change calls history.pushState (not replaceState) so Back/Forward navigates past palettes:

function updateURL(){
  const hexes = palette.map(p=>p.color.slice(1));
  const base  = location.pathname.split('/colors')[0].replace(/\/$/, '');
  history.pushState(null,'', `${base}/colors/${hexes.join('-')}`);
}

5. Tie It All Together

Load — PHP style + JS initial render
Generate — Your “Generate Palette” button pushes a new URL + rerenders
Add Panel — Appends a single color without touching others
Back/Forward — JS popstate handler re-parses the URL and redraws

Conclusion
By combining a tiny PHP snippet (for SEO-crawled defaults) with a robust JavaScript “URL ↔ SVG” sync, you get:

Full theming control via /colors/… URLs
Undo/redo with browser Back/Forward
No inline overrides—pure JS/CSS coloring
Shareable, bookmarkable palettes for end users

Happy coding! 😀