SVG's in assets
Hi Guys,
Just a heads up on this. When I uploaded two SVG logos into my assets folder today they show like this in the backend.
https://cl.ly/2p2e3y3W2V38
But when they are used they actually appear fine and 'normal' as they should do on the actual web page. Just the backend shows them like this. But to a user/client, they might think the images are wrong/broken. Just thought I would flag it up to you as I spotted it.
Thanks, Terry
What's wrong with them?
This is what they look like in the assets panel;
https://cl.ly/2p2e3y3W2V38
This is what they actually/should look like;
https://cl.ly/3z462f3r0l0o
https://cl.ly/1B2v291C0d1h
The wording on them has got distorted in the backend system view/version.
Ok - we're just showing your SVGs. We don't do anything to them.
Ok thanks Drew.
But you turn them into PNG files for the asset thumbnails. They are fine on the front-end website when these assets are selected in perch to be used? It is just the assets thumbs that look like this. So guessing either an issue with the SVG when it is run through the process of capturing a thumbnail or something?
It's not a concern to me necessarily. I thought I would just raise it as I noticed it and could be a potential issue/bug, or others might have issues.
Thanks.
We don't thumbnail them - they're just your SVGs. We don't need to thumbnail SVGs as they're scaleable.
When I right click and inspect the file in the assets panel and on the page it says that the thumbnail is a PNG file?
See here https://cl.ly/0I2m1F0Z323g and here https://cl.ly/2G1U0l0z1V25
Are you treating it as an image or as a file?
As an image.
How are you uploading them? Perch basically doesn't have any capability to render SVG to PNG, so I'm completely perplexed.
My process is this;
Click the 'Select or upload an image' in the template
Then select add asset button
Then I drag the SVG file into the 'Drop files here or click to upload' area and then it uploads and I can see that the PNG thumb is generated and I choose this from the asset area and then click the use selected.
I can see when I upload that the PNG is generated in the thumbs and this is then used on the template in the image block too.
Here are my templates if it helps;
Would a quickCast video of the process help?
Just to confirm it is standard Perch and I am on the latest version.
Thanks.
Could you post your diagnostics report?
Perch has no code to generate a PNG from an SVG so I need to figure out what's happening.
Could it be down to how the server is handling the MIME type for an SVG?
Will see if I can test in my local environment and see what happens.
Possibly. If the file isn't being identified as SVG, it would then be treated as a file. You have Imagick installed, which then may be attempting to thumbnail the image in the same way it would a PDF.
Hi Drew. Did you establish anything on this? As to why SVG images haver PNG thumbs created? I have a load of SVGS to add to a site but their thumbnails all look incorrect, but the SVGS are fine on the end webpage. It is mainly when they have been optimised by SVGO I believe the PNG's go a little wrong.
PNG thumbnail asset generated in Perch
https://cl.ly/1429232f0W2W
Actual SVG rendered on page
https://cl.ly/2t2H2q0s1Q3a
Thanks Terry
No, this isn't something we've seen anywhere else.
Any ideas what it might be related to Drew so I can try and investigate and resolve? Likely to be a server config or something? I am developing locally. I will test shortly on the live site to see.
Did you investigate the mime issue?
What should the MIME type be? Looking at my config that this gets set in my virtualhosts file on my server and I add this in locally to my htaccess for local dev only.
So some further digging and testing, it has revealed that the following must be present within an SVG image file for the server/Perch to realise it as an SVG file.
When I exported from Illustrator this was not included. Instead my document started with
Not sure if this is correct or not? But that's what I have found out. In fact having tested further it seems SVGO also removes this code too. So I am not sure where to go from here...?
Thanks, Terry
Upon checking my original files though these are being set to image/svg+xml. If you see: https://www.grommets.co.uk/cms/resources/measuring-guide/open-grommet-with-labels.svg - so not sure where the problem lies? With Perch or my Server/Setup?
Would you like to test with some of my files at all Drew?
Thanks.