Utility_Apps/Bat/md_to_html_to_pdf_to_svg

🪶 Markdown to SVG Converter (Windows)

This project provides a simple Windows batch script that converts Markdown (.md) files into clean, styled SVG graphics with millimeter units and 1:1 scale ratio.
It uses Pandoc, wkhtmltopdf, and Poppler (pdftocairo + pdfinfo) under the hood.

---

🚀 Features

• Converts .md → .html → .pdf → .svg
• SVG output in millimeters with 1:1 scale (perfect for Inkscape)
• Automatically skips unchanged files (compares timestamps)
• Handles multi-page PDFs (creates one SVG per page)
• Optional toggles to keep .pdf and .html files
• Customizable page size in millimeters
• Automatically embeds your CSS styling
• Content properly scaled to fit within page boundaries

---

🧩 Prerequisites

Before running the script, you'll need to install a few dependencies:

1. Install Pandoc

Pandoc converts Markdown into HTML.

Using Chocolatey (recommended)

bash

choco install pandoc

Or download manually from:
🔗 https://github.com/jgm/pandoc/releases

---

2. Install wkhtmltopdf

This converts HTML to PDF (used for precise layout).

Using Chocolatey

bash

choco install wkhtmltopdf
```

Or download manually and add to PATH:
```
C:\Program Files\wkhtmltopdf\bin
```

---

### 3. Install [Poppler for Windows](https://blog.alivate.com.au/poppler-windows/)
Poppler provides `pdftocairo` and `pdfinfo`, which convert PDFs to SVG and extract metadata.

#### Steps:
1. Download the latest **Poppler for Windows** ZIP from:  
   👉 https://github.com/oschwartz10612/poppler-windows/releases/
2. Extract it somewhere permanent, e.g.:
```
   C:\Program Files\poppler
```
3. Add the `bin` folder to your system PATH:
```
   C:\Program Files\poppler\bin

4. Test it by opening a terminal and typing:

bash

   pdftocairo -v
   pdfinfo -v
```

Both should display version information.

---

## ⚙️ Setup Instructions

1. **Download the two required files:**
   - `convert_md_to_svg.bat` - Main conversion script
   - `convert_md_to_svg.bat_dependency.ps1` - PowerShell helper script

2. **Place both files in the same folder** as your Markdown files.

3. **Create a CSS file** to style your output (optional but recommended):
```
   OD.css

Example:

css

   @font-face {
     font-family: CenturyGothic;
     src: url("C:/Users/YourName/AppData/Local/Microsoft/Windows/Fonts/Century_Gothic.ttf");
   }

   body {
       font-family: 'CenturyGothic', 'Helvetica', sans-serif;
       font-size: 12px;
       color: #333;
   }
   
   h1, h2, h3 {
       color: #428bca;
       font-weight: 300;
   }
   
   table {
       border-collapse: collapse;
       width: 100%;
   }
   
   table th, table td {
       border: 1px solid #d3d3d3;
       padding: 4px;
   }
```

4. **Store your CSS in a subfolder** (optional):
```
   OD_css/OD.css

---

🧮 Script Overview

Here's what the script does for each .md file:

1. Checks timestamps - Skips files where SVG is already up-to-date
2. Converts file.md → file.html (styled with your CSS)
3. Converts file.html → file.pdf (with zero margins for precise sizing)
4. Extracts page count via pdfinfo
5. Converts each page → file.svg (single page) or file-1.svg, file-2.svg (multi-page)
6. Post-processes SVG to:
   • Set units to millimeters
   • Set viewBox for 1:1 scale
   • Apply coordinate transformation so content fits properly
7. Optionally deletes intermediate .html and .pdf

---

🧰 Script Configuration

Inside convert_md_to_svg.bat, you can modify the following settings:

bat

REM Keep intermediate files?
SET KEEP_PDF=0
SET KEEP_HTML=0

REM Page size in millimeters
SET PAGE_WIDTH=152.4
SET PAGE_HEIGHT=457.2

REM CSS file configuration
SET CSS_FILE=OD.css
SET CSS_FOLDER=OD_css

• Set KEEP_PDF=1 or KEEP_HTML=1 if you want to keep those files
• Adjust the page size as needed (default is 6" × 18" = 152.4mm × 457.2mm)
• Modify CSS file name and folder path to match your setup

---

▶️ How to Use

1. Open the folder containing:
   • Your .md files
   • The script convert_md_to_svg.bat
   • The PowerShell helper convert_md_to_svg.bat_dependency.ps1
   • Optional OD_css/OD.css file
2. Double-click convert_md_to_svg.bat, or run it in Command Prompt:

bash

   convert_md_to_svg.bat
```

3. The script will:
   - Convert only Markdown files **that have changed** since the last SVG was created
   - Display PDF page size for verification
   - Produce one or more SVGs per file (if multi-page)
   - Clean up intermediate files (depending on your toggles)

Example output:
```
Converting

Processing: DESIGN CRITERIA.md
Checking PDF size...
Page size:      432 x 1296 pts
Done: DESIGN CRITERIA.svg

Complete
Press any key to continue . . .

---

📐 SVG Output Specifications

The generated SVG files will have:

• Units: Millimeters (mm) - perfect for Inkscape
• Scale: 1.0 (1 mm per user unit)
• ViewBox: Matches page dimensions in mm
• Content: Properly scaled to fit within page boundaries using transform
• Dimensions: Configurable via PAGE_WIDTH and PAGE_HEIGHT

When opened in Inkscape:

• Document properties will show mm units ✓
• Scale will be 1:1 ✓
• Content will fit within the page ✓

---

🧪 Verifying Installation

Run these in a terminal — all should work without errors:

bash

pandoc -v
wkhtmltopdf -V
pdftocairo -v
pdfinfo -v
powershell -Command "Write-Host 'PowerShell works'"
```

If any command isn't found, check your system PATH.

---

## 📁 File Structure

After conversion, your folder will contain:
```
document.md                                    (your original Markdown)
document.svg                                   (generated SVG in mm)
OD_css/OD.css                                 (your CSS styling)
convert_md_to_svg.bat                         (main script)
convert_md_to_svg.bat_dependency.ps1          (PowerShell helper)
```

For multi-page documents:
```
document.md
document-1.svg
document-2.svg
document-3.svg

---

🩵 Conversion Flow

Step	Tool	Input	Output	Notes
1	Pandoc	file.md	file.html	Embeds CSS styling
2	wkhtmltopdf	file.html	file.pdf	Zero margins, precise sizing
3	pdfinfo	file.pdf	Page count	Determines # of SVGs to create
4	pdftocairo	file.pdf	file.svg (pt units)	Initial SVG in points
5	PowerShell	file.svg	file.svg (mm units)	Converts to mm, adds scale transform

---

🔧 Troubleshooting

Issue: Dialog box closes immediately without running

• Solution: Ensure both .bat and .ps1 files are in the same directory
• Check that the PowerShell script has the correct filename: convert_md_to_svg.bat_dependency.ps1

Issue: CSS not found error

• Solution: Verify the CSS file exists at the path specified in CSS_FOLDER\CSS_FILE
• Update the CSS_FOLDER and CSS_FILE variables to match your setup

Issue: Content bleeds off page in SVG

• Solution: This should be fixed by the PowerShell script's transform scaling
• If issues persist, check that convert_md_to_svg.bat_dependency.ps1 contains the scale transform code

Issue: SVG shows wrong scale in Inkscape

• Solution: Delete existing SVG and PDF files, then re-run the script
• Ensure the PowerShell post-processing step completes successfully

---

📝 Notes

• The script uses timestamp comparison to skip unchanged files efficiently
• Zero margins are set in wkhtmltopdf for precise content placement
• The PowerShell script applies a 0.352778 scale transform to convert point-based coordinates to millimeter-based coordinates
• Multi-page PDFs automatically generate numbered SVG files (-1.svg, -2.svg, etc.)

---

🎉 Credits

This workflow combines several powerful open-source tools:

• Pandoc - Universal document converter
• wkhtmltopdf - HTML to PDF rendering
• Poppler - PDF manipulation utilities