How to low poly svg quality and performance reference
- Step 1Choose your triangle count tier — 50–150 triangles: bold, abstract, very low file size (3–8KB). 200–400 triangles: classic low-poly aesthetic, 10–25KB. 500–1000 triangles: detailed, semi-realistic, 30–70KB. 1000+ triangles: near-photorealistic, large file, consider PNG export.
- Step 2Optimize the SVG — Run SVGO on the generated SVG with convertPathData (reduce decimal places), cleanupAttrs, and removeComments enabled. Do not enable collapseGroups or mergePaths — these break the per-polygon fill structure. A 300-triangle SVG typically compresses 30–40% with SVGO.
- Step 3Test on mobile — Open the SVG on a mid-range Android device (not a flagship). A 500-triangle low-poly SVG should render in under 50ms on initial paint. If you see jank during scroll, reduce the triangle count or switch to PNG for mobile using the picture element.
Frequently asked questions
At what triangle count should I switch from SVG to PNG for a low-poly background?+
Over 800 triangles, PNG export is often a better choice for backgrounds. The SVG gains no visual advantage over PNG at that density (the polygons are too small to distinguish at typical viewing distances), while PNG is smaller after compression and renders with zero SVG parse overhead.
Does browser rendering performance degrade with high polygon count SVGs?+
Yes. The browser must parse, layout, and paint each polygon element individually. At 200 triangles, this is imperceptible. At 2000 triangles, initial paint can take 100–300ms on slow devices. For large polygon counts, rasterize to PNG server-side (the JAD API supports this) and serve the PNG for backgrounds.
Can I use CSS will-change to improve low-poly background performance during scroll?+
Yes. Apply will-change: transform to the low-poly background SVG element to promote it to a compositor layer. The browser then composites the pre-rasterized layer during scroll without repainting. This eliminates scroll-triggered paints for large polygon SVGs.
What SVGO settings reduce low-poly SVG file size without breaking the output?+
Safe plugins: cleanupAttrs (reduce whitespace), removeComments, removeDoctype, removeXMLProcInst, convertColors (hex shorthand), convertPathData (reduce decimal precision to 1–2 places). Dangerous plugins to AVOID for low-poly: mergePaths (merges separate polygon fills, breaking colouring), convertShapeToPath (unnecessary), collapseGroups (may disrupt structure).
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.