How to upload and use SVG?

Hi there,

how is it possible to upload and use SVGs? It’s not done via the image field - but how else?

Thanks!

Hi Andi,

Thanks for posting on Prismic community!

I couldn’t reproduce the issue, I’ve been able to upload an SVG file and use it in a document.

Can you please send us a screen recording of the problem.

Looking forward to your reply

Fares

Hi @Fares !

Thanks for reaching out.

Pls find the video here https://www.screencast.com/t/V8zs7ax7SV8

Every time I upload an SVG it’s 0 x 0px and I cannot save the document anymore.

Well one possibility can be a wrong formatting of those SVG or an incompatible version, can you please share with us one sample of those SVG files

Sure. I uploaded an example file here https://we.tl/t-PCx6VOZkx0

I’ve tried to upload the SVG file and it works!

Can you please share with us the name of the repository so that I ask your dev team to look into this?

okay that’s weird!

the repo name is truetapegermany

thanks! please give me an update once we know what’s going on here.

I have reported the issue in our issue tracker and we get back to you ASAP.

1 Like

@Fares I found that while uploading the image, a successful POST request is sent which has a correct image path: https://prismic-io.s3.amazonaws.com/truetapegermany/08214e12-5dbb-4c9c-ac87-2c87e8d22ad4_Narben2_Tapegro%CC%88%C3%9FeundNarbe.svg

When I open this link in a new tab, it works but for some reason it’s not reflected properly on the editor.

The image that is used in the editor is blob:https://truetapegermany.prismic.io/18e08ed4-66db-244d-aa33-ec0b4cc91ef9 and when I hover over it, it says 0 x 0:

but even though the POST is successful, in its params it also says width: 0 and height: 0:

@Fares it works with Chrome - with Firefox (what I use) it doesn’t

2 Likes

Thanks for letting us know, It seems that this is an issue related to Firefox, here is a thread that might be related.

Please share with us the image processor you have used to generate the SVG in order to further investigate the issue.