a:spPr (Shape Properties)

Specifies visual and geometric properties for DrawingML shapes, including position, size, geometry, fill, line, and effects.

Parent elements

Child elements

Description

a:spPr (Shape Properties) is the comprehensive visual formatting container for DrawingML shapes. It is defined in ECMA-376 Part 1 §20.1.2.5.2 and encapsulates all geometric, positional, fill, outline, and effect properties for a shape.

Purpose and Scope

Shape properties control:

Geometry — Shape outline and form (rectangle, circle, arrow, etc.)
Position and Size — 2D transform (x, y, width, height, rotation, flip)
Fill — Interior color, gradient, pattern, or transparency
Outline — Border style, width, color, dash pattern
Effects — Shadow, glow, reflection, soft edge, blur, extrusion, bevel
Rendering Mode — Black/white mode for printing

Rendering Order

Properties are applied in this order during rendering:

Geometry — Determine shape outline and path
Fill — Paint interior with solid, gradient, or pattern
Outline — Draw border with specified line properties
Effects — Apply shadow, glow, and other post-processing effects

Integration with Shapes

a:spPr appears in:

Shapes (a:sp) — Standard drawing shapes
Connection Shapes (a:cxnSp) — Lines and connectors
Pictures (a:pic) — Images with frames
Group Shapes (a:grpSp) — Grouped objects
Placeholders — In presentation templates

Content Model

a:spPr (attributes)
├─ a:xfrm (2D Transform, 0–1)
│  ├─ a:off (offset: x, y)
│  └─ a:ext (extents: width, height)
├─ a:prstGeom (Preset Geometry, 0–1)
├─ a:custGeom (Custom Geometry, 0–1)
├─ a:ln (Line/Outline, 0–1)
├─ Fill (one of, 0–1)
│  ├─ a:solidFill
│  ├─ a:gradFill
│  ├─ a:pattFill
│  ├─ a:grpFill
│  └─ a:noFill
├─ a:effectLst (Effects, 0–1)
├─ a:effectDag (Effect DAG, 0–1)
├─ a:scene3d (3D Scene, 0–1)
├─ a:sp3d (3D Shape, 0–1)
└─ a:extLst (Extension List, 0–1)

Attributes

Attribute	Type	Values	Default	Description
`bwMode`	Enum	`auto`, `black`, `white`, `clr`	`auto`	Black-and-white rendering mode for printing. `auto` = normal, `black` = render as black, `white` = render as white, `clr` = force color.

Child Elements

Element	Occurrence	Purpose
`a:xfrm`	0–1	2D transform: position (x, y), size (width, height), rotation, flip.
`a:prstGeom`	0–1	Preset geometry: rectangle, circle, arrow, callout, flow chart, etc. (100+ types).
`a:custGeom`	0–1	Custom geometry: user-defined path from coordinates and curves.
`a:ln`	0–1	Line/outline: width, color, dash pattern, end caps, joins.
`a:solidFill`	0–1	Solid fill: single color with optional transparency.
`a:gradFill`	0–1	Gradient fill: linear or radial gradient with color stops.
`a:pattFill`	0–1	Pattern fill: predefined pattern (checkerboard, stripe, etc.).
`a:grpFill`	0–1	Group fill: inherit parent group’s fill.
`a:noFill`	0–1	No fill: shape is transparent/hollow.
`a:effectLst`	0–1	Effects: shadow, glow, reflection, soft edge, blur, etc.
`a:scene3d`	0–1	3D scene: camera, light rig, and ambient light properties.
`a:sp3d`	0–1	3D shape: extrusion, bevel, depth, and material properties.

Examples

Simple Rectangle with Solid Fill and Outline

<a:spPr>
  <a:xfrm>
    <a:off x="914400" y="914400"/>
    <a:ext cx="2743200" cy="1371600"/>
  </a:xfrm>
  <a:prstGeom prst="rect">
    <a:avLst/>
  </a:prstGeom>
  <a:solidFill>
    <a:srgbClr val="4472C4"/>
  </a:solidFill>
  <a:ln w="25400">
    <a:solidFill>
      <a:srgbClr val="000000"/>
    </a:solidFill>
  </a:ln>
</a:spPr>

var spPr = new ShapeProperties();

