Top Banner
SVG in APEX: Best Practices
42

SVG in APEX: Best Practices - doag.org · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

Oct 11, 2019

Download

Documents

dariahiddleston
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: SVG in APEX: Best Practices - doag.org · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

SVG in APEX: Best Practices

Page 2: SVG in APEX: Best Practices - doag.org · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

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 · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

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 · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

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 · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

Basics

Page 6: SVG in APEX: Best Practices - doag.org · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

Basics

Page 7: SVG in APEX: Best Practices - doag.org · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

Basics

Page 8: SVG in APEX: Best Practices - doag.org · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

Basics

Page 9: SVG in APEX: Best Practices - doag.org · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

Basics

Page 10: SVG in APEX: Best Practices - doag.org · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

Basis

Page 11: SVG in APEX: Best Practices - doag.org · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

Raphaël withbackground images

Page 12: SVG in APEX: Best Practices - doag.org · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

Raphaël withbackground images

Page 13: SVG in APEX: Best Practices - doag.org · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

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 · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

Raphaël withbackground images

Page 15: SVG in APEX: Best Practices - doag.org · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

Raphaël withbackground images

Page 16: SVG in APEX: Best Practices - doag.org · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

Raphaël withbackground images

Page 17: SVG in APEX: Best Practices - doag.org · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

Raphaël withbackground images

Page 18: SVG in APEX: Best Practices - doag.org · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

Raphaël withbackground images

Page 19: SVG in APEX: Best Practices - doag.org · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

Mapael using Maps

Page 20: SVG in APEX: Best Practices - doag.org · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

Mapael using Maps

Page 21: SVG in APEX: Best Practices - doag.org · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

Mapael using Maps

Page 22: SVG in APEX: Best Practices - doag.org · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

Mapael using Maps

Page 23: SVG in APEX: Best Practices - doag.org · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

Mapael using Maps

Page 24: SVG in APEX: Best Practices - doag.org · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

Raphaël and SVG file

Page 25: SVG in APEX: Best Practices - doag.org · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

Raphaël and SVG file

Page 26: SVG in APEX: Best Practices - doag.org · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

Raphaël and SVG file

Page 27: SVG in APEX: Best Practices - doag.org · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

Raphaël and SVG file

Page 28: SVG in APEX: Best Practices - doag.org · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

Raphaël and SVG file

Page 29: SVG in APEX: Best Practices - doag.org · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

Raphaël and SVG file

Page 30: SVG in APEX: Best Practices - doag.org · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

Raphaël and SVG file

Page 31: SVG in APEX: Best Practices - doag.org · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

Raphaël and SVG file

Page 32: SVG in APEX: Best Practices - doag.org · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

Raphaël and SVG file

Page 33: SVG in APEX: Best Practices - doag.org · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

Raphaël and SVG file

Page 34: SVG in APEX: Best Practices - doag.org · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

Raphaël and SVG file

Page 35: SVG in APEX: Best Practices - doag.org · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

Raphaël and SVG file

Page 36: SVG in APEX: Best Practices - doag.org · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

Raphaël and SVG file

Page 37: SVG in APEX: Best Practices - doag.org · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

SVGJS and SVG file

Page 38: SVG in APEX: Best Practices - doag.org · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

SVGJS and SVG file

Page 39: SVG in APEX: Best Practices - doag.org · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

SVGJS and SVG file

Page 40: SVG in APEX: Best Practices - doag.org · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

SVGJS and SVG file

Page 41: SVG in APEX: Best Practices - doag.org · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

SVGJS and SVG file

Page 42: SVG in APEX: Best Practices - doag.org · Inkscape) INKSCAPE Oran {free(g. NEWS Features COMMUNITY LEARN CONTRIBUTE Search DEVELOP SUPPORT US ABOUT Eisvogelby Prudentity Overview

SVGJS and SVG file