Graph Paper SVG Generator

Graph paper SVG: digital squared paper for math, design and engineering

Graph paper — also known as squared paper, grid paper or quadrille paper — was invented by Dr. Buxton in 1795 (England) and standardised in textbooks during the Victorian era for engineering, surveying and statistical drafting. By the late 19th century every drafting room in Europe carried bound pads of pre-printed grids, and the format became the default substrate for school mathematics worldwide.

Today, generating graph paper as SVG rather than printing a PDF gives you three superpowers: infinite zoom without aliasing, runtime theming (recolour the grid by changing a single hex), and tiny file size — a complete A4 sheet renders in under 2 KB of XML. The classic markup uses a <pattern> element repeated across a full-page <rect>:

<svg viewBox="0 0 200 200">
  <defs>
    <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
      <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#ddd" stroke-width="1"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#grid)"/>
</svg>

Standard sizes and rulings

In the US, quad-ruled notebooks come in three flavours: 0.25" (4 squares per inch) for general schoolwork, 0.2" (5 squares) for engineering pads, and 0.125" (8 squares) for fine technical drawings. In metric markets — including Brazil — the dominant rulings are 5 mm (school maths) and 10 mm (engineering sketches). Quality engineering pads add major lines every 5 squares at heavier weight so you can count cells at a glance, a convention worth replicating in your generator.

Use cases beyond math homework

• Architectural floor plans — quick sketches before moving to CAD.
• Knitting and cross-stitch patterns — each cell becomes one stitch.
• Pixel art and game design — planning Minecraft builds, Dwarf Fortress fortresses or NES-style sprite layouts.
• Hand-plotted data — the entire pre-Excel era of statistics ran on graph paper.
• Bullet Journaling (BuJo) — Ryder Carroll's method explicitly recommends dot grids over lines for layout flexibility.
• Tabletop RPG maps — D&D dungeons traditionally use 1 square = 5 feet.

Grid variants worth knowing

The plain square grid is just the start. Isometric paper uses 60° triangles for 3D sketching and crystallography. Polar paper has concentric circles + radial lines for vector math. Logarithmic (semi-log and log-log) is the standard for scientific plots that span many orders of magnitude. Dot grids are the modern favourite of Bullet Journal users — visible enough to align text, faint enough to disappear behind the writing. Hex grids dominate strategy board games (Catan, Civilization, Battletech).

Print-friendly tips

When you intend to print, pick a cyan or very light gray stroke. Cyan is the photographer/draftsman's classic choice because it is visible to the naked eye but virtually invisible to monochrome photocopiers and scanners — so your final drawing can be reproduced without the grid bleeding through. Set stroke widths in the range 0.25 mm (minor) and 0.5 mm (major every 5 squares) for the cleanest output on inkjet or laser at 300 DPI.

Digital alternatives and tooling

For tablet workflows, GoodNotes 5, Notability, OneNote and Notion ship native grid templates; many users still prefer to import custom SVGs because the built-in grids are not always to scale. Desktop vector editors like Inkscape and Adobe Illustrator open SVGs from this generator natively. For printable PDFs at exact metric sizes, printablepaper.net is the long-running reference site.

FAQ

Is digital graph paper better than printed? Depends on the task. For tactile thinking, hand drafting and rapid ideation, many engineers and mathematicians still prefer paper. For shareable, reusable layouts and pixel-perfect alignment, SVG wins.

What grid size should I use for math? 5 mm is the global default for secondary school and undergraduate work — small enough for detailed plots, large enough for handwriting.

What stroke colour photocopies cleanest? Pale cyan (around #9ec8e0) or very light gray (around #dddddd). Avoid pure black grids — they compete with your drawing.

Can I export this SVG to PDF? Yes. Open the downloaded .svg in Inkscape or your browser and print to PDF at the page size you need. SVG is resolution-independent, so the output is sharp at any DPI.