DrawingML Shapes OpenXML 29500

1. Shape Properties & Effects
DrawingML

2. Shape Overview
spTree
nvGrpSpPr grpSpPr sp
nvSpPr spPr
style txBody
xfrm geo
fillProperties lineProperties
effectProperties scene3D
sp3D bwMode
The file covers
these areas

3. Fill Properties
• One of:
– <a:noFill>
– <a:solidFill> (Solid Fill)
– <a:gradFill> (Gradient Fill)
– <a:blipFill> (Blip Fill)
– <a:pattFill> (Pattern Fill)
– <a:grpFill> (Group Fill)
• Subsets of fills used in different locations
– Example: Line Fills don’t permit blipFill or grpFill
Solid Fill
Gradient Fill
Blip Fill
Pattern Fill
Shape 1 Shape 2

4. Solid Fills
<a:solidFill>
• Specifies a single color
• Determined by color
model
Solid Fill

5. Color Models
• scrgbClr
– R,G,B values specified in 0-100%
• srgbClr
– R,G,B values specified as 2 hex digits
• hslClr
– Hue, Sat, Lum
– Uses perceptual gamma of 2.2
• sysClr
– System Colors
• schemeClr
– Theme Colors
• prstClr
– Preset Color

6. Color Transforms
• Each Color Model represents a single color
• Possible to apply Color Transform to modify a color
• Example in context of Solid Fill
Alpha modifies base RGB
color with a transparency

7. Color Transforms
• <a:tint>
– Lighter Version of Color, 10% tint is 10% input color with 90% white
• <a:shade>
– Darker Version of Color, 10% shade is 10% input color with 90% black
• <a:comp>
– Complement of Color
• <a:inv>
– Inverse of Color
• <a:gray>
– Yields grayscale of color
• <a:alpha> (alphaOff, alphaMod)
– Color with specified opacity
• <a:hue> (hueOff, hueMod)
• <a:sat> (satOff, satMod)
• <a:lum> (lumOff, lumMod)
• <a:red> (redOff, redMod)
• <a:green> (greenOff, greenMod)
• <a:blue> (blueOff, blueMod)
xxxOff (Offset)
A 10% offset increases a
50% xxx to 60%
xxxMod (Modulate)
A 200% xxxModulate
makes a color twice as xxx
as before

8. Gradient Fills
<a:gradFill>
• Consists of
– Gradient Stop List
• List of locations/colors
• “pos” specified as % (e.g.
69000 = 69%)
• Standard Color Model
– Shade Properties
– Attributes
• “flip” - Whether/how to flip a
tile region when using it to fill a
larger fill region
– “none”
– “x”
– “y”
– “xy”
• “rotWithShape” (boolean) –
Whether fill rotates with shape
Gradient Stop List
Gradient Fill

9. Shade Properties
• Specifies kind of gradient
fill
• Linear <a:lin>
– Two attributes
– “ang” (Angle measured clockwise,
Direction of color change)
– “scaled” (Boolean true/false, Does
gradient angle scale with fill
region?)
• Path <a:path>
– Gradient follows defined path
– Easiest to understand by example
– <a:fillToRect> (optional)
• Used to define focus rectangle for center
shade
– “path” attribute
• “shape”
• “circle”
• “rect”
Shade Properties
Linear
Examples for Path on
next slide

10. ShapeRectCircle
Shade Properties - Path
<a:path>

11. Blip Fills
<a:blipFill>
• BLIP (Binary Large Image
or Picture)
• Consists of
– Blip Reference
• Attributes
• “r:embed” (Embedded Ref Id)
• “r:link” (Linked Ref Id)
– <a:srcRect> Source Rect
• For Cropped Pictures -
Specifies rect of portion to use
– Fill Mode Properties
– Attributes
• “dpi” - Dots per inch used to
calc size of BLIP. If not
present, DPI in blip used.
• “rotWithShape” - Specifies if fill
rotates with shape
Blip Fill

12. Blip Reference
<a:blip>
• Consists of
– Blip Reference
• Attributes
• “r:embed” (Embedded Ref Id)
• “r:link” (Linked Ref Id)
– Blip Effects
• Alpha{BiLevel, Ceiling, Floor, Inv, Mod,
ModFix, Repl)
• biLevel
• Blur
• clrChange
• clrRepl
• Duotone
• fillOverlay
• Grayscl
• Hsl
• Lum
• Tint
– Compression
• Specify Level of compression
• “email”, “screen”, “print”, “hqprint”, “none”

13. Fill Mode Properties
• <a:tile>
– Tiles Picture to fill Shape
– Attributes
• Tx,ty (additional horiz/vertical
offset after alignment)
• Sx,sy (amount to horiz/vertical
scale srcRect)
• Flip
• Algn (where to align first tile
with respect to shape)
• <a:stretch>
– fillRect (relative to path
bounds, srcRect scaled to fit
this rect)

14. Pattern Fills
<a:pattFill>
• Legacy for O11
• Consists of
– <a:fgColor> Foreground Color
– <a:bgColor> Background Color
– <a:prst> Preset Pattern Value
• “pct{5, 10, 20, 25, 30, 40, 50, 60,
70, 75, 80, 90}
• “horiz, “vert”
• “lt{Horiz, Vert}”
• Dk{Horiz, Vert}”
• Nar{Horiz, Vert}”
• <many more options>

15. Group Fills
<a:grpFill>
• Inherit Fill properties from
the group
• No attributes, no subtags

16. Line Properties
<a:ln>
• Consists of:
– Line Fill Properties
– Line Dash Properties
– Line Join Properties
– headEnd/tailEnd
– Attributes
• “w” line width
• “cap” line ends
• “cmpd” compound line type
• “algn” pen alignment
• Note that lines properties apply to shapes
– Not just for definition of line segments

17. Line Fill Properties
• A subset of general Fill Properties:
– <a:noFill>
– <a:solidFill> (Solid Fill)
– <a:gradFill> (Gradient Fill)
– <a:blipFill> (Blip Fill)
– <a:pattFill> (Pattern Fill)
– <a:grpFill> (Group Fill)
Solid Fill
Gradient Fill
Pattern Fill

18. Line Dash Properties
• Dash Properties defined as Presets or Dash Stop
Lists
• <a:prstDash> (Presets)
– Solid
– Dot
– Dash
– lgDash
– dashDot
– lgDashDot
– lgDashDotDot
– sysDash
– sysDot
– sysDashDot
– sysDashDotDot
• <a:custDash> (Dash Stop List)

19. Dash Stop Lists
<a:custDash>
• Legacy O11
• List of <a:ds>
• <a:ds> (Dash Stop) consists of:
– Attributes
• “d” length of dash relative to line width
• “sp” length of space relative to line width

20. Line Join Properties
• One of:
– <a:round>
– <a:bevel>
– <a:miter>
• Attributes
– “lim” (limits the amount by which lines can be extended to form a join)
– Potential case of nearly parallel lines
Round Bevel Miter
Notice edges of rectangles to illustrate line join behavior

21. Head/Tail End Properties
<a:headEnd>
<a:tailEnd>
• Default is none
• Attributes
– “type”
• None
• Triangle
• Stealth
• Diamond
• Oval
• arrow
– “w” [one of “sm”, “med”, “lg”]
• Width of line end to width of line
– “len” [one of “sm”, “med”, “lg”]
• Length of end % of line width
Head End
Tail End

22. Line Attributes
– Attributes
• “w” line width
• “cap” line ends
– “rnd” (round)
– “sq” (square)
– “flat”
• “cmpd” compound line type
– sng (simple)
– dbl (double)
– thickThin
– ThinThick
– tri
• “algn” pen alignment

23. Effects List
<a:effectLst>
• List of effects
– Each added
onto another
• List may contain
– <a:blur>
– <a:fillOverlay>
– <a:glow>
– <a:innerShdw>
– <a:outerShdw>
– <a:prstShdw>
– <a:reflection>
– <a:softEdge>

24. Blur Effect
<a:blur>
• All color channels, including alpha affected
– Attributes
• “rad” radius of blur
• “grow” (boolean) should bounds grow when blurring

25. Shadow Effects (Inner Shadow)
<a:innerShdw>
• Contains
– Color Choice (i.e. Color Model)
• Attributes
– “blurRad” blur radius
– “dist” how far to offset the shadow
– “dir” direction to offset the shadow
Inner Shadow

26. Shadow Effects (Outer)
<a:outerShdw>
• Contains
– Color Choice (i.e. Color Model)
• Attributes
– “blurRad” blur radius
– “dist” how far to offset the shadow
– “dir” direction to offset the shadow
– “sx”, “sy” horiz/vert scale factors
– “kx”, “ky” horiz/vert skew angles
– “algn” shadow alignment
• Alignment happens first
• Effectively sets origin for scale, skew,
offset
– “rotWithShape” (boolean)
• Rotate shadow with shape
Outer Shadow

27. Preset Shadows
<a:prstShdw>
• Contains
– Color Choice (i.e. Color Model)
• Attributes
– “prst”
• “Shdw1”
• “Shdw2”
• …
• “Shdw19”
• “Shdw20”
– “dist” Distance to offset shadow
– “dir” Direction to offset shadow

28. Reflection Effect
<a:reflection>
• Attributes
– “blurRad” Blur Radius
– “stA” (Start Alpha) starting reflection opacity
– “stPos” start position along gradient ramp of start alpha value
– “endA” (End Alpha) ending reflection opacity
– “endPos” end position along gradient
ramp of end alpha value
– “dist” how far to offset reflection
– “dir” Direction to offset reflection
– “fadeDir” direction of alpha gradient
ramp relative to shape itself
– “sx”, “sy” horiz/vert scale factors
– “kx”, “ky” horiz/vert skew angles
– “algn” reflection alignment
– “rotWithShape” (boolean)
• Rotate reflection with shape
Reflection Effect

29. Soft Edge Effect
<a:softEdge>
• Attributes
– “rad” radius of blur to apply to
edges
Soft Edge Effect

30. Glow Effect
<a:glow>
• Attributes
– “rad” radius of blur to apply to
edges
Soft Edge Effect

31. Fill Overlay Effect
<a:filloverlay>
• Consists of
– Fill Property
• Attributes
– “blend” Blend Mode
• How to Blend Fill with base Effect
• “over” Overlay
• “mult” Multiply
• “screen”
• “darken”
• “lighten”

32. Disclaimer
This presentation is for informational purposes only, and
should not be relied upon as a substitute or replacement for
Microsoft formal file format documentation, which is
available at the following
website: https://msdn.microsoft.com/en-
us/library/cc313118(v=office.12).aspx. Any views or
opinions presented in this material are solely those of the
author and do not necessarily represent those of
Microsoft. Microsoft disclaims all liability for mistakes or
inaccuracies in this presentation.