Quark: Using SVG as custom logo

Quark's default logo -- grav-logo.svg -- gets embedded into the final HTML file produced and, as a result, can be influenced and changed through custom.css styes.

When one uploads a custom SVG logo, however, that file instead gets referenced as an image file (<img src="customlogo.svg">) which is NOT customizable by CSS in the custom.css file (based on current working knowledge and experience).

I seek this customization because I want the logo to be able to switch back and forth between a dark version against a white background (my default) into a light version that can exist well on top of hero-enabled pages with header transparency that use dark images.

I hope I described the issue well and look forward to any tips you might have.

RB

@ryanboyd, Unfortunately, Quark expects the custom_logo to be an image instead of svg.

What you can do:

• Create a new theme inheriting from Quark
• Copy file /user/themes/quark/partials/logo.html.twig to folder /user/themes/your-theme/templates/partials
• Replace lines 4 + 5 with either a generic solution using svg_image():
  TWIGCopy

  {{ svg_image('theme://images/logo/' ~ (logo|first).name) | raw }}
  

  or using a Quark specific solution:

  TWIGCopy

  {% include('@images/logo/' ~ (logo|first).name) %}
  

  The new template will now look like:

  TWIGCopy

  {% set logo = theme_var(mobile ? 'custom_logo_mobile' : 'custom_logo') %}
  <a href="{{ home_url }}" class="navbar-brand mr-10">
  {% if logo %}
  {{ svg_image('theme://images/logo/' ~ (logo|first).name) | raw }}
  {% else %}
  {% include('@images/grav-logo.svg') %}
  {% endif %}
  </a>
  

Got it — that Quark as currently built expects a traditional pixel image (JPG, PNG, etc) versus an SVG. That makes sense.

A solution to my problem coming through a custom template tweak makes sense, too. Luckily, I've had some luck getting a Quark-inherited theme going, so I'll use this as a chance to start going deeper on the Twig.

Thank you for the suggestion, @pamtbaau. I'll try this out in the next few days and report back with a success/failure update.

Stay tuned.