Changing Logo gives black image

Trying to change my site's logo, I went to user/themes/quark/images and replaced grav-logo.svg with my own logo.

The logo I want to use has a white background and this is what it looks like on my navbar.

Capture2|690x90

So... how do I fix this?

If you replace it with a PNG image (and tweak that filename to match), does it work? If so, it's probably something about the SVG you produced.

Hi Hugh. Already tried that and I get something like this:
cap3|690x316

Oh wow, I've never used Quark but I looked up the template and there's this line:

<a href="{{ home_url }}" class="navbar-brand mr-10">{% include('@images/grav-logo.svg') %}</a>

which is a syntax I've never seen, but pretty sure is simply embedding the SVG file markup into the HTML. What that means is that you'll need to modify the template to use a standard <img> tag, so it would be something like:

<img src="{{ url(page.media['logo.jpg']) }}" alt="LOGO ALT FIXME" />

This is becoming a non-trivial test! I am pretty sure we'll find your replacement SVG file will be the problem, but you may be happy with the above as a workaround.

Hi @hughbris
Did that! No longer an error, but the logo does not appear.
This is what those few lines of code look like now:

                    <section class="navbar-section logo">
                        <a href="{{ home_url }}" class="navbar-brand mr-10"><img src="{{ url(page.media['logo.jpg']) }}" alt="LOGO ALT FIXME" /></a>
                    </section>

I used inspect element and the image tag says source(unknown)
I tried putting it in manually as /user/themes/quark/images/logo.jpg and that DOES work but it's the sloppy way of doing it.

Agree that hardocding is a sucky way to do it. Sorry my suggestion was from memory. Looks like you need to do something more like what you see on https://learn.getgrav.org/content/media#url for the same effect.

If you learn a little about the debugging tools available in Grav, you should be able to get the right expression if that doesn't work. I'd rather point you to that so you can understand and help yourself better in future.

BTW what happens when you try to load your SVG file directly in your browser? I know a little about SVG from a while ago, but not about browser support. It hardly had any when I messed with it!

I had the same problem. The solution is much more easier: if you look at the _header.scss file inside the theme folder "scss/theme", then you'll find:

.logo svg path {
fill: $header-color-dark;
}

This line is filling your logo with the dark color. So simply comment this line and recompile your scss files as explained https://learn.getgrav.org/themes/theme-basics#scss-less-css.

@jodumont:
<a href="{{ home_url }}" title="{{ site.title|e('html') }}" class="navbar-brand mr-10"><img src="{{ url('theme://images/logo.svg') }}" width="64px" /></a>

Finally this solved my problem! Thank you. (It doesn't work with png but I can live with that)