Hi all,
I'm trying to upload some SVG files to the design studio. I have done so with no issues in the past. But now, when I try to do so, I get the warning "Potentially unsafe file blocked (IMAGE/SVG+XML)". Does anyone know what I can do to upload these files?
Thank you!
EDIT: Solved, there were extra properties on the generated SVG that needed to be deleted.
Solved! Go to Solution.
Updating to mark as resolved. Per OP:
Solved, there were extra properties on the generated SVG that needed to be deleted.
You can set the file extension (and thus server MIME type) to .xml. This sidesteps the quite bizarre security check.
Then embed using an <object> and override the MIME type.
<object type="image/svg+xml" data="https://pages.example.com/rs/123-XOR-456/images/testsvg1.xml" style="min-height:200px;">
</object>
Works in all browsers.
What extra properties did you have to remove?
If I remove enough so that Marketo doesn't reject it, then the browsers won't display it due to errors (having removed too much).
This is really annoying. There needs to be a way to disable this ridiculous error.
I figured out how to make it work:
I had to remove the xlink namespace from the top to get Marketo to like it.
From:
<svg version="1.1" viewBox="0 0 356 263" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
to:
<svg version="1.1" viewBox="0 0 356 263" xmlns="http://www.w3.org/2000/svg">
Browsers would then give an error until I removed all the xlink references, such as changing:
<use xlink:href="#path-3"/>
to:
<use href="#path-3"/>
This solution does not work for me. Here is the dead-simple SVG I am using to test this issue:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<rect fill="#AEAEAE" width="200" height="200"/>
</svg>
This must be a new security feature as I have been using SVG in Marketo for years. Any ideas?
You can set the file extension (and thus server MIME type) to .xml. This sidesteps the quite bizarre security check.
Then embed using an <object> and override the MIME type.
<object type="image/svg+xml" data="https://pages.example.com/rs/123-XOR-456/images/testsvg1.xml" style="min-height:200px;">
</object>
Works in all browsers.
Fantastic! As always, you never fail to impress. Thank you Sanford.
Awesome, gonna write this up on the blog as it's a handy workaround.
How can this file be properly saved out from Illustrator with these settings? I don't have an opportunity to edit the code of the .svg when I output from Adobe Illustrator.
I have even gone so far as to download the existing .svg that currently exists on Marketo, changed the color, and got the same exact error when I tried to upload it. I just need to upload and replace a current file.