// Transform: position and size
var xfrm = new Transform2D();
xfrm.Append(new Offset { X = 914400, Y = 914400 });    // 1" x 1" position
xfrm.Append(new Extents { Cx = 2743200, Cy = 1371600 }); // 3" x 1.5" size
spPr.Append(xfrm);

// Geometry: rectangle
var prstGeom = new PresetGeometry { Preset = ShapeTypeValues.Rectangle };
prstGeom.Append(new AdjustValueList());
spPr.Append(prstGeom);

// Fill: solid blue
var solidFill = new SolidFill(new RgbColorModelHex { Val = "4472C4" });
spPr.Append(solidFill);

// Outline: 2pt black line
var ln = new Outline { Width = 25400 };
var lnFill = new SolidFill(new RgbColorModelHex { Val = "000000" });
ln.Append(lnFill);
spPr.Append(ln);

Circle with Gradient Fill

<a:spPr>
  <a:xfrm>
    <a:off x="1371600" y="914400"/>
    <a:ext cx="1828800" cy="1828800"/>
  </a:xfrm>
  <a:prstGeom prst="ellipse">
    <a:avLst/>
  </a:prstGeom>
  <a:gradFill>
    <a:gsLst>
      <a:gs pos="0">
        <a:srgbClr val="FF6B6B"/>
      </a:gs>
      <a:gs pos="100000">
        <a:srgbClr val="FFD93D"/>
      </a:gs>
    </a:gsLst>
    <a:lin ang="2700000" scaled="1"/>
  </a:gradFill>
  <a:ln w="12700">
    <a:solidFill><a:srgbClr val="2D3436"/></a:solidFill>
  </a:ln>
</a:spPr>

var spPr = new ShapeProperties();

// Transform: position and size (square for circle)
var xfrm = new Transform2D();
xfrm.Append(new Offset { X = 1371600, Y = 914400 });
xfrm.Append(new Extents { Cx = 1828800, Cy = 1828800 });  // 2" x 2" circle
spPr.Append(xfrm);

// Geometry: ellipse (circle)
var prstGeom = new PresetGeometry { Preset = ShapeTypeValues.Ellipse };
prstGeom.Append(new AdjustValueList());
spPr.Append(prstGeom);

// Fill: gradient from red to yellow
var gradFill = new GradientFill();
var gsLst = new GradientStopList();
gsLst.Append(new GradientStop { Position = 0 }
  .Append(new RgbColorModelHex { Val = "FF6B6B" }));
gsLst.Append(new GradientStop { Position = 100000 }
  .Append(new RgbColorModelHex { Val = "FFD93D" }));
gradFill.Append(gsLst);
var lin = new LinearGradientFill { Angle = 2700000, Scaled = true };
gradFill.Append(lin);
spPr.Append(gradFill);

// Outline: thin dark line
var outline = new Outline { Width = 12700 };
outline.Append(new SolidFill(new RgbColorModelHex { Val = "2D3436" }));
spPr.Append(outline);

Arrow with Effects (Shadow + Glow)

<a:spPr>
  <a:xfrm>
    <a:off x="914400" y="914400"/>
    <a:ext cx="2286000" cy="1143000"/>
  </a:xfrm>
  <a:prstGeom prst="rtTriangle">
    <a:avLst/>
  </a:prstGeom>
  <a:solidFill>
    <a:srgbClr val="4472C4"/>
  </a:solidFill>
  <a:effectLst>
    <a:outerShdw blurRad="50800" dist="38100" dir="2700000" algn="tl" rotWithShape="0">
      <a:srgbClr val="000000">
        <a:alpha val="75000"/>
      </a:srgbClr>
    </a:outerShdw>
    <a:glow rad="76200">
      <a:srgbClr val="4472C4">
        <a:alpha val="100000"/>
      </a:srgbClr>
    </a:glow>
  </a:effectLst>
</a:spPr>

var spPr = new ShapeProperties();

// Transform
var xfrm = new Transform2D();
xfrm.Append(new Offset { X = 914400, Y = 914400 });
xfrm.Append(new Extents { Cx = 2286000, Cy = 1143000 });
spPr.Append(xfrm);

// Geometry: triangle (arrow-like)
var prstGeom = new PresetGeometry { Preset = ShapeTypeValues.RightTriangle };
prstGeom.Append(new AdjustValueList());
spPr.Append(prstGeom);

// Fill: blue
spPr.Append(new SolidFill(new RgbColorModelHex { Val = "4472C4" }));

