Get SVG asset as raw SVG markup

✋ Feature Requests
1

It would be great if Dato offered an option to get a raw SVG markup from a SVG asset… E.g. <svg>....</svg>

2

@primoz.rome If you fetch that asset’s url property (not anything in the responsiveImage), it should be the raw SVG exactly as you uploaded it.

e.g. https://www.datocms-assets.com/150507/1738109732-person-2.svg is just:

Screenshot 000993
Screenshot 000993932×845 31 KB

Is that what you meant, or am I misunderstanding?

PS Coincidentally, see this other topic from today for some SVG nuances… SVG in responsiveImage not working

3

Oh, and in case it wasn’t clear, you just fetch that as text and inject it where you need to, e.g.:

or something like:

const response = await fetch('https://www.datocms-assets.com/150507/1738109732-person-2.svg')

const svgAsString = await response.text() // if you want a text string

const parsed = new DOMParser().parseFromString(svgAsString, 'image/svg+xml'); // if you want a XMLDocument, https://developer.mozilla.org/en-US/docs/Web/API/DOMParser/parseFromString

Depending on your use case (like if this is a React/Astro/Next.js/Babel/Webpack project), there might be other, better ways to include an .SVG into the frontend. What’s your intended use case?

You can also just load that URL directly using an <img src={image.url}/>, if that makes more sense.

4

Yes this is the solution I am using now with fetch.

It would just be simpler if this could be a property on image in case of SVG so we could already get this with graphQL. It’s not urgent, but would be nice… Something like

{
    model {
        icon { 
           url
           rawSvg
        }
    }
}
5

That would be nice (and let’s leave this feature request up), but to be honest with you, I’m not sure that is something we would be realistically able to implement… our GraphQL API goes through a couple clouds and caching layers, and including arbitrary SVGs into it would
probably break performance and caching. SVGs could be anywhere from a few lines long to several GBs. Our base64 encoded thumbnails, by contrast, are just a few bytes… I don’t know that longer blobs would work with our system.

As a workaround, for your own use, if you know that there are some specific small SVGs that you want to load this way, you could just copy & paste their raw code into a plaintext field instead of an asset? (Or you can use a computed field to derive that from existing SVGs in your media area and save it as a multi-line string field in the record).

That’d probably work fine if you just have small in-house SVGs (icons and such that you made). If they’re arbitrary third-party SVGs, I’d be very very careful with them.

Sorry that it’s not an easy, drop-in solution!

6

Hi Roger.

As a workaround, for your own use, if you know that there are some specific small SVGs that you want to load this way, you could just copy & paste their raw code into a plaintext field instead of an asset? (Or you can use a computed field to derive that from existing SVGs in your media area and save it as a multi-line string field in the record).

I did not thing of that… Is for sure a good workaround!! Ty

1 Like