Is there a way to create a custom shape using RADDiagram based on a composite SVG (i.e. one having multiple PATHs and FILLs)? I am creating a graphical workflow builder utility and would like to have a palette of detailed, multi-color objects for users to work with.I have attached a sample image of one of these objects whose SVG code is as follows:
<
svg
xmlns
=
"http://www.w3.org/2000/svg"
width
=
"54.7"
height
=
"54.7"
viewBox
=
"0 0 54.7 54.7"
>
<
circle
cx
=
"27.4"
cy
=
"27.4"
r
=
"27.4"
fill
=
"#33b5aa"
/>
<
rect
x
=
"10.3"
y
=
"18.9"
width
=
"34.1"
height
=
"25.53"
fill
=
"#fff"
/>
<
rect
x
=
"10.3"
y
=
"12.5"
width
=
"34.1"
height
=
"6.39"
fill
=
"#dc4f71"
/>
<
rect
x
=
"16.5"
y
=
"10.3"
width
=
"2.7"
height
=
"4.33"
fill
=
"#fff"
/>
<
rect
x
=
"35.6"
y
=
"10.3"
width
=
"2.7"
height
=
"4.33"
fill
=
"#fff"
/>
<
rect
x
=
"14"
y
=
"24.4"
width
=
"5.3"
height
=
"5.33"
fill
=
"none"
stroke
=
"#dc4f71"
stroke-miterlimit
=
"10"
stroke-width
=
"0.75"
/>
<
rect
x
=
"19.4"
y
=
"24.4"
width
=
"5.3"
height
=
"5.33"
fill
=
"none"
stroke
=
"#dc4f71"
stroke-miterlimit
=
"10"
stroke-width
=
"0.75"
/>
<
rect
x
=
"24.7"
y
=
"24.4"
width
=
"5.3"
height
=
"5.33"
fill
=
"none"
stroke
=
"#dc4f71"
stroke-miterlimit
=
"10"
stroke-width
=
"0.75"
/>
<
rect
x
=
"30"
y
=
"24.4"
width
=
"5.3"
height
=
"5.33"
fill
=
"none"
stroke
=
"#dc4f71"
stroke-miterlimit
=
"10"
stroke-width
=
"0.75"
/>
<
rect
x
=
"35.4"
y
=
"24.4"
width
=
"5.3"
height
=
"5.33"
fill
=
"none"
stroke
=
"#dc4f71"
stroke-miterlimit
=
"10"
stroke-width
=
"0.75"
/>
<
rect
x
=
"14"
y
=
"29.8"
width
=
"5.3"
height
=
"5.33"
fill
=
"none"
stroke
=
"#dc4f71"
stroke-miterlimit
=
"10"
stroke-width
=
"0.75"
/>
<
rect
x
=
"19.4"
y
=
"29.8"
width
=
"5.3"
height
=
"5.33"
fill
=
"none"
stroke
=
"#dc4f71"
stroke-miterlimit
=
"10"
stroke-width
=
"0.75"
/>
<
rect
x
=
"24.7"
y
=
"29.8"
width
=
"5.3"
height
=
"5.33"
fill
=
"none"
stroke
=
"#dc4f71"
stroke-miterlimit
=
"10"
stroke-width
=
"0.75"
/>
<
rect
x
=
"30"
y
=
"29.8"
width
=
"5.3"
height
=
"5.33"
fill
=
"none"
stroke
=
"#dc4f71"
stroke-miterlimit
=
"10"
stroke-width
=
"0.75"
/>
<
rect
x
=
"35.4"
y
=
"29.8"
width
=
"5.3"
height
=
"5.33"
fill
=
"none"
stroke
=
"#dc4f71"
stroke-miterlimit
=
"10"
stroke-width
=
"0.75"
/>
<
rect
x
=
"14"
y
=
"35.1"
width
=
"5.3"
height
=
"5.33"
fill
=
"none"
stroke
=
"#dc4f71"
stroke-miterlimit
=
"10"
stroke-width
=
"0.75"
/>
<
rect
x
=
"19.4"
y
=
"35.1"
width
=
"5.3"
height
=
"5.33"
fill
=
"none"
stroke
=
"#dc4f71"
stroke-miterlimit
=
"10"
stroke-width
=
"0.75"
/>
<
rect
x
=
"24.7"
y
=
"35.1"
width
=
"5.3"
height
=
"5.33"
fill
=
"none"
stroke
=
"#dc4f71"
stroke-miterlimit
=
"10"
stroke-width
=
"0.75"
/>
<
rect
x
=
"30"
y
=
"35.1"
width
=
"5.3"
height
=
"5.33"
fill
=
"none"
stroke
=
"#dc4f71"
stroke-miterlimit
=
"10"
stroke-width
=
"0.75"
/>
<
rect
x
=
"35.4"
y
=
"35.1"
width
=
"5.3"
height
=
"5.33"
fill
=
"none"
stroke
=
"#dc4f71"
stroke-miterlimit
=
"10"
stroke-width
=
"0.75"
/>
<
circle
cx
=
"38.4"
cy
=
"40.4"
r
=
"7.4"
fill
=
"#dc4f71"
/>
<
path
d
=
"M41.9,38.8c-.2-.2-.3-.2-.5,0l-4.1,4.1-1.9-2a.3.3,0,0,0-.4.4l2.1,2.1h.2c.1,0,.2,0,.2-.1s.1,0,.1-.1l4.3-4.2C42,39,42,38.9,41.9,38.8Z"
fill
=
"#fff"
/>
</
svg
>
If it makes things easier, the above code can be simplified to just PATHs if that helps:
<
svg
xmlns
=
"http://www.w3.org/2000/svg"
width
=
"54.7"
height
=
"54.7"
viewBox
=
"0 0 54.7 54.7"
>
<
path
d
=
"M27.4,0A27.4,27.4,0,1,1,0,27.4,27.3,27.3,0,0,1,27.4,0Z"
fill
=
"#33b5aa"
/>
<
path
d
=
"M10.3,18.9H44.4V44.4H10.3Z"
fill
=
"#fff"
/>
<
path
d
=
"M10.3,12.5H44.4v6.4H10.3Z"
fill
=
"#dc4f71"
/>
<
path
d
=
"M16.5,10.3h2.7v4.3H16.5Z"
fill
=
"#fff"
/>
<
path
d
=
"M35.6,10.3h2.6v4.3H35.6Z"
fill
=
"#fff"
/>
<
path
d
=
"M14,24.4h5.4v5.4H14Z"
fill
=
"none"
stroke
=
"#dc4f71"
stroke-miterlimit
=
"10"
stroke-width
=
"0.75"
/>
<
path
d
=
"M19.4,24.4h5.3v5.4H19.4Z"
fill
=
"none"
stroke
=
"#dc4f71"
stroke-miterlimit
=
"10"
stroke-width
=
"0.75"
/>
<
path
d
=
"M24.7,24.4H30v5.4H24.7Z"
fill
=
"none"
stroke
=
"#dc4f71"
stroke-miterlimit
=
"10"
stroke-width
=
"0.75"
/>
<
path
d
=
"M30,24.4h5.4v5.4H30Z"
fill
=
"none"
stroke
=
"#dc4f71"
stroke-miterlimit
=
"10"
stroke-width
=
"0.75"
/>
<
path
d
=
"M35.4,24.4h5.3v5.4H35.4Z"
fill
=
"none"
stroke
=
"#dc4f71"
stroke-miterlimit
=
"10"
stroke-width
=
"0.75"
/>
<
path
d
=
"M14,29.8h5.4v5.3H14Z"
fill
=
"none"
stroke
=
"#dc4f71"
stroke-miterlimit
=
"10"
stroke-width
=
"0.75"
/>
<
path
d
=
"M19.4,29.8h5.3v5.3H19.4Z"
fill
=
"none"
stroke
=
"#dc4f71"
stroke-miterlimit
=
"10"
stroke-width
=
"0.75"
/>
<
path
d
=
"M24.7,29.8H30v5.3H24.7Z"
fill
=
"none"
stroke
=
"#dc4f71"
stroke-miterlimit
=
"10"
stroke-width
=
"0.75"
/>
<
path
d
=
"M30,29.8h5.4v5.3H30Z"
fill
=
"none"
stroke
=
"#dc4f71"
stroke-miterlimit
=
"10"
stroke-width
=
"0.75"
/>
<
path
d
=
"M35.4,29.8h5.3v5.3H35.4Z"
fill
=
"none"
stroke
=
"#dc4f71"
stroke-miterlimit
=
"10"
stroke-width
=
"0.75"
/>
<
path
d
=
"M14,35.1h5.4v5.3H14Z"
fill
=
"none"
stroke
=
"#dc4f71"
stroke-miterlimit
=
"10"
stroke-width
=
"0.75"
/>
<
path
d
=
"M19.4,35.1h5.3v5.3H19.4Z"
fill
=
"none"
stroke
=
"#dc4f71"
stroke-miterlimit
=
"10"
stroke-width
=
"0.75"
/>
<
path
d
=
"M24.7,35.1H30v5.3H24.7Z"
fill
=
"none"
stroke
=
"#dc4f71"
stroke-miterlimit
=
"10"
stroke-width
=
"0.75"
/>
<
path
d
=
"M30,35.1h5.4v5.3H30Z"
fill
=
"none"
stroke
=
"#dc4f71"
stroke-miterlimit
=
"10"
stroke-width
=
"0.75"
/>
<
path
d
=
"M35.4,35.1h5.3v5.3H35.4Z"
fill
=
"none"
stroke
=
"#dc4f71"
stroke-miterlimit
=
"10"
stroke-width
=
"0.75"
/>
<
path
d
=
"M31.2,38.7a7.4,7.4,0,1,1,5.5,9A7.4,7.4,0,0,1,31.2,38.7Z"
fill
=
"#dc4f71"
/>
<
path
d
=
"M41.9,39.2l-4.3,4.2c0,.1,0,.1-.1.1s-.1.1-.2.1h-.2L35,41.3a.3.3,0,0,1,.4-.4l1.9,2,4.1-4.1c.2-.2.3-.2.5,0S42,39,41.9,39.2Z"
fill
=
"#fff"
/>
</
svg
>
Thanks.