[Resolved] SVG logo image scaling

[Are Martin]

Hi Tom, I have a SVG file that I would like to use as a logo image. However when I upload it as a logo using the customizer the dimension of the image is way to large. I can’t figure out how to adjust the size. I tried googling it but the whole concept og SVG files is a bit confusing to me.

Do you know if there is a simple way to scale the SVG file so it would fit inside the header like a normal image file would (and also behave responsively when viewed on different devices)?

[Tom]

Can you link me to your site so I can take a look?

[Are Martin]

Ok, I uploaded the svg file and as you can see the image is way to large. The header height is 80px I think

http://www.fysionett.no

[Stacey Usborne]

You might want to crop your image, you can crop it using this: https://en.support.wordpress.com/images/image-editing/

You might not have to re-size it after you crop some of the extra white space off.

[Tom]

Definitely crop it as Stacey said.

Then you can scale it down in size with this:

.site-logo img {
    max-width: 500px;
}

Adjust the px as needed 🙂

[Are Martin]

This worked with the size! 🙂 But I can´t figure out how to crop svg files since it´s not quite like other image files. Seems like you need special software for this?

[Tom]

So the WordPress editor doesn’t allow cropping of SVG files?

Maybe this will help?: https://petercollingridge.appspot.com/svg-editor

[Are Martin]

No, at least not my svg file… it was made in the free editor here http://www.freelogoservices.com

When I try to open the file in the WP image editor it just tells me that no image data exists. I tried to crop it in an online editor as well, but I can´t find the crop function in any of those editors.

I do have the logo in other file formats, but I would really like the logo to be able to have the lossless resizing abilities that the SVG format is supposed to allow for.

[Tom]

What about cropping it while it’s still an image, and then converting it to an SVG file?

[Hakim]

Well, this is interesting. I have just tried to upload a .svg file and wordpress tells me:

” DUP_logo.svg Sorry, this file type is not permitted for security reasons.”

I am running WP 4.4 with an updated GP theme and pro plugin pack. Disabled all plugins without any change.

There are two very different responses to questions about this in wordpress forums, one common one involves hacking theme files and the other questioning the web host about permitted mime types.

Think I will just go back to trying to find the ideal size for my png …

[Tom]

Hi Hakim,

You’ll have to add a function like this: https://generatepress.com/forums/topic/add-retina-display-resolution-to-the-logo/#post-154245

[Hakim]

Thanks Tom. That worked — added the plugin “My Custom Functions” — and I can now upload the image. Now to figure out how to scale the image to the desired size … 🙂

[Tom]

Awesome, glad it worked 🙂

[Author]

Posts