Skip to main content

Rendering Svg Precision

Source: .agents/references/coding-standard/vercel-react-best-practices/rules/rendering-svg-precision.md

Metadata​

  • title: Optimize SVG Precision
  • impact: LOW
  • impactDescription: reduces file size
  • tags: rendering, svg, optimization, svgo

Content​

Optimize SVG Precision​

Reduce SVG coordinate precision to decrease file size. The optimal precision depends on the viewBox size, but in general reducing precision should be considered.

Incorrect (excessive precision):

<path d="M 10.293847 20.847362 L 30.938472 40.192837" />

Correct (1 decimal place):

<path d="M 10.3 20.8 L 30.9 40.2" />

Automate with SVGO:

npx svgo --precision=1 --multipass icon.svg