Quark: Using SVG as custom logo

Support Themes & Styling
,
1

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 () 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

2

@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():
    {{ svg_image('theme://images/logo/' ~ (logo|first).name) | raw }}
    or using a Quark specific solution:
    {% include('@images/logo/' ~ (logo|first).name) %}
    The new template will now look like:
    {% 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>
1 Like
3

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.