Written by Jamie Park — UI/UX Designer. More about me →
Everyone assumes the converter will figure it out. You upload a file, you click a button, you get a usable result. Most of the time, that assumption holds. When it does not — and it does not more often than people realize — there is no warning. The file downloads. It opens. It looks fine. And then it fails wherever it was supposed to actually work.
I have traced dozens of production issues back to this one assumption. The converter did exactly what it was told. The problem was that nobody told it about the edge case — because the person clicking the button did not know the edge case existed. According to W3C SVG 1.1 specification (w3.org/TR/SVG11), the default behavior for this scenario is actually undefined, which means every tool handles it differently.
Instead of assuming, I now check two things before every batch. One: does the source match what MDN Web Docs on CanvasRenderingContext2D.drawImage() expects? If the source was exported from design software, it might have quirks that break downstream tools. Two: do the output settings match the destination? A file headed for a Retina display needs different parameters than one headed for a thermal printer.
Our animated SVG tool bakes these checks into the conversion pipeline so I do not have to remember them every time. It is the difference between hoping it works and knowing it will. Check out the batch mode →
I open the output in two environments: the one it was built for, and the opposite one. If it was built for a light-background webpage, I also check it on a dark background. If it was built for print, I also check it on a phone screen at 2x zoom. This catches 90% of the problems that slip past automated validation.
It adds maybe ninety seconds to my workflow. Compared to the hours of rework it prevents, it is the cheapest insurance I have.
Written by Jamie Park — UI/UX Designer. More about me →