I'm looking for an image format (I guess) that can be used for web images as well as for printing (on paper) directly from any platform/browser so that the images have the exact same sizes on paper every time.
This will be used for a math problems service and I want to allow people to print them and use rulers to accurately measure the lines/objects I have drawn.
I have tried SVG and it looks nice in browsers and mobile devices, but I have no information about DPI/PPI and if I scale the images using CSS, I've read that they become blurry (because the print scaling is done by the browser once it has taken a snapshot of the original image).
Then, I created a PNG image in Photoshop with 127 DPI and the size 525*495px which should have been exactly 10.5*9.9cm on paper – it ended up being 9.9*9.4cm when printed from Firefox. :(
Is there a neat solution to this?
Edit: The PNG example is faulty. I messed up by adding a max-width: 10cm for images that I'd forgotten about, so it's possible that in this particular case, the image would've been printed with the correct dimensions. However, in a PNG file, one still uses pixels and so the level of detail should be much higher in SVGs using (thousandths of) millimeters.