SVG Scaling in Firefox

All background images are SVG with: background-size: 10em 10em;

The screenshot below demostrates the issue in Firefox.

The follow three background images should all be crisp, not blurry or pixelated.

SVG created at 10×10px

The solution: create the SVG canvas at a larger resolution.

SVG created at 1000×1000px

Created at 1000x1000px with 10x10px polygon scaled

The canvas is 1000×1000 but the polygon points are 10×10 with a transform: scale(100,100) applied to the group.

This potentially reduces file size because points are like 5,8.292 instead of 500,829.199.