Building blocks/Pages & Assets

Quran SVG

Stable

Vector Mushaf pages in SVG, with the position of every ayah mapped on the page.

Riwayat
5
Ayah polygons
31,118

What it provides

  • The 604-page Mushaf al-Madinah vectorised, in five riwayat, and growing as new mushafs are contributed
  • A transparent clickable ayah layer — a real polygon per verse, not a bounding box
  • Per-page polygon JSON plus surah and marker indexes

Use it when you need

Use it when you want to display printed Mushaf pages in a website or application and make individual ayahs selectable or connect them to recitation, Tafsir, and other features.

  • The simplest thing that works: drop a page in, tap an ayah, no library
  • A mushaf that has not been split into elements — most of them, and some never will be
  • Follow-along recitation, bookmarking, or comparing a page across riwayat

Not for

  • Word-level interaction — these pages carry an ayah layer only. Where a mushaf has been split, use Quran SVG Elements.
  • Mobile and native, where SVG stops performing. Use Quran Engine.
  • Text you can search. Use Quran Text.

See it work

Several things this block does, each running on data from the repository itself.

Any of 604 pages, in five riwayat, with the clickable ayah layer that ships inside the artwork.

Live
Fetching page 3
Click any ayah on the page.

The hit-regions are in the artwork already — the same file a developer drops into their own app, fetched here straight from the repository over open CORS. The same page number in another riwāyah is a different printed page, which is why the ayah under your cursor changes when you switch.

Pages are fetched live from the repository over open CORS — the same files you would use.

Provenance

Every dataset identifies its source, edition, riwayah, version, and verification status. The digest lets you confirm the file you ship is the file that was verified.

View full provenance →
Quran SVGStable
Repositoryquran-ws/quran-svg
LicenceCC BY 4.0 (metadata and polygon layer), attribution waived for use inside a product · MIT (tools) · KFGQPC terms (the artwork)
Publicyes

Quick start

The shortest path to something running. The repository’s README covers the rest.

$ curl -O .../mushafs/hafs/kfqc/svg/001.svg
<object data="001.svg" type="image/svg+xml" id="page"></object>
 
page.querySelectorAll(".ayahPolygon") // surah / ayah attributes
Read the full documentation →

Works with

Blocks meet through shared references, not through a framework. Each of these understands something this block produces.