News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

Ideal size for logo image?

Started by landyvlad, February 06, 2019, 07:57:29 PM

Previous topic - Next topic

landyvlad

Logo image URL: (leave blank to show forum name or default logo.)

What is  the ideal size for the Logo image?

I'm using the default theme, and need to ensure that it looks good on both desktop and on mobile devices.

Thank you.
"Put as much effort into your question as you'd expect someone to give in an answer"

Please do not PM, IM or Email me with questions on astrophysics or theology.  You will get better and faster responses by asking homeless people in the street. Thank you.

Be the person your dog thinks you are.

SychO

I'd say anything less than 120px height, and less than 450px width would be ideal
Checkout My Themes:
-

Potato  •  Ackerman  •  SunRise  •  NightBreeze

woolly bugger

I've been trying to replace the smflogo.svg with my ownlogo.svg but it takes over the full screen. what am I doing wrong?

Mick.

Quote from: woolly bugger on February 08, 2019, 05:23:50 PM
I've been trying to replace the smflogo.svg with my ownlogo.svg but it takes over the full screen. what am I doing wrong?
I think you'd get a response if you open your own thread

Arantor

It's actually entirely a related problem, for once.

The issue is that the logo space doesn't dictate (or allow you to set) a size - so if you put an SVG in there, it'll just consume as much space as the screen because SVGs scale cleanly.

You either need to export the SVG to an image, or change the theme to limit the size - and the suggested sizes are reasonably good for this.

woolly bugger

but how does the smflogo.svg just occupy such a small space?

Arantor

Because it's programmed to do so in the theme. If you use the above setting to put a logo in, it'll so do without any control over its size.

Gwenwyfar

#7
Quote from: Arantor on February 08, 2019, 06:10:12 PM
Because it's programmed to do so in the theme. If you use the above setting to put a logo in, it'll so do without any control over its size.
Actually, it isn't. There is only a limit for images to not go over 100%, which includes the logo.

That is going to depend on the way your SVG is configured. Since it is not an actual image, it does not have a specific size embedded into it by default. The way browsers will treat a SVG with no size defined is to make it as large as possible. Or it's just the size of the values used in the points for coordinates actually, when there is no viewbox to use, I can't remember for certain. And those are more often than not pretty high as well, so if it goes up to some 4000 points it'll just take that and convert into 4000px because nothing else was defined. The opposite also happens sometimes, and the image ends too small. Then there's also the viewbox that will be used if there is one, and is tied to the coordinates number. Some image editors will save with one defined. And lastly there's the width/height you can define for it.

In short: Set a width/height in your SVG. That's the simplest and most direct way, and it's what is in the smf logo. You can edit the smflogo.svg file (in a text editor, not an image program) to copy this from there.


Fun fact: Sometimes resizing SVGs in css isn't as simple as resizing other images because some browsers (chrome, I'm looking at you) decide some odd default settings for certain values and will refuse to actually resize it the way you want to, making you have to fix it by using a viewbox or add overriding rules to the resizing defaults.

SVGs are loads of fun to deal with, as you see :laugh:
"It is impossible to communicate with one that does not wish to communicate"

Arantor

SMF doesn't provide any control for its size ;) if the SVG itself does, sure, but SMF doesn't...

Gwenwyfar

Ah, didn't pay much attention to which part I quoted. That has nothing to do with SMF settings, of course.
"It is impossible to communicate with one that does not wish to communicate"

woolly bugger

ok I edited my svg file in a text editor and added ;

width="226px" height="144px"

after

xmlns="http://www.w3.org/2000/svg"

and now my forum logo behaves properly instead of filling the whole screen......

landyvlad

"Put as much effort into your question as you'd expect someone to give in an answer"

Please do not PM, IM or Email me with questions on astrophysics or theology.  You will get better and faster responses by asking homeless people in the street. Thank you.

Be the person your dog thinks you are.

Advertisement: