PHP & SVG Templates: Instant Docs

PHP & SVG Templates: Instant Docs

How to use SVG Templates for instant document generation in PHP, supporting images, variable text, graphs and multiple pages. Say goodbye to that PDF lib that you always (not really) loved.
---
Como utilizar templates SVG para geração de documentos instantâneos em PHP, com suporte a imagens, texto variável, gráficos e múltiplas páginas. Diga adeus à biblioteca de geração de PDFs que sempre trouxe alegria e paz para o seu dia a dia #sqn.

B82b1da7a58dcf37c8f0461c5c08ec0a?s=128

Ricardo Coelho

October 20, 2016
Tweet

Transcript

  1. INSTANT DOCS PHP & SVG TEMPLATES

  2. SINGLE PAGE DOCUMENTS Certificate Receipt Invoice

  3. TOOLS FPDF ▸ Supports image, 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 ▸ Complex and dated API ▸ Page format, margins and measure are of your concern ▸ Really slow template design ▸ Really slow rendering for complex designs
  4. TOOLS FPDF+FPDI ▸ Supports image, links, lines and page breaks,

    header and footer management, True Type and Type1 fonts and requires no extensions ▸ Fast templates using PDF ▸ Complex and dated API ▸ Page format, margins and measure are still on you
  5. TOOLS WKHTMLTOPDF ▸ Supports image 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
  6. TOOLS SVG ▸ Vectors in a XML file ▸ Tons

    of desktop publishing tools ▸ Page attributes are managed by your publishing tool ▸ Supports bitmap images (which are kept base64 encoded) ▸ Supports multiple: fonts, encodings, languages and alphabets (including bi-di fonts) ▸ Dazzling light and fast ▸ No multipage support
  7. EXAMPLE SIMPLE CIRCLE <g id=“some-layer"> <circle r="200" cy="500" cx="400" id=“my-circle“

    style="opacity:1;fill:#ff5792;fill-opacity:1;stroke:none"> </g>
  8. EXAMPLE SIMPLE CIRCLE <g id=“some-layer"> <circle r="250" cy="500" cx="400" id=“my-circle“

    style="opacity:1;fill:#ff5792;fill-opacity:1;stroke:none"> </g>
  9. EXAMPLE SIMPLE CIRCLE <g id=“some-layer"> <circle r="100" cy="500" cx="400" id=“my-circle“

    style="opacity:1;fill:#ff5792;fill-opacity:1;stroke:none"> </g>
  10. HOW IS THAT GOING TO HELP ME WITH MY REALLY

    SPLENDID TEMPLATE? YOU, PROBABLY TEXTO
  11. {{ NAME }} PLACEHOLDERS

  12. PIECE OF CAKE SIMPLE PARSER 1 <?php 2 3 $template

    = file_get_contents('template.svg'); 4 $template = str_replace('{{name}}', 'Mr. Robot', $template); 5 file_put_contents('doc.svg', $template);
  13. PIECE OF CAKE MULTIPLE VARS 1 <?php 2 3 $varset

    = array( 4 '{{name}}' => 'Mr. Robot', 5 '{{realName}}' => 'Christian Slater' 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);
  14. WHAT ELSE? ASTONISHING GRAPHS ▸ Dinamically Generated ▸ Pixel Perfect

    Design ▸ Image Effects ▸ Fonts of Choice ▸ Mixed Bitmaps
  15. WHAT ELSE? PARTIALS ▸ Design once ▸ Infinite partial files

    ▸ Run-time include ▸ Add as many as needed ▸ Configure each object ▸ Change colors as needed ▸ Strech, Resize & Skew
  16. WHAT ELSE? PARTIALS ▸ Design once ▸ Infinite partial files

    ▸ Run-time include ▸ Add as many as needed ▸ Configure each object ▸ Change colors as needed ▸ Strech, Resize & Skew
  17. WHAT ELSE? PARTIALS ▸ Design once ▸ Infinite partial files

    ▸ Run-time include ▸ Add as many as needed ▸ Configure each object ▸ Change colors as needed ▸ Strech, Resize & Skew COMIC CORN PARTIAL
  18. PDF PARSING INTO

  19. PARSING INTO PDF LIBRSVG $ sudo apt install librsvg2-bin $

    rsvg-convert -f pdf -o doc.pdf doc.svg
  20. PARSING INTO PDF LIBRSVG 1 <?php 2 3 $varset =

    array( 4 '{{name}}' => 'Mr. Robot', 5 '{{realName}}' => 'Christian Slater' 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`;
  21. PARSING INTO PDF INKSCAPE $ sudo apt-get install inkscape $

    inkscape doc.svg --export-pdf=doc.pdf
  22. PARSING INTO PDF INKSCAPE 1 <?php 2 3 $varset =

    array( 4 '{{name}}' => 'Mr. Robot', 5 '{{realName}}' => 'Christian Slater' 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`;
  23. PAGES DOCS WITH MULTIPLE

  24. DOCS WITH MULTIPLE PAGES THE GLUE $ sudo apt-get install

    pdftk $ pdftk *.pdf cat output doc.pdf
  25. PARSING INTO PDF PDFTK 1 <?php 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`
  26. DOCS WITH MULTIPLE PAGES DON’T FORGET TO CLEAN UP $

    rm doc_page_*.pdf $ rm doc.svg
  27. COMPLEX LET’S GET A LITTLE MORE

  28. LET’S GET A LITTLE MORE COMPLEX PARTIAL GRAPH <g id="graph">

    <path style="opacity:1;fill:#eacf5e;fill-opacity:1" d="m 123.08957,203.14072 (…) 4.16357,-3.64112 z" /> <path style="opacity:1;fill:#748cb2;fill-opacity:1" d="m 123.15627,203.14123 (…) -7.10603,-4.2013 z" /> <path style="opacity:1;fill:#9cc677;fill-opacity:1" d="m 130.29744,207.39937 (…) -1.01079,-3.9424 z" /> </g>
  29. LET’S GET A LITTLE MORE COMPLEX PARTIAL GRAPH <g id="graph">

    <path style="opacity:1;fill:#eacf5e;fill-opacity:1" d="m 123.08957,203.14072 (…) 4.16357,-3.64112 z" /> <path style="opacity:1;fill:#748cb2;fill-opacity:1" d="m 123.15627,203.14123 (…) -7.10603,-4.2013 z" /> <path style="opacity:1;fill:#9cc677;fill-opacity:1" d="m 130.29744,207.39937 (…) -1.01079,-3.9424 z" /> </g>
  30. LET’S GET A LITTLE MORE COMPLEX CREATE DASHBOARDS & REPORTS

  31. GOT APPS? NOT EVERYTHING NEEDS PAPER

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

    APPS
  33. ANIMATED LET’S GET

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

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