SVG for logo header Topic is solved

[mikewitherell]

Can the joomla 4 header have an .svg file for a logo? Instead of .png?

[gws]

Yes

[mikewitherell]

Hmmmm. When I try to upload it and use it, the message says filetype not supported. Is there a workaround?

[gws]

Go to options in media and check if it is an allowed type,if not add it.

[sozzled]

I agree with @gws; that's the correct way to address the matter. As a workaround, instead of modifying the media options, you can upload any file (e.g. an image in SVG format) to any folder using FTP.

[gws]

@sozzled good tip.

[mikewitherell]

I did go to check the media allowed types, but that didnt help. Next I will try FTP.

[sozzled]

You "checked" the allowed media types? Have a look at this video: https://www.[youtube].com/watch?v=DoldVDKP1QI.

[mikewitherell]

Perhaps I should say that I edited the allowed filetypes under Media: Options, and added in SVG.

[mikewitherell]

FTP worked. I uploaded a black text version of my logo in svg. Also a white text version in svg.
I chose them from within the Site Template Styles Basic section.
Looks great on desktop and horizontal iPad.
But...
Won't show at all on vertical iPad.
Won't show at all on H and V smartphone (an iPhone 12 Pro Max)
... so I changed them back to the png logo versions.
Why won't the SVG show all the way across the tablet and smartphone versions?

[sozzled]

I don't know anything about the problems you're having with using an SVG image as your logo. My involvement in this discussion is only in reference to uploading such files to your website.

As far as why any image will not display nicely on different devices, it's probably related to the template you've chosen to use. I don't know the specific cause and I'm just making an educated guess.

[toivo]

The following topic and @ceford's media component may give some answers:
svg as logo (in cassiopeia)
Joomla 4x Component - Ffmedia

[mikewitherell]

On a hunch, I took out the custom.css code that a helpful person named Pavel wrote for me a few days ago. It was needed to display the logos without distortion when you rotate a tablet H and V.

For some reason, once I substituted the svg logos into the template, I no longer needed the custom.css code. When I removed the custom.css code, all the devices displayed the logo correctly. So, right now, the desktop, the tablet, and the smartphone are all displaying the svg logos correctly, including Horizontal and Vertical views.

[Pavel-ww]

Hmmmm. When I try to upload it and use it, the message says filetype not supported. Is there a workaround?

Hi. It is not possible to configure the standard media manager for uploading SVG. Yes, uploading via FTP is a solution.
But also there are other ways. You can use some alternative media manager:
- Quantum Manager allows you to upload the SVG and has a number of extended options compared to the standard media manager. You can add its button to the upper level of Admin menu, which is very convenient.

- FF Explorer - files and database manager inside your Joomla admin panel. Including allows you to upload the SVG (the same as via FTP).
I always use both, in all my projects.

- SP Page Builder media manager allows you to upload the SVG. If you use SP Page Builder, you can use its media manager for images uploading instead of standard media manager.
--

For some reason, once I substituted the svg logos into the template, I no longer needed the custom.css code.

Because SVG is not an image, but a code. The code cannot be distorted

[mikewitherell]

Thanks for the excellent guidance!