// Effects: shadow and glow
var effectLst = new EffectList();

var shadow = new OuterShadow 
{ 
  BlurRadius = 50800, 
  Distance = 38100, 
  Direction = 2700000, 
  Alignment = RectangleAlignmentValues.TopLeft 
};
shadow.Append(new RgbColorModelHex { Val = "000000" }
  .Append(new Alpha { Val = 75000 }));
effectLst.Append(shadow);

var glow = new Glow { Radius = 76200 };
glow.Append(new RgbColorModelHex { Val = "4472C4" }
  .Append(new Alpha { Val = 100000 }));
effectLst.Append(glow);

spPr.Append(effectLst);

Rotated Rectangle with No Fill (Hollow/Transparent)

<a:spPr>
  <a:xfrm rot="5400000" flipH="0" flipV="0">
    <a:off x="914400" y="914400"/>
    <a:ext cx="1828800" cy="914400"/>
  </a:xfrm>
  <a:prstGeom prst="rect">
    <a:avLst/>
  </a:prstGeom>
  <a:noFill/>
  <a:ln w="38100">
    <a:solidFill><a:srgbClr val="70AD47"/></a:solidFill>
    <a:prstDash val="dash"/>
  </a:ln>
</a:spPr>

var spPr = new ShapeProperties();

// Transform: rotated 45°
var xfrm = new Transform2D { Rotation = 5400000 };  // 45 degrees
xfrm.Append(new Offset { X = 914400, Y = 914400 });
xfrm.Append(new Extents { Cx = 1828800, Cy = 914400 });
spPr.Append(xfrm);

// Geometry: rectangle
var prstGeom = new PresetGeometry { Preset = ShapeTypeValues.Rectangle };
prstGeom.Append(new AdjustValueList());
spPr.Append(prstGeom);

// No fill: transparent interior
spPr.Append(new NoFill());

// Outline: dashed green line
var outline = new Outline { Width = 38100 };
outline.Append(new SolidFill(new RgbColorModelHex { Val = "70AD47" }));
outline.Append(new PresetDashStyle { Val = PresetDashValues.Dash });
spPr.Append(outline);

Complex Shape: Flowchart Decision Diamond with Pattern Fill

<a:spPr>
  <a:xfrm>
    <a:off x="1371600" y="914400"/>
    <a:ext cx="1371600" cy="1371600"/>
  </a:xfrm>
  <a:prstGeom prst="diamond">
    <a:avLst/>
  </a:prstGeom>
  <a:pattFill prst="dnDnDnDn">
    <a:fgClr><a:srgbClr val="4472C4"/></a:fgClr>
    <a:bgClr><a:srgbClr val="E7E6E6"/></a:bgClr>
  </a:pattFill>
  <a:ln w="25400">
    <a:solidFill><a:srgbClr val="000000"/></a:solidFill>
    <a:prstDash val="solid"/>
  </a:ln>
</a:spPr>

var spPr = new ShapeProperties();

// Transform
var xfrm = new Transform2D();
xfrm.Append(new Offset { X = 1371600, Y = 914400 });
xfrm.Append(new Extents { Cx = 1371600, Cy = 1371600 });
spPr.Append(xfrm);

// Geometry: diamond (flowchart)
var prstGeom = new PresetGeometry { Preset = ShapeTypeValues.Diamond };
prstGeom.Append(new AdjustValueList());
spPr.Append(prstGeom);

// Fill: pattern (checkerboard)
var pattFill = new PatternFillProperties { Pattern = PatternValues.DownwardDiagonal };
pattFill.Append(new ForegroundColor(new RgbColorModelHex { Val = "4472C4" }));
pattFill.Append(new BackgroundColor(new RgbColorModelHex { Val = "E7E6E6" }));
spPr.Append(pattFill);

// Outline: solid black
var outline = new Outline { Width = 25400 };
outline.Append(new SolidFill(new RgbColorModelHex { Val = "000000" }));
spPr.Append(outline);

Preset Geometry Types

