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
   

   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