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.

Transcript

1. INSTANT DOCS PHP & SVG TEMPLATES
2. SINGLE PAGE DOCUMENTS Certificate Receipt Invoice
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
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
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
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
7. EXAMPLE SIMPLE CIRCLE <g id=“some-layer"> <circle r="200" cy="500" cx="400" id=“my-circle“ style="opacity:1; fi ll:#ff5792; fi ll-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; fi ll:#ff5792; fi ll-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; fi ll:#ff5792; fi ll-opacity:1;stroke:none"> </g>
10. EXAMPLE SIMPLE PATH <g id=“some-layer"> <path d=“M 0,0 L 10,0 L 10,10 L 0,10 L 0,0 Z”> </g>
11. EXAMPLE COMPLEX PATH <g id=“some-layer"> <path d=“M 10,90 C 30,90 25,10 50,10 S 70,90 90,90”> </g>
12. HOW IS THAT GOING TO HELP ME WITH MY REALLY SPLENDID TEMPLATE? YOU (PROBABLY) TEXTO
13. {{ NAME }} PLACEHOLDERS
14. PIECE OF CAKE SIMPLE PARSER 1 <?php 2 3 $template = file_get_contents('template.svg'); 4 $template = str_replace('{{name}}', 'Satoru Gojo', $template); 5 file_put_contents('doc.svg', $template);
15. PIECE OF CAKE MULTIPLE VARS 1 <?php 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);
16. WHAT ELSE? ASTONISHING GRAPHS ▸ Dynamically Generated ▸ Pixel Perfect Design ▸ Image Effects ▸ Fonts of Choice ▸ Mixed Bitmaps
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
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
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
20. PDF PARSING INTO
21. PARSING INTO PDF LIBRSVG $ sudo apt install librsvg2-bin $ rsvg-convert -f pdf -o doc.pdf doc.svg
22. PARSING INTO PDF LIBRSVG 1 <?php 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`;
23. PARSING INTO PDF INKSCAPE $ sudo apt-get install inkscape $ inkscape doc.svg --export-pdf=doc.pdf
24. PARSING INTO PDF INKSCAPE 1 <?php 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`;
25. PAGES DOCS WITH MULTIPLE
26. DOCS WITH MULTIPLE PAGES THE GLUE $ sudo apt-get install pdftk $ pdftk *.pdf cat output doc.pdf
27. 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`
28. DOCS WITH MULTIPLE PAGES DON’T FORGET TO CLEAN UP $ rm doc_page_*.pdf $ rm doc.svg
29. COMPLEX LET’S GET A LITTLE MORE
30. 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>
31. 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>
32. LET’S GET A LITTLE MORE COMPLEX CREATE DASHBOARDS & REPORTS
33. GOT APPS? NOT EVERYTHING NEEDS PAPER
34. NOT EVERYTHING NEEDS PAPER. GOT APPS? CREATE COMPLEX DASHBOARDS AND APPS
35. speakerdeck.com/ramcoelho
36. THANK YOU! FOLLOW ME AROUND: @RAMCOELHO speakerdeck.com/ramcoelho
37. {{QUESTIONS}}? FOLLOW ME AROUND: @RAMCOELHO speakerdeck.com/ramcoelho