# Do Glide Pages support SVGs?

**URL:** <https://community.glideapps.com/t/do-glide-pages-support-svgs/55268>\
**Category:** Ask for Help\
**Created:** [November 30, 2022, 10:19pm UTC](https://community.glideapps.com/t/do-glide-pages-support-svgs/55268 "2022-11-30T22:19:26Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Clifton\_Crouch](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/clifton_crouch/32/24428_2.png) [@Clifton\_Crouch](https://community.glideapps.com/u/Clifton_Crouch)\
**Post date:** [November 30, 2022, 10:19pm UTC](https://community.glideapps.com/t/do-glide-pages-support-svgs/55268/1 "2022-11-30T22:19:26Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [December 1, 2022, 12:33am UTC](https://community.glideapps.com/t/do-glide-pages-support-svgs/55268/2 "2022-12-01T00:33:33Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Clifton\_Crouch](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/clifton_crouch/32/24428_2.png) [@Clifton\_Crouch](https://community.glideapps.com/u/Clifton_Crouch)\
**Post date:** [December 1, 2022, 1:03am UTC](https://community.glideapps.com/t/do-glide-pages-support-svgs/55268/3 "2022-12-01T01:03:56Z")

</div>

It’s in an image component set to full size. This is how it is set up:  
 ![Screen Shot 2022-11-30 at 7.59.42 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/3/432645e093a56125017dac7b47a94608c9ac0d77.png)

 ![Screen Shot 2022-11-30 at 7.59.48 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/7/a774a3ef1c845cb85a0fd66fb61c1487b1d173b9.png)

Here’s what the result looks like on my Glide page:

 ![Screen Shot 2022-11-30 at 7.57.25 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/8/48ae50302ad08d73baa3379e1af1417e1079087a.jpeg)

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.):

 ![Screen Shot 2022-11-30 at 7.57.37 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/1/811b027f336cfab83ad7e106329081eb6e9ee480.png)

Here is the SVG file:

> **[Event Icons\_smaller\_Annoucements.svg](https://drive.google.com/file/d/1NC11xMsr91twX34zySlPWqa63ANgofH6/view?usp=share_link)**
>
> Google Drive file.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [December 1, 2022, 1:07am UTC](https://community.glideapps.com/t/do-glide-pages-support-svgs/55268/4 "2022-12-01T01:07:09Z")

</div>

why don’t you upload a higher-resolution png, it will look good…  
copy this one:

 ![Image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/7/772afeff74e2b237e8b98ef87d26742aad2a942f.png)

---

<div class="post-metadata">

**Author:** ![Clifton\_Crouch](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/clifton_crouch/32/24428_2.png) [@Clifton\_Crouch](https://community.glideapps.com/u/Clifton_Crouch)\
**Post date:** [December 1, 2022, 1:11am UTC](https://community.glideapps.com/t/do-glide-pages-support-svgs/55268/5 "2022-12-01T01:11:27Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [December 1, 2022, 1:12am UTC](https://community.glideapps.com/t/do-glide-pages-support-svgs/55268/6 "2022-12-01T01:12:29Z")

</div>

not really… depending on complexity of the image

---

<div class="post-metadata">

**Author:** ![Clifton\_Crouch](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/clifton_crouch/32/24428_2.png) [@Clifton\_Crouch](https://community.glideapps.com/u/Clifton_Crouch)\
**Post date:** [December 1, 2022, 1:25am UTC](https://community.glideapps.com/t/do-glide-pages-support-svgs/55268/7 "2022-12-01T01:25:27Z")

</div>

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](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.”

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [December 1, 2022, 1:29am UTC](https://community.glideapps.com/t/do-glide-pages-support-svgs/55268/8 "2022-12-01T01:29:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Clifton\_Crouch](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/clifton_crouch/32/24428_2.png) [@Clifton\_Crouch](https://community.glideapps.com/u/Clifton_Crouch)\
**Post date:** [December 1, 2022, 1:32am UTC](https://community.glideapps.com/t/do-glide-pages-support-svgs/55268/9 "2022-12-01T01:32:27Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [December 1, 2022, 1:34am UTC](https://community.glideapps.com/t/do-glide-pages-support-svgs/55268/10 "2022-12-01T01:34:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Clifton\_Crouch](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/clifton_crouch/32/24428_2.png) [@Clifton\_Crouch](https://community.glideapps.com/u/Clifton_Crouch)\
**Post date:** [December 1, 2022, 1:43am UTC](https://community.glideapps.com/t/do-glide-pages-support-svgs/55268/11 "2022-12-01T01:43:32Z")

</div>

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](https://community.glideapps.com/t/unsupported-html-css-in-the-rich-text-component-will-completely-break-in-the-coming-weeks/43931))

I do have the business plan, but I haven’t tried implementing CSS yet.

According to the documentation, Glide does support SVGs. ([Images in Glide | Glide Docs](https://www.glideapps.com/docs/guides/core/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.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [December 1, 2022, 1:47am UTC](https://community.glideapps.com/t/do-glide-pages-support-svgs/55268/12 "2022-12-01T01:47:47Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Clifton\_Crouch](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/clifton_crouch/32/24428_2.png) [@Clifton\_Crouch](https://community.glideapps.com/u/Clifton_Crouch)\
**Post date:** [December 1, 2022, 1:52am UTC](https://community.glideapps.com/t/do-glide-pages-support-svgs/55268/13 "2022-12-01T01:52:27Z")

</div>

I am uploading the SVG directly into a Glide table and then referencing that column in the image component.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [December 1, 2022, 1:52am UTC](https://community.glideapps.com/t/do-glide-pages-support-svgs/55268/14 "2022-12-01T01:52:41Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [December 1, 2022, 1:53am UTC](https://community.glideapps.com/t/do-glide-pages-support-svgs/55268/15 "2022-12-01T01:53:25Z")

</div>

oh, so you are uploading jpg not svg 😉

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [December 1, 2022, 1:54am UTC](https://community.glideapps.com/t/do-glide-pages-support-svgs/55268/16 "2022-12-01T01:54:45Z")

</div>

he is using pages, so no CSS for hem 😉

---

<div class="post-metadata">

**Author:** ![Clifton\_Crouch](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/clifton_crouch/32/24428_2.png) [@Clifton\_Crouch](https://community.glideapps.com/u/Clifton_Crouch)\
**Post date:** [December 1, 2022, 1:56am UTC](https://community.glideapps.com/t/do-glide-pages-support-svgs/55268/17 "2022-12-01T01:56:56Z")

</div>

Does Glide state somewhere that all image files are converted to JPG upon upload?

In the column it still shows .svg?

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [December 1, 2022, 1:58am UTC](https://community.glideapps.com/t/do-glide-pages-support-svgs/55268/18 "2022-12-01T01:58:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [December 1, 2022, 2:01am UTC](https://community.glideapps.com/t/do-glide-pages-support-svgs/55268/19 "2022-12-01T02:01:40Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [December 1, 2022, 2:02am UTC](https://community.glideapps.com/t/do-glide-pages-support-svgs/55268/20 "2022-12-01T02:02:47Z")

</div>

you can do that in Pages?

[Next page](https://community.glideapps.com/t/do-glide-pages-support-svgs/55268.md?page=2)
