@hudabook/qvf-svg-renderer

Quran Svg Renderer

Features

• 🍃 Efficent, Smaller than Regulat SVG text Format
• 🚀 Progressive, Load On Demand
• ⚡ Easy to Use

Install

Run npm install @hudabook/qvf-svg-renderer

How To Use

import { QuranSvgRenderer, SvgRenderResult } from "@hudabook/qvf_svg_renderer";

// Data is a list of .qvf files 
// Uthmani Quran words can be found here: https://github.com/solomancode/qur-specs/tree/master/qvf/uthmani
// Files can be loaded by dev server or any static http server
function renderAyah(data: ArrayBuffer[], fontSize = 32) {
    let svg = new QuranSvgRenderer();
    const render = svg.render(data, fontSize);
    for (const result of render) {
        renderSvg(result)  
    }
}

function renderSvg(result: SvgRenderResult) {
    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    svg.setAttribute('width', result.width);
    svg.setAttribute('height', result.height);
    svg.setAttribute('viewBox', result.viewBox);
    for (const path of result.paths) {
        const element = document.createElementNS("http://www.w3.org/2000/svg", "path");
        element.setAttribute('d', path.d);
        svg.appendChild(element);
    }
    document.body.appendChild(svg);
}

A working React example can be found here:

https://github.com/solomancode/qur-specs/tree/master/demo

Project Specs can be found here:

https://github.com/solomancode/qur-specs/tree/master