Preset	Name	Use Case
`rect`	Rectangle	Standard boxes, buttons, frames
`ellipse`	Ellipse/Circle	Circles, ovals, badges
`triangle`	Triangle	Bullets, arrows, warnings
`rtTriangle`	Right Triangle	Directional indicators
`diamond`	Diamond	Flowchart decision nodes
`star5`	5-Point Star	Ratings, highlights
`heart`	Heart	Special callouts, favorites
`hexagon`	Hexagon	Badges, labels
`octagon`	Octagon	Stop signs, warnings
`trapezoid`	Trapezoid	Flowchart process
`parallelogram`	Parallelogram	Flowchart input/output
`pentagon`	Pentagon	Labels, badges
`callout1`	Callout (rectangular)	Comments, annotations
`callout2`	Callout (rounded)	Dialogue bubbles
`flowChartTerminator`	Flowchart Terminator	Start/end nodes
`flowChartProcess`	Flowchart Process	Process boxes
`flowChartDecision`	Flowchart Decision	Decision diamonds

Position and Size Units (EMU)

Value	Inches	Centimeters	Points
914400	1.0”	2.54cm	72pt
457200	0.5”	1.27cm	36pt
228600	0.25”	0.635cm	18pt
1828800	2.0”	5.08cm	144pt

Fill Types and Properties

Fill Type	Purpose	Key Properties
Solid Fill	Single color with optional transparency	Color, alpha
Gradient Fill	Color transition (linear or radial)	Gradient stops, angle/scale
Pattern Fill	Predefined checkerboard, stripe, dots	Foreground/background color, pattern type
Group Fill	Inherit parent group’s fill	(inherits automatically)
No Fill	Transparent/hollow shape	(none)

Outline (Line) Properties

Property	Controls	Typical Values
Width	Line thickness in EMU	12700 (1pt) to 127000 (10pt)
Color	Line color (solid, theme, scheme)	RGB hex, theme color, scheme color
Dash	Dash pattern	solid, dash, dot, dashDot, lgDash, sysDot
Cap	Line end style	flat, rnd (round), sq (square)
Join	Corner style	round, bevel, miter
Arrow	Arrow heads on ends	Triangle, stealth, open, etc.

Effects Reference

Effect	Purpose	Common Attributes
Shadow	Drop shadow behind shape	blurRad, dist, dir, algn, rotWithShape
Glow	Glowing aura around shape	rad (radius), color, alpha
Reflection	Mirror reflection below	blurRad, dist, dir, algn, rotWithShape
Soft Edge	Soft/blurred edges	rad (blur radius)
3D Extrusion	3D depth effect	dist, dir, prst (preset depth)

Rotation Reference (in 60,000ths of degree)

Degrees	Value	Notes
0°	0	No rotation
45°	5400000	Diamond orientation
90°	5400000	Vertical
180°	10800000	Upside down
270°	16200000	Rotated 3/4

Notes

Element Relationships

Parents (container elements for shape properties):
- a:sp (shape): General 2D or 3D shape (rectangle, circle, star, callout, etc.)
- a:cxnSp (connection shape): Connector line between shapes with optional text.
- a:pic (picture): Image or embedded graphic object.
- a:grpSp (group shape): Collection of shapes with group-level formatting.
Children (optional visual/geometric elements):
- Transform: a:xfrm (position, size, rotation—typically required)
- Geometry: a:prstGeom (preset) or a:custGeom (custom)
- Fill: a:solidFill, a:gradFill, a:pattFill, a:grpFill (zero or one)
- Stroke: a:ln (outline/border)
- Effects: a:effectLst (shadow, glow, reflection, etc.)

General Notes

Central Formatting Hub: Shape properties is the master container for all visual and geometric attributes of a shape. Every shape must have at least one a:spPr.
Content Model: Only one fill type (solidFill, gradFill, pattFill, grpFill, noFill) can be active; the first encountered is used.
2D Transform Required: The a:xfrm child controls position, size, and rotation. If omitted, shape defaults to origin (0,0) with minimal size.
Geometry Selection: Either preset (a:prstGeom) or custom (a:custGeom) geometry must be specified. Determines shape outline and interior region.
Position Units: All x, y coordinates and dimensions are in EMU (English Metric Units); 914400 EMU = 1 inch.
Fill Hierarchy: Fill options include solid color, gradient, pattern, or none. Only one fill type can be active; the first valid fill is used.
Outline Optional: Line properties (a:ln) control stroke width, color, dash style, and line caps. Omitted line means no stroke.
Effects Stacking: Multiple effects (a:effectLst) can be applied: shadow, glow, reflection, soft edge, etc. Effects render in the order listed.
Compatibility: Shape properties structure is used across PresentationML (slide shapes), DrawingML, and SpreadsheetML (chart elements).