$30 off During Our Annual Pro Sale. View Details »

PHP & SVG Templates: Instant Docs

PHP & SVG Templates: Instant Docs

Using SVG templates for generating instant documents with support for images, variable text, graphics, and multiple pages. An elegant option to replace slow and complex PDF generation libraries.
---
Utilizando templates SVG para geração de documentos instantâneos com suporte a imagens, texto variável, gráficos e múltiplas páginas. Uma opção elegante para substituir as lentas e complexas bibliotecas de geração de PDFs.

Ricardo Coelho

October 20, 2023
Tweet

More Decks by Ricardo Coelho

Other Decks in Programming

Transcript

  1. INSTANT DOCS
    PHP & SVG TEMPLATES

    View Slide

  2. SINGLE PAGE
    DOCUMENTS
    Certificate


    Receipt


    Invoice

    View Slide

  3. TOOLS
    FPDF
    ▸ Supports images, links, lines and page breaks, header and
    footer management, true type and type1 fonts and requires no
    extensions


    ▸ Line by line drawing with blind positioning


    ▸ API is complex and dated


    ▸ You have to mind the page format, margins and measures


    ▸ Really slow template design


    ▸ Really slow rendering of complex designs

    View Slide

  4. TOOLS
    FPDF+FPDI
    ▸ Supports images, links, lines and page breaks, header and
    footer management, True Type and Type1 fonts and
    requires no extensions


    ▸ Fast templating using existing PDFs


    ▸ API is complex and dated


    ▸ You still have to mind the page format, margins and
    measures

    View Slide

  5. TOOLS
    WKHTMLTOPDF
    ▸ Supports images and links


    ▸ No line control, no header or footer management


    ▸ You may user any web font


    ▸ HTML+CSS


    ▸ Inconsistent media metrics (screen vs. paper)


    ▸ Paper size, margins and page breaks are on you

    View Slide

  6. TOOLS
    SVG
    ▸ Vectors in a XML
    fi
    le


    ▸ Tons of desktop publishing tools


    ▸ Page attributes are managed by your publishing tool


    ▸ Supports bitmap images (base64 encoded)


    ▸ Supports multiple: fonts, encodings, languages and alphabets
    (including bi-di fonts)


    ▸ Dazzling light and fast


    ▸ No multipage support

    View Slide

  7. EXAMPLE
    SIMPLE CIRCLE





    style="opacity:1;
    fi
    ll:#ff5792;
    fi
    ll-opacity:1;stroke:none">



    View Slide

  8. EXAMPLE
    SIMPLE CIRCLE





    style="opacity:1;
    fi
    ll:#ff5792;
    fi
    ll-opacity:1;stroke:none">



    View Slide

  9. EXAMPLE
    SIMPLE CIRCLE





    style="opacity:1;
    fi
    ll:#ff5792;
    fi
    ll-opacity:1;stroke:none">



    View Slide

  10. EXAMPLE
    SIMPLE PATH







    View Slide

  11. EXAMPLE
    COMPLEX PATH







    View Slide

  12. HOW IS THAT GOING TO HELP
    ME WITH MY REALLY
    SPLENDID TEMPLATE?
    YOU


    (PROBABLY)
    TEXTO

    View Slide

  13. {{ NAME }}
    PLACEHOLDERS

    View Slide

  14. PIECE OF CAKE
    SIMPLE PARSER
    1 2
    3 $template = file_get_contents('template.svg');
    4 $template = str_replace('{{name}}', 'Satoru Gojo', $template);
    5 file_put_contents('doc.svg', $template);

    View Slide

  15. PIECE OF CAKE
    MULTIPLE VARS
    1 2
    3 $varset = array(
    4 '{{name}}' => 'Satoru Gojo',
    5 '{{noOneCares}}' => 'Yuji Itadori'
    6 );
    7
    8 $template = file_get_contents('template.svg');
    9
    10 foreach ($varset as $key => $value) {
    11 $template = str_replace($key, $value, $template);
    12 }
    13
    14 file_put_contents('doc.svg', $template);

    View Slide

  16. WHAT ELSE?
    ASTONISHING GRAPHS
    ▸ Dynamically Generated


    ▸ Pixel Perfect Design


    ▸ Image Effects


    ▸ Fonts of Choice


    ▸ Mixed Bitmaps

    View Slide

  17. WHAT ELSE?
    PARTIALS
    ▸ Design once


    ▸ In
    fi
    nite partial
    fi
    les


    ▸ Run-time inclusion


    ▸ Add as many as needed


    ▸ Con
    fi
    gure each object individually


    ▸ Change colors as needed


    ▸ Stretch, Resize & Skew

    View Slide

  18. WHAT ELSE?
    PARTIALS
    ▸ Design once


    ▸ In
    fi
    nite partial
    fi
    les


    ▸ Run-time inclusion


    ▸ Add as many as needed


    ▸ Con
    fi
    gure each object individually


    ▸ Change colors as needed


    ▸ Stretch, Resize & Skew

    View Slide

  19. WHAT ELSE?
    PARTIALS
    ▸ Design once


    ▸ In
    fi
    nite partial
    fi
    les


    ▸ Run-time inclusion


    ▸ Add as many as needed


    ▸ Con
    fi
    gure each object individually


    ▸ Change colors as needed


    ▸ Stretch, Resize & Skew
    COMIC CORN PARTIAL

    View Slide

  20. PDF
    PARSING INTO

    View Slide

  21. PARSING INTO PDF
    LIBRSVG
    $ sudo apt install librsvg2-bin
    $ rsvg-convert -f pdf -o doc.pdf doc.svg

    View Slide

  22. PARSING INTO PDF
    LIBRSVG
    1 2
    3 $varset = array(
    4 '{{name}}' => 'Satoru Gojo',
    5 '{{noOneCares}}' => 'Yuji Itadori'
    6 );
    7
    8 $template = file_get_contents('template.svg');
    9
    10 foreach ($varset as $key => $value) {
    11 $template = str_replace($key, $value, $template);
    12 }
    13
    14 file_put_contents('doc.svg', $template);
    15 `rsvg-convert -f pdf -o doc.pdf doc.svg`;

    View Slide

  23. PARSING INTO PDF
    INKSCAPE
    $ sudo apt-get install inkscape
    $ inkscape doc.svg --export-pdf=doc.pdf

    View Slide

  24. PARSING INTO PDF
    INKSCAPE
    1 2
    3 $varset = array(
    4 '{{name}}' => 'Satoru Gojo',
    5 '{{noOneCares}}' => 'Yuji Itadori'
    6 );
    7
    8 $template = file_get_contents('template.svg');
    9
    10 foreach ($varset as $key => $value) {
    11 $template = str_replace($key, $value, $template);
    12 }
    13
    14 file_put_contents('doc.svg', $template);
    15 `inkscape doc.svg --export-pdf=doc.pdf`;

    View Slide

  25. PAGES
    DOCS WITH MULTIPLE

    View Slide

  26. DOCS WITH MULTIPLE PAGES
    THE GLUE
    $ sudo apt-get install pdftk
    $ pdftk *.pdf cat output doc.pdf

    View Slide

  27. PARSING INTO PDF
    PDFTK
    1 2
    3 $varset = array(…);
    8 $page = 1;
    9
    10 while (file_exists("template_page_{$page}.svg")) {
    11 $template = file_get_contents("template_page_{$page}.svg");
    12
    13 foreach ($varset as $key => $value) {
    14 $template = str_replace($key, $value, $template);
    15 }
    16
    17 file_put_contents('doc.svg', $template);
    18 `inkscape doc.svg --export-pdf=doc_page_{$page}.pdf`;
    19 $page++;
    20 }
    21 `pdftk doc_page_*.pdf cat output doc.pdf`

    View Slide

  28. DOCS WITH MULTIPLE PAGES
    DON’T FORGET TO CLEAN UP
    $ rm doc_page_*.pdf
    $ rm doc.svg

    View Slide

  29. COMPLEX
    LET’S GET A LITTLE MORE

    View Slide

  30. LET’S GET A LITTLE MORE COMPLEX
    PARTIAL GRAPH

    style="opacity:1;fill:#eacf5e;fill-opacity:1"
    d="m 123.08957,203.14072 (…) 4.16357,-3.64112 z" />
    style="opacity:1;fill:#748cb2;fill-opacity:1"
    d="m 123.15627,203.14123 (…) -7.10603,-4.2013 z" />
    style="opacity:1;fill:#9cc677;fill-opacity:1"
    d="m 130.29744,207.39937 (…) -1.01079,-3.9424 z" />

    View Slide

  31. LET’S GET A LITTLE MORE COMPLEX
    PARTIAL GRAPH

    style="opacity:1;fill:#eacf5e;fill-opacity:1"
    d="m 123.08957,203.14072 (…) 4.16357,-3.64112 z" />
    style="opacity:1;fill:#748cb2;fill-opacity:1"
    d="m 123.15627,203.14123 (…) -7.10603,-4.2013 z" />
    style="opacity:1;fill:#9cc677;fill-opacity:1"
    d="m 130.29744,207.39937 (…) -1.01079,-3.9424 z" />

    View Slide

  32. LET’S GET A LITTLE MORE COMPLEX
    CREATE DASHBOARDS & REPORTS

    View Slide

  33. GOT APPS?
    NOT EVERYTHING NEEDS PAPER

    View Slide

  34. NOT EVERYTHING NEEDS PAPER. GOT APPS?
    CREATE COMPLEX DASHBOARDS AND APPS

    View Slide

  35. speakerdeck.com/ramcoelho

    View Slide

  36. THANK YOU!
    FOLLOW ME AROUND: @RAMCOELHO
    speakerdeck.com/ramcoelho

    View Slide

  37. {{QUESTIONS}}?
    FOLLOW ME AROUND: @RAMCOELHO
    speakerdeck.com/ramcoelho

    View Slide