Prestashop: Allow SVG format for shop logo

[micka-fdz]

Describe the bug
Currently, we can't use SVG format for shop logo.
I think this common format should be allowed.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'Appearance / Theme & logo'
2. Try to upload image on SVG format
3. This format is not allowed

[micka-fdz]

Is it enough to add svg on this line? If so, I'll make a PR.
https://github.com/PrestaShop/PrestaShop/blob/b6135e53aa776cc20f6c6f7802b14b198b8d815a/src/Core/Domain/Shop/DTO/ShopLogoSettings.php#L45

[khouloudbelguith]

Hi @micka-fdz,

Your ticket is a duplicate of #10600
So, I close it.
Thanks!

[khouloudbelguith]

Duplicate of #10600

[khouloudbelguith]

@micka-fdz, Would you be willing to make a pull request on GitHub with your code suggestion?
https://github.com/PrestaShop/PrestaShop/tree/develop
Thank you!

[micka-fdz]

@khouloudbelguith I'm note sure my ticket is a duplicate of #10600.

In my opinion, logos management is independent of other images (products, categories, manufacturers...) and could easily allow SVG format.

Maybe could I get the confirmation of core team?

[khouloudbelguith]

@micka-fdz, In this issue: #10600, we will support all types of images (logo, product, categories,..).

Thanks!

[jf-viguier]

@khouloudbelguith the issue #10600 has no PR and is a bigger one. What we need here is just to allow svg for the shop logo.
Logo thumbnail is not generated here, so imagick is not needed, no gd issue : we just need to improve the allowed extensions. Please reopen the issue. We'll do a PR.
What do you think @matks ?

[khouloudbelguith]

Ping @PrestaShop/prestashop-product-team what do you think?

Thanks!

[ttoine]

This is very interesting: SVG is a vector graphic format, so it is very, very light and scale perfectly on all screens, including high DPI. As it is supported by all browsers, most CMS already accept it nowadays.
If there is no need to generate a thumbnail for the shop logo, then it's worth it to try to add the .svg to the list and check if everything works fine.

Also, if there is an aim to allow .svg everywhere: instead of trying to generate a thumbnail, it would be better to use the file for all sizes. I mean, when a picture is a .svg, there no need to create a thumbnail so it should maybe be handled in a different way in the code.

[LouiseBonnard]

As many people said in the #10600 issue, it'd be great to make PrestaShop support the SVG format but it seems quite incompatible for now. cf. https://github.com/PrestaShop/PrestaShop/issues/10600#issuecomment-530801395

I think it makes no sense to allow the support for this format only for the shop logo, we should be able to handle it everywhere in the software. Otherwise, it might be frustrating for users. @matks, how complicated it would be technically?

[jf-viguier]

@LouiseBonnard I disagree. Products images are generated in differents sizes, shop logo don't. It's muche easier.
@ttoine just a precision, svg files have a default size used when the html container has no default size. So the fix is not so easy.

[ttoine]

I agree with Jeff: shop logo is a separate use case. A logo is usually designed in a vector graphic application, while product images are raster pictures.

I already use svg file for the website logo on at least one of my websites. It is possible to create a svg file with the good size or ratio, in the document settings, before saving. So it is possible to respect the recommandation of a theme even with .svg. Or, maybe I don't understand and we are not speaking about the same thing.

[jf-viguier]

Thanks @ttoine for the support.

[Hlavtox]

@jf-viguier @LouiseBonnard @ttoine @micka-fdz

SVG's would be amazing, but watch out for the styling. I think there would need to be some kind of mechanism that will “clean” the inside of the SVG. There could be dimensions hardcoded, weird viewboxes set, different canvas dimensions and all kinds of stuff...

It is very hard to make it properly responsive and working in all browsers. I was putting some brand logos to footer and I nearly pulled my hair out. 🙄😂 4 images vere fine, two were squished, two were off and cropped. So I went a different way and changed something, and it worked in IE and FF and not in chrome. Then it worked in Chrome and FF and not in IE. Total nightmare. I ended up setting fixed dimensions for every image and every breakpoint... 🤯

[LouiseBonnard]

Hi @Hlavtox, thanks for sharing your experience, it's very interesting. I'm not in favor of allowing the SVG format only for the shop logo but, perhaps, more broadly in the software. But it needs to be studied functionally and technically as part of a bigger topic regarding the image formats... to be continued!

[romanseki]

you can use this module for svg logo on front-office
https://addons.prestashop.com/en/labels-logos/49866-logo-svg-multilangual.html

[lemale-h2a]

It's a nonsense to have to buy a 50 euros module to add a SVG. The prestashop model is...
And like the other guys said, to have a SVG logo it's a specific case.. You don't need to work on the full application..
Or it's gonna take forever... And actually it's taking forever... Real shame..

[matks]

@lemale-h2a If you find that a topic is critical for you, and it's important to have it done ASAP, then you can _invest_ into having it done. You can hire a developer to fix it, or if you are a developer yourself, you can try doing it on your own. The most important thing is to share that fix with everyone by submitting a Pull Request -- that's what the open source spirit is all about.

This is an open source project, it works because everybody is putting effort in it. The PrestaShop company is making the biggest investment but contributors effort is important too.

If you don't invest any of your energy/time/money into this project, and if nobody does, then it will simply halt. This is not a desirable outcome, isn't it ? Then you know what to do 😉

[lemale-h2a]

That is critical just for me, so no worries.

[jf-viguier]

@lemale-h2a I've done a PR to add svg : can you test it ?

[Hlavtox]

@lemale-h2a I think it's not so hard to upload an SVG image and change <img class="logo img-fluid" src="{$shop.logo}" alt="{$shop.name}"> to <img class="logo logo-svg" src="/img/logo.svg" alt="{$shop.name}"> in header.tpl, is it?

Add some css like this and you are good to go.

.logo-svg {
  width: 100%;
  max-width: 200px;
  height: auto;
}

@media screen and (max-width: 1199.99px) {
  .logo-svg {
    max-width: 180px;
  }
}

@media screen and (max-width: 991.99px) {
  .logo-svg {
    max-width: 170px;
  }
}

@media screen and (max-width: 767.99px) {
  .logo-svg {
    max-width: 150px;
  }
}

@media screen and (max-width: 575.99px) {
  .logo-svg {
    max-width: 130px;
  }
}

[lemale-h2a]

Oh yeah I did that actually, it's super easy to hard code a fix.
But then the client asked me how to change the svg :-)
I'll try the fix from @jf-viguier, it seems legit ;-D !

[Hlavtox]

@lemale-h2a Just change it for him, don't tell me they change the logo more than X years :D

[Hlavtox]

@lemale-h2a I think you will need to style it anyway, SVGs are a bit bitchy to get right... 😞

[lemale-h2a]

yeah obviously I had to tell him he can't use the upload logo feature in the administration but that I have to do it for him.

[Hlavtox]

@lemale-h2a 💰💰💰😄

[jf-viguier]

@lemale-h2a @Hlavtox I believe that a modern cms should allow modern svg support natively.

[lemale-h2a]

Yes..
Let's just take two examples, github.com, prestashop.com, the logos use which format ?.. :-D

And so your code works for me @jf-viguier. Thank you !

[Hlavtox]

@lemale-h2a @jf-viguier Of course it should, but it won't be easy and you must take in account all situations that can occur.

https://css-tricks.com/scale-svg/

[LouiseBonnard]

Hi all, I also believe supporting SVG format would be great for PrestaShop users, thanks a lot for the contribution, @jf-viguier and @micka-fdz! I also still believe that it should be extended to all image formats in the software so I suggest accepting it for the shop logo first and then make PrestaShop supports it everywhere it needs to. :-)