Just reporting back here in case anyone else has the same issue.
The fix
Given a SVG URL on our CDN, like https://www.datocms-assets.com/119171/1716576379-svg-sanitization-demo.svg, append the ?svg-sanitize=false
URL parameter to it, like https://www.datocms-assets.com/119171/1716576379-svg-sanitization-demo.svg?svg-sanitize=false
Or in GraphQL:
upload(
filter: {filename: {matches: {pattern: "svg-sanitization-demo.svg"}}}
) {
url(imgixParams: {svgSanitize: "false"})
}
What happened
After some investigation, we discovered that this was caused by a change in our image CDN provider, who recently began sanitizing their SVGs. The workaround is to append the parameter svg-sanitize=false
to the SVG’s datocms-assets.com
URL.
For example, given an SVG file like this:
svg-sanitization-demo.svg
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
<rect width="300" height="300" fill="blue" />
<foreignObject class="node" x="50" y="100" width="200" height="200">
<body xmlns="http://www.w3.org/1999/xhtml" style="background: white; font: 20pt sans-serif; text-align: center">
<div>This is HTML inside SVG</div>
</body>
</foreignObject>
</svg>
It SHOULD look like this PNG screenshot:
Without svg-sanitize
If you access it directly from our CDN, it will be sanitized (and broken), showing only the blue square without the text inside: https://www.datocms-assets.com/119171/1716576379-svg-sanitization-demo.svg
With svg-sanitize=false
Once you add the svg-sanitize=false
param, it shows the original instead:
https://www.datocms-assets.com/119171/1716576379-svg-sanitization-demo.svg?svg-sanitize=false
We apologize that this caused a disruption for our customers. This was not a change we were aware of until a customer reported it, and the Imgix svg-sanitize=false
parameter was an undocumented parameter. We’ll work with our partner to better prevent incidents like this in the future. Sorry about that!
You should not need to use this parameter unless you’re having issues with your SVG files. Typically, that would only happen with SVGs that have embedded code or other data that the Imgix sanitizer removes. The sanitization happens as a default measure for security, since unsanitized SVGs can sometimes contain malicious code (including HTML, Javascript, and other things).
If your SVGs are first-party assets with basic shapes, text, etc., you shouldn’t need to worry about this. If, however, you programmatically modify your SVGs (such as targeting and modifying their nodes via code) and you’re noticing broken or different behaviors, please give this parameter a try and let us know.