SVG files in Cloudinary

Comments

8 comments

  • Official comment
    Avatar
    Shirly Manor

    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
  • Avatar
    Roee Ben Ari

    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
  • Avatar
    enomi

    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
  • Avatar
    Guido Laures

    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
  • Avatar
    Roee Ben Ari

    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
  • Avatar
    GopalaKrishna Palem

    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
  • Avatar
    GopalaKrishna Palem

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

     

    Thanks.

    0
    Comment actions Permalink
  • Avatar
    Guido Laures

    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

Please sign in to leave a comment.