svg in apex: best practices - doag.org · agenda • basics • raphaël with background images •...
TRANSCRIPT
![Page 1: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/1.jpg)
SVG in APEX: Best Practices
![Page 2: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/2.jpg)
Freelancer im Bereich Oracle APEX & BI
Oracle Datenbanken & APEX seit 2006
Selbständig seit 2010 www.apex-at-work.com www.apex-experts.de
Tobias Arnhold
![Page 3: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/3.jpg)
Consultant Database & DWH Oracle und APEX seit 2013 Angestellt bei syntegris
information solutions GmbH
Sebastian Reinig
![Page 4: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/4.jpg)
Agenda
• Basics• Raphaël with background images• Mapael using Maps• Raphaël and SVG file• SVGJS and SVG file
This presentation contains Screenshots, the application is published after the doag.
![Page 5: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/5.jpg)
Basics
![Page 6: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/6.jpg)
Basics
![Page 7: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/7.jpg)
Basics
![Page 8: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/8.jpg)
Basics
![Page 9: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/9.jpg)
Basics
![Page 10: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/10.jpg)
Basis
![Page 11: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/11.jpg)
Raphaël withbackground images
![Page 12: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/12.jpg)
Raphaël withbackground images
![Page 13: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/13.jpg)
Raphaël withbackground images
• Ships stored in table• PL/SQL generates Harbor• JavaScript Generation• Harbor is static
![Page 14: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/14.jpg)
Raphaël withbackground images
![Page 15: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/15.jpg)
Raphaël withbackground images
![Page 16: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/16.jpg)
Raphaël withbackground images
![Page 17: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/17.jpg)
Raphaël withbackground images
![Page 18: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/18.jpg)
Raphaël withbackground images
![Page 19: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/19.jpg)
Mapael using Maps
![Page 20: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/20.jpg)
Mapael using Maps
![Page 21: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/21.jpg)
Mapael using Maps
![Page 22: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/22.jpg)
Mapael using Maps
![Page 23: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/23.jpg)
Mapael using Maps
![Page 24: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/24.jpg)
Raphaël and SVG file
![Page 25: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/25.jpg)
Raphaël and SVG file
![Page 26: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/26.jpg)
Raphaël and SVG file
![Page 27: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/27.jpg)
Raphaël and SVG file
![Page 28: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/28.jpg)
Raphaël and SVG file
![Page 29: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/29.jpg)
Raphaël and SVG file
![Page 30: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/30.jpg)
Raphaël and SVG file
![Page 31: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/31.jpg)
Raphaël and SVG file
![Page 32: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/32.jpg)
Raphaël and SVG file
![Page 33: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/33.jpg)
Raphaël and SVG file
![Page 34: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/34.jpg)
Raphaël and SVG file
![Page 35: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/35.jpg)
Raphaël and SVG file
![Page 36: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/36.jpg)
Raphaël and SVG file
![Page 37: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/37.jpg)
SVGJS and SVG file
![Page 38: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/38.jpg)
SVGJS and SVG file
![Page 39: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/39.jpg)
SVGJS and SVG file
![Page 40: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/40.jpg)
SVGJS and SVG file
![Page 41: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/41.jpg)
SVGJS and SVG file
![Page 42: SVG in APEX: Best Practices - doag.org · Agenda • Basics • Raphaël with background images • Mapael using Maps • Raphaël and SVG file • SVGJS and SVG file This presentation](https://reader031.vdocument.in/reader031/viewer/2022022610/5b96626009d3f2de4a8d3574/html5/thumbnails/42.jpg)
SVGJS and SVG file