►
From YouTube: Spice up your Power Apps with SVGs
Description
In this 18-minute citizen developer-focused demo, Robin Rosengrün shows that with a few lines of code that includes an SVG text string, you can add an embedded interactive graphic into your Power Apps. See six different levels of SVG integration – from simply inserting an image, to adding a SVG to the Power Apps Image Control, animating a SVG, using Concat ( ) for interactive maps and charts (clicking on an SVG to get information from an element), and finally to dragging and dropping capabilities. This PnP Community demo is taken from the Microsoft Power Apps community call – February 2022, recorded on February 16, 2022.
Demo Presenter: Robin Rosengrün (EnBW)
Supporting documents:
• Learn - General SVG tutorial | https://www.w3schools.com/graphics/svg_intro.asp
• Learn - Robin's YouTube-channel R2Power (SVG playlist) | https://www.youtube.com/playlist?list=PLg6uTpKJegTO4hrD04btCSFm6XCEC9LXU
• Repo - Robin's FunWithSVGs | https://github.com/PowerRobin/FunWithSVGs
• Demo - Select SVG PCF on PCF gallery | https://pcf.gallery/select-svg/
Stay connected:
• Twitter https://twitter.com/microsoft365dev
• YouTube https://aka.ms/m365pnp/videos
• Blogs https://aka.ms/m365pnp/community/blog
• Call attention to your great work by using #PowerAppsCC and #PnPWeekly on Twitter.
A
I
want
us
just
to
look
at
the
app
and
we're
gonna
jump
from
a
back
and
forth
from
the
editor
to
the
published
version,
because
pcf
components
actually
don't
don't
work
in
the
editor.
So
we
need
to
jump
back
and
forth
to
to
look
at
the
code.
So,
first
of
all
welcome
and
thanks
for
the
opportunity
to
to
be
here.
I
have
a
topic
that
I
really
really
love
and
it's
svgs
and
power
apps
because
they
spice
up
every
app
a
little
bit.
A
You
probably
shouldn't
use
them
as
much
as
I
used
in
this
app,
but
here
and
there
like
a
little
chart
or
something
that
is
animated,
really
and
spices
up
your
app
a
lot
and
helps
a
lot,
and
I
want
to
really
feel
or
get
a
good
impression
what
they
can
do
for
for
your
apps.
So
we
do
it
all
in
this
app
and
the
app
is
downloaded
downloadable
in
my
github,
with
all
the
data
and
inside
the
app.
So
I
think
todd
will
share
this
source
in
the
end.
A
So
if
you
like
it,
you
can
download
it,
and
I
separated
this
whole
stuff
in
six
levels
and
we're
adding
another
layer,
another
layer
and
another
layer
of
what
you
can
do
with
svgs.
And
then
you
can
yeah
start
exploring
them
yourself.
Afterwards,
first
of
all,
a
little
bit
about
me
and
this
our
first
level
just
integrating
a
svg
image
that
is
uploaded
to
your
app
in
an
image
control
really
easy
way.
You
probably
all
have
done
it
before
this
is
the
company.
A
In
my
free
time,
making
youtube
videos
and
the
second
level
is
using
svg
source
code
in
an
image,
control
and
making
the
power
app
controls,
changing
something
in
that
source
code
and
will
look
a
lot
at
that
and
the
third
level
you've
probably
seen
right
here,
is
adding
a
layer
of
animation
in
that
svg
source
code.
So
this
is
not
done
by
a
timer
control,
but
in
svg
it's
much
easier
and
better
to
do
so.
We
have
a
look
at
that
and
the
next
layer.
A
The
next
level,
will
be
using
a
really
boring
command
the
concat
command.
I
don't
know
how
often
you
use
it
and
if
you
think
it
is
exciting
when
you
use
it
with
svgs,
it
is
because
it
allows
us
to
create
maps,
charts
animations
much
much
more
and
yeah.
If
this
hasn't
been
enough,
then
what
we
were
doing
in
the
last
minutes
was
giving
information
into
an
image.
But
of
course,
in
a
normal
power,
app
control,
it
isn't
possible
to
get
information
back
from
your
image
control.
A
A
Who
does
exactly
that
spent
my
whole
holidays,
I'm
working
on
this
component,
because
now
you
can
click
on
stuff
in
your
svgs
and
get
information
of
the
element
that
we
you
were
clicking
on,
and
the
pcf
I'm
working
on
right
now
and
has
even
more
stuff
it
can
do,
because
it
can,
for
example,
add
drag
and
drop
functionality
to
power
apps,
which
is
something
that
is
really
painfully
missing
in
power,
apps
and
yeah.
I
think
I
found
a
way
to
get
it
working
on
a
level
you
can.
A
A
We
can
see
the
difference
when
we
zoom
in
really
closely
in
the
png
image.
You
see
it.
It
consists
of
different
pixels
and
if
you
zoom
in
too
close,
then
you
see
the
single
pixels
in
an
svg
pixel.
If
your
monitor
is
good
enough,
you
will
never
never
see
a
single
picture
because
you
give
information
in
and
not
pixel
by
pixel,
but
you
tell
the
computer
how
your
image
is
constructed,
so
you
tell
them
where
a
line
starts
where
line
ends
where
there
are
curves
in
the
line
and
which
colors
it
has.
A
A
This
is
an
image
control,
because
it's
named
I'm
an
image
control
and
normally
you
put
something
in
there
that
is
in
your
media
uploaded.
So
you
say
logo,
and
then
it
puts
my
logo
up
there
or
my
my
thumbnail
and
but
you
can
also
say
to
powerapps
yeah.
I
want
to
put
svg
source
code
in
there.
Svg
source
code
is
a
lot
like
html
code.
It's
also
xml
based,
but
we
say
it's
a
different
xml
namespace,
it's
the
svg
namespace
and
we
use
this
header
and
then
powerapps.
A
Now
knows
how
to
interpret
it
and
displays
images
and
let's,
let's
take
a
look
at
a
few
lines
of
code.
Of
course
you
have
to
know
your
ins
and
outs
how
to
write
the
code,
but
it's
actually
really
easy
to
read,
because
we
can
see
here.
This
is
a
rectangle,
has,
has
a
width
of
of
20
pixels
and
is
filled
wide
and
has
a
stroke
of
red.
A
B
A
Altered
by
my
slider
right
here
and
let's
take
a
look-
how
this
works
can
make
our
circle
bigger
and
smaller
and,
as
you
saw
just
one
line
of
code,
really
easy
to
use,
we
can
do
the
same
for
for
different
stuff
and,
of
course,
for
different
properties
and
use
the
whole
svg
code
right
here
and
we
can
get
even
more
complex
shapes.
So
we
can
get
a
whole
dinosaur
in
right
here.
We
take
a
look
at
that
in
a
second
and
some
rotation
for
good
measure.
A
I
don't
know
how
how
all
of
this
works,
because
basically
you're
copying
the
code
somewhere
from
the
internet,
and
this
dinosaur
actually
is
a
rip
off
from
powerpoint,
because
powerpoint
icons
are
a
great
source
for
for
svg
images.
Yeah,
let's
get
a
little
bit
more
creative
with
this.
So
when
we
are
can
load
our
dinosaur
again,
choose
a
color
load,
a
comet
turn
on
epic
effects.
I
didn't
share
my
sound
sound
launch.
The
comment-
and
this
is
all
just
with
powerapps
controls-
there's
right
now.
There
is
no
there's
no
animation
on
svg
level
right
here.
A
A
So
this
is
the
moving
left
to
right,
part
and
again
really
easy
to
to
write
it's
just
four
lines
of
codes,
and
it's
really
easy
to
to
read
as
well,
because
every
everybody
of
you
will
get
what
this
does.
This
translates
from
x
position,
200
to
1,
800
and
back
to
200,
and
here
we
are
changing
the
speed
where
this
works,
and
here
we
can
select
some
other
animation
and
every
energy
animation.
A
C
And
then
I
I
thought
it
was
really
funny
how
you
talked
about
the
animation
on
twitter
and
you
are
so
I
thought
yeah.
I
think,
that's
where
you
put
it
and
you
said
you
could
fit
the
animation
code
in
the
course
of
a
twitter
tweet.
That's
how
small
it
is
and
easy.
I
thought
that
was
a
great
point
to
make.
B
A
Of
course,
we
can
do
lots
and
lots
of
strings
and
put
it
together.
So
I
have
a
collection
right
here.
Let's
take
a
look
at
it
and
inside
of
the
collection,
there's
what
you
saw
in
the
path
from
dinosaur
earlier.
So
it's
coordinates
for
path
element
and
just
drop
it
in
here
and
repeat
that
for
all
the
16
states
of
of
germany.
And
then
we
say
they
all
have
the
same,
fill
color,
stroke,
width
and
stroke.
A
And
then
we
have
a
map
of
germany
in
one
in
just
one
line
of
code
and
we
can
do
even
more
crazy
stuff
with
it
and
turn
it
into
a
chart
because
using
the
animation
again-
and
this
is
just
a
map-
not
that
much
of
code-
and
we
just
because
we
know
in
the
collection
which
is
the
population
yeah
divided
by
the
maximum
population
and
then
change
the
opacity.
Based
on
that
and
with.
B
A
A
youtube
video
there
you
can,
where
you
can
turn
every
shape
file
into
an
svg
file
and
then
use
it
in
in
powerapps,
really
easy
stuff
and
free
shape
files
are
everywhere.
Shapefiles
of
everything
that
you
can
that
you
can
think
of
like
different
states
or
rivers,
cities,
everything
you
can
find
everything
and
yeah
this
another
chart,
another
concave
command
the
same
collection,
but
just
displaying
the
labels
displaying
a
rectangle
which
changes
the
size
based
on
their
population
again
and
using
the
same
colors
as
here.
A
So,
as
I
said
in
the
beginning,
we
were
all
the
time
passing
information
to
the
image
control,
but
the
user
experience
really
gets
better
if
we
can
get
information
out
of
the
out
of
the
out
of
the
map
or
out
of
the
svg
and
yeah.
This
is
where
my
pcf
really
comes
in
handy
because
you
all
need
you
all
know
the
concept
of
cascading
drop
downs.
A
When
I
select
like
my
home
state-
and
this
is
where
I
live-
but
if
we
do
it,
the
other
way
around
can
just
select
it
on
the
map
and
it's
much
faster,
much
more
intuitive
for
for
the
user
and
what
is
happening
here.
The
pcf
actually
just
gives
out
very
little
information
and
we
have
a
perfect
synergy
between
power,
apps
and
the
the
pcf,
because
all
this
pcf
gives
out
is
the
tooltip.
A
A
We
get
a
little
bit
more
funky
and
I'm
still
working
on
that
pcf,
it's
not
quite
quite
there
yet,
but
we'll
come
to
live
in
a
few
weeks
where
we
actually
again,
we
get
really
little
information
out
of
it,
but
we
can
do
great
stuff
with
it
with
a
little
bit
of
creativity
and
we
can,
as
you
saw
in
the
beginning,
can
drag
and
drop
stuff
and
then
we
we
drop
it
and
then
again
in
powerapps.
We
are
looking
for
the
nearest
city.
A
The
thing
that
my
pcf
tells
to
the
app
is
just:
where
did
I
start
to
drag
the
object
and
where
does
the
drag
end
and
then
in
powerapps
we
are
calculating.
We
have
a
list
of
cities
right
here,
we're
calculating,
which
is
the
nearest
city
and
and
can
drop
it
there
again-
and
I
did
a
little
debug
right
here,
and
this
is
all
that
the
pcf
is
giving
back
to
to
powerapps
and
we
can
use
it
for
other
stuff.
A
We
can
select
graphically
select
stuff
again,
the
the
rectangle
is
inside
the
pcf,
but
then
again
we
are
calculating
stuff
in
our
app
and
changing
the
svg
image.
Highlighting
the
cities
that
are
marked
and
can
do
whatever
we
want
with
that,
and
I
think
this
has
some
great
potential
for
all
the
guys
of
you.
I
know
you're
doing
trying
to
get
a
games
games
going
in
power.
F
has
lots
of
potential
potential
for
that,
and
even
for
for
serious
use
cases,
I
have
a
few
resources
for
you.
A
I
think
todd
will
show
them
in
a
minute
where
you
can
find
the
presentation
where
you
can
find
my
youtube
channel,
where
I
have
hours
of
videos
about
svgs
and
hope.
I
sparked
your
interest
in
that
topic
and
make
your
make
your
apps
a
little
bit
more
interesting,
more
colorful
and
more
interactive
for
the
people
that
work
with
them.
Yeah
thanks
for
listening.
That's
it
for
my
presentations.
C
C
One
right
here
at
the
end
really
blew
my
mind.
That's
amazing,
very
cool,
so
you've
been
working
on.
I
I'm
just
always
amazed
like
how
everyone
can
find
some
way
to
extend
powerapps
in
a
way
we
haven't
seen
like
every
month.
Somebody's
like
oh,
look
what
I
can
do
with
it.
This
is
just
another
awesome
example
of
that.
C
A
Well,
the
most
important
thing
will
be
my
my
five-year-old
daughter
wants
an
app
for
for
her
birthday
where
she
can
drag
and
drop
a
unicorn
through
a
castle
or
something
along
the
way
I
have
wait,
I
can
I
can
hold
it
in
the
in
the
camera.
I
have
a
sketch.
Actually
what
the
app
should
look
like,
don't
yeah.
I
see
it.