Word by word Tajweed data in SVG format

[iBasit]

Convert Quran GIF text to SVG assets

Currently, surah 1 to 20 is done

Surahs Done:

• [x] 1 - 10
• [x] 11 - 20 - @Ashraf-Ali-aa
• [ ] 21- 30
• [ ] 31 - 40
• [ ] 41 - 50
• [ ] 51 - 60
• [ ] 61 - 70
• [ ] 71 - 80
• [ ] 81 - 90
• [ ] 91 - 114

---

If anyone wants to help you can download a trial version of illustrator and use this script to convert the images https://gist.github.com/Ashraf-Ali-aa/38a8c0d381c120c2c378 After illustrator up and running you can leave the program in the background and carry on with other tasks.

Setup GIF to SVG

1. install Adobe illustrator (free trial)
2. setup image trace
3. install illustrator plugin https://gist.github.com/Ashraf-Ali-aa/38a8c0d381c120c2c378 - (read Gist comment)
4. Run plugin File > Scripts > ImageTracingToSVG
5. let illustrator convert all the images in the folder and when its finished it would display batch process finished.

   illustrator image trace settings

[iBasit]

@Ashraf-Ali-aa brother, that QuranComplex file you provided. we can have svg file, but then again on rendering it creates issue.

how about if we give id to each font, so we can just use images of all the letters.. rather then font itself directly.

if this works out, which I think it will.. then we don't need to convert anything and we can start using letter by letter directly..

what do you think?

[Ashraf-Ali-aa]

@basit in the QuranComplex file, I believe the Quran text are path outlines, not actual text so we can export them without having to worry about rendering issues but they do not have any tajweed colours on the text. The gif images that I am converting are path outlines with the tajweed rules.

[iBasit]

@Ashraf-Ali-aa if we manage to render letter by letter properly with svg paths.. then we can use our existing tajweed file to render the colors... which is exactly same of what you have with gif files.

[nailhuseyn]

From my observations the font and the text in Adobe Illustrator files from QuranComlex are different. We need to export the files word by word and color it with tajweed rules. It is difficlut to render letter by letter as it uses different graphical display with the same letter

[iBasit]

@hqaweb font files does not matter, if we solve the issue with svg path (tag id)... then you can replace tajweed with any font file.

[Ashraf-Ali-aa]

@iBasit on http://www.ar-php.org/features-php-arabic.html there are some good tools for rendering arabic text.