SVG files in Cloudinary

Follow

enomi

• June 30, 2017 13:29

Hey there,

 

I'm trying to use SVG files directly from the Cloudinary Cloud.

It works perfectly with an <img> element:

<img src="http://res.cloudinary.com/enomi/image/upload/test/example.svg" />

 

 

But if I try to embed it in an <object> element (which I need for animating the svg) it doesn't work:

<object data="http://res.cloudinary.com/enomi/image/upload/test/example.svg" type="image/svg+xml"></object>

 

Instead the browser downloads the file automatically. Same happens if you just open the cloudinary url (

http://res.cloudinary.com/enomi/image/upload/test/example.svg) in a browser. 

I additionally observed that response from the <img> request is a 'svg+xml' type, but the response from the <object> is a 'document' type and has a different size:

 

If I host the svg file on my own server and use nginx (including gzip and everything) it works with the <object> as expected.

 

 

Any idea what's happening there?

 

 

Thanks in advance,

Matthias

 

1

• Official comment

  

  Shirly Manor

  • August 22, 2017 04:34

  Thanks for the update! I'm glad to hear it's working!

  Please don't hesitate to contact us if you have any question.

  Comment actions Permalink
• 

  Roee Ben Ari

  • July 09, 2017 08:08
  • Edited

  Hi, Matthias. Downloading the resource instead of loading it in the browser is a security measure we take. You can use the `fl_sanitize` flag to get a version that we consider safe and will not have the attachment header, which makes the browser automatically download the file (do note that there is a chance that it may change the SVG content, to some degree, as `sanitise` does examine and potentially change the content of the file before delivering it).

  1

  Comment actions Permalink
• 

  enomi

  • July 10, 2017 17:29

  Thanks for the answer!

  Just a follow up question: Why is a .svg file which I uploaded considered not safe? And what exactly does fl_sanitize do with my svg?

  1

  Comment actions Permalink
• 

  Roee Ben Ari

  • July 11, 2017 11:29

  The download behaviour is applied, by default, for all SVG files, and it's not something specific to your resources. The `sanitize` flag is meant to bypass this behaviour. This flag will sanitize the SVG, stripping out anything dangerous and keeping only the visual aspects of the image. Do note that, theoretically, the image could change as a result of this.

  0

  Comment actions Permalink
• 

  GopalaKrishna Palem

  • August 10, 2017 10:30

  Not sure retrieving back the stored content from CDN is a matter of security / safety concern. If any such concern arises, it should happen so at the time of storing / "uploading to the CDN", not while retrieving it.

  Anyway, how exactly is one supposed to use this `sanitize` flag? Any documentation or pointers?

  Thanks.

  0

  Comment actions Permalink
• 

  GopalaKrishna Palem

  • August 10, 2017 10:32

  Never mind. Found it in the individual file "more options", "flags" section.

   

  Thanks.

  0

  Comment actions Permalink
• 

  Guido Laures

  • July 24, 2020 13:15
  • Edited

  I am having the same issue with (just some of) my SVG files. Some load as expected, others do not work at all.

  I am using the Vue.js Cloudinary SDK to embed the images into my page.

  The sanitize flag does not seem to make a difference and is for some reason not necessary for some files but for others it might be.

  Examples from my galary:

  This works:

  <cld-image
          cloud="sandkastenliga"
          publicId="/sandkastenliga/dude_1"
          width="31"
          crop="fill"/>

   

  This doesn't:

  <cld-image
          cloud="sandkastenliga"
          public-id="/sandkastenliga/emblems/1314_1595516926122"
          width="21"
          crop="fill"
          flags="sanitize"/>

  I am having a hard time finding the difference between those two assets in terms of meta-data.

  The only difference might be the way how they have been created. The first one has been created with Inkscape and then uploaded manually The other one is generated by a Java program and uploaded via the REST API.

  Does Cloudinary differentiate image delivery of SVG by content or structure as well? 

  0

  Comment actions Permalink
• 

  Guido Laures

  • July 24, 2020 13:30

  While I wrote my last post, I realized that the structure of the SVG is actually the problem.

  For those of you having similar issues:

  Don't forget the XML header and the 

  xmlns="http://www.w3.org/2000/svg"

  namespace attribute on the root SVG!

  If this is present, everything works as excepted.

  1

  Comment actions Permalink

Post is closed for comments.