I have image components on my Glide Page that use SVGs. Rather than scaling properly, they’re blurry. Is Glide trying to convert them to something or should they display natively? When I open the SVG file directly in Chrome, it displays correctly.
What component do you use them in? Images in Glide Pages typically come in a huge container, so if your SVG is like 50x50 then it won’t scale well.
It’s in an image component set to full size. This is how it is set up:
Here’s what the result looks like on my Glide page:
This is what it looks like opened directly in Chrome (the image is even larger than on my Glide page, but scales as a SVG should.):
Here is the SVG file:
It’s my understanding that a higher resolution PNG would slow down performance. I think the whole reason that SVGs are superior to PNGs for graphics like icons is that they scale to any size without resolution loss. In Glide documentation, it recommends an SVG for the actual icon for the app, so I thought it might apply elsewhere too.
not really… depending on complexity of the image
Thanks, but maybe explaining my use case would help clarify.
I work with the graphic design team in my company to provide different images and graphics for our apps. This particular icon set I’m working with has about 150 icons similar to the one I posted. I use these icons across different apps, so I have built an image repository that is viewable in a Glide page. The graphics are stored in a Glide table and referenced in each app that I build. Coworkers who are setting up apps can look at that page to decide which icons and other images they would like to use. So on the page, the icons need to be bigger to be able to see more easily, but in the actual apps (designed for mobile) they are much smaller (so they need to be able to scale well - so we chose SVG, as that is a standard that works elsewhere). I suppose we could use higher resolution PNGs, but that would result in larger file sizes that only benefit 1 of the 2 use cases.
Am I correct in thinking that Glide isn’t handling the SVG file correctly, or am I missing something? I can report it as a bug if so, I just wasn’t sure if I was setting something up incorrectly.
This is my understanding of SVGs (from https://www.adobe.com/creativecloud/file-types/image/vector/svg-file.html)
“Unlike raster files, which are made up of pixels, vector graphics like SVGs always maintain their resolution — no matter how large or small you make them. You don’t have to worry about SVG images losing their quality in certain browsers or when you resize them to appear in different places.”
you can use CSS to show SVG… but I see you chose Glide Pages, which are very limited. In Glide Apps it would be possible
I thought CSS was supported in Glide Pages, but not Glide Apps.
But if the image component supports SVGs, shouldn’t it work without needing to add CSS?
in Glide Apps you can do anything you want with CSS… Pages suck… only limited use of CSS and only in the business plans.
Yes that would be nice if glide can accept svg in native components
I thought it was announced that CSS will no longer be supported in Glide Apps soon. Or did they change that decision? (⚠️ Unsupported HTML/CSS in the Rich Text component will completely break in the coming weeks)
I do have the business plan, but I haven’t tried implementing CSS yet.
According to the documentation, Glide does support SVGs. (Glide Docs • Adding images)
File types
Glide recognizes JPGs, PNGs, GIFs, and SVGs.
For your app’s icon, it’s best to use a simple SVG. The project icon will appear in many places and many sizes so it’s best to use an SVG icon that will scale and look good at any size.
they don’t support it, meaning it might break when they change classes… so it works, just be aware. In the case of Glide supporting SVG… i don’t know how they apply it to the elements, it should always scale since it is a vector code…
btw, how do you place SVG into your image element?
I am uploading the SVG directly into a Glide table and then referencing that column in the image component.
Glide might be applying cloudinary or some other optimization on top of the SVG image. Try creating an html img tag and then display using a rich text component. Should work.
1 Like
oh, so you are uploading jpg not svg 
he is using pages, so no CSS for hem
Does Glide state somewhere that all image files are converted to JPG upon upload?
In the column it still shows .svg?
I don’t know that… I never play with SVG in Glide, only to replace some native graphics with CSS rich component, but that will not work in Pages
@Clifton_Crouch I should have clarified. Create a template column that creates an html img tag with the image url. Then display that template column with a rich text component.
3 Likes
you can do that in Pages?