The attached file (adr_6.2.svg) is an optimized SVG (with SVGO). It renders correctly in Safari and Chrome on MacOS Mojave, but Affinity Design does not render it correctly.
The non optimized file (ADR_62._original) works in AD. Something in the optimization is not handled well by AD. The fact that the browsers renders correctly leads me to believe that AD has a bug.
This is how the original SVG looks in AD. Chrome and Safari renders the optimized image like this as well:
This is how the optimized image it looks in AD:
The SVGO params:
svgo = new SVGO({
plugins: [
{
cleanupAttrs: true,
},
{
removeDoctype: true,
},
{
removeXMLProcInst: true,
},
{
removeComments: true,
},
{
removeMetadata: true,
},
{
removeTitle: true,
},
{
removeDesc: true,
},
{
removeUselessDefs: true,
},
{
convertTransform: true,
},
{
removeEditorsNSData: true,
},
{
removeEmptyAttrs: true,
},
{
removeHiddenElems: true,
},
{
removeEmptyText: true,
},
{
removeEmptyContainers: true,
},
{
removeViewBox: true,
},
{
cleanUpEnableBackground: true,
},
{
convertStyleToAttrs: false, //do not activate!
},
{
convertColors: true,
},
{
convertPathData: true,
},
{
convertTransform: true,
},
{
removeUnknownsAndDefaults: true,
},
{
removeNonInheritableGroupAttrs: true,
},
{
removeUselessStrokeAndFill: true,
},
{
removeUnusedNS: true,
},
{
cleanupIDs: true,
},
{
cleanupNumericValues: true,
},
{
moveElemsAttrsToGroup: true,
},
{
moveGroupAttrsToElems: true,
},
{
collapseGroups: true,
},
{
removeRasterImages: true,
},
{
mergePaths: true,
},
{
convertShapeToPath: false,
},
{
sortAttrs: true,
},
{
transformsWithOnePath: true,
},
{
removeDimensions: true,
},
],
});
adr_6.2.svg
ADR_6.2_original.svg