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.

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
36. THANK YOU! FOLLOW ME AROUND: @RAMCOELHO speakerdeck.com/ramcoelho
37. {{QUESTION}}? FOLLOW ME AROUND: @RAMCOELHO speakerdeck.com/ramcoelho