SVG Creation Guide

Create clean, scalable SVG that is easy to edit, prints well, and survives “real-world” tooling (PowerPoint, browser, PDF export, HMI toolchains).

Working rules (keep SVG dependable)

• Use a viewBox on every SVG.
• Keep geometry simple: prefer path, rect, circle, line, polyline, polygon.
• Prefer strokes for technical drawings; prefer fills for pictograms.
• Use consistent naming and grouping: id on key groups, class for reusable styling.
• Avoid renderer-fragile features unless asked:
  • Avoid: filter, mask, clipPath, foreignObject, blend modes, external images/fonts.
  • Use gradients sparingly; keep them simple (linearGradient/radialGradient).
• Keep decimal precision reasonable (typically 2–3 decimals). Do not over-optimize readability away.

Requirements to capture (ask only what matters)

Capture enough to produce the correct output on the first pass.