SVG as logo - how to set size?

Activello
1

I have used SVG Support plugin to upload an SVG image that I wanted to use for the site logo. After selecting it for the logo I skipped cropping. Unlike the SVG logo thread it kind of worked. The logo shows up.

Problem is that it shows very small. Looking at the image entry in the Media Library I see the size is 100x100 and no option to change it. And anyway, it is not a square - on the site it doesn’t show as a square - it shows with the proper shape, only very small.

How to make it “full width” so that it scales to what the page width is?

2

Hi there

May I see it? please provide URL of the website and I will take a look

Regards

3

The SVG version:
https://lumen-vitae.online/?customize_changeset_uuid=fcd46ee3-ced1-4cf9-b364-ff30f9acc572

The PNG version:
https://lumen-vitae.online/

4

Hi

The size of the logo can be controlled by this CSS code:

#logo img.custom-logo {
    max-width: 50px;
}
5

Nice! But what should I use for the max-width to be compatible with the rest of the page? Especially in desktop vs mobile scenarios?

6

Hi @AdamBadura

Not fully understand your question but if you want different widths for different devices, you can use this method, known as media queries:

Regards

7

OK, I will try to explain it differently.

Your proposal uses fixed width of 50px. However, I would like to use “page width” instead. I don’t know how many pixels that is and I expect it may vary. It is not 100% (I presume) since I don’t want a “full window”. I want the width of the page as it shows and as happens with the PNG version.

8

Hi

hmm…I think I need some more information on what you want to achieve.
So, you want this logo image to be page width? Screenshot by Lightshot
I only need to know what is your goal,

9

Well… I checked this a bit deeper now.

My original logo file (Logo – Lumen Vitae) is 1600 x 481.

The theme has it cropped (cropped-Logo.png – Lumen Vitae) and the cropped image is 665 x 200.

So, the ratio is the same (well, almost the same - I guess you cannot get better with integers). That is not surprising since upon cropping I have selected the entire image (see also How to skip cropping logo and icon images? for a related topic).

Why the cropped logo has width 665? I presume this is what the theme considers “full width”. Indeed, inspecting the page (https://lumen-vitae.online/) in the browser shows that the logo is shown at that exact width of 665px. I wonder why it is 665 when the page is actually wider. The slider image is 1069px wide… But never mind, I assume this is the way it was intended to be - very well.

So, I guess I could use the same for max-width of the SVG image, right? Is my reasoning valid here?

Can this 665px be expressed somehow by a named constant or something? To avoid “magic value” that would be a maintenance issue - if the theme with an update would change this size for some reason I would need to update the manual entered 665px.

10

Hi

@AdamBadura sorry but no, you cant use SVG logo instead of .png and crop also is not possible to avoid, unfortunately, this will require customization, that’s how theme works :frowning: