User:Alexander the Drake/Templates

My freely reusable SVG templates

Coats of Arms

Use these to define clipping paths over the regular design. Layer accordingly to create borders, if desired.

Narrow Shield

• Narrow Shield Base, (300x350y)

<clipPath id="narrow-base">
<path
	d="M 150,350
	A 400,400 0 0,0 300,50
	V 0 H 0 V 50
	A 400,400 0 0,0 150,350" />
	</clipPath>

• Narrow Shield Field with Thin Border, (300x350y)

<clipPath id="narrow-thin">
<path
	d="M 150,346
	A 400,400 0 0,0 297.5,50
	V 2.5 H 2.5 V 50
	A 400,400 0 0,0 150,346" />
	</clipPath>

• Narrow Shield Field with Thick Border, (300x500y)

<path id="narrow-thick"
	d="M 150,335
	A 400,400 0 0,0 290,50
	V 10 H 10 V 50
	A 400,400 0 0,0 150,335" />
	</clipPath>

Round-Based Shield

• Round-Based Shield Base, (300x350y)

<clipPath id="round-base">
<path
	d="M 0,200 V 0 H 300 V 200
	A 150,150 0 0,1 0,200" />
	</clipPath>

• Round-Based Shield Field with Thin Border, (300x350y)

<clipPath id="round-thin">
<path
	d="M 2.5,210 V 2.5 H 297.5 V 210
	A 148,150 0 0,1 2.5,210" />
	</clipPath>

• Round-Based Shield Field with Medium Border, (300x350y)

<clipPath id="round-medium">
<path
	d="M 5,215 V 5 H 295 V 215
	A 146,148 0 0,1 5,215" />
	</clipPath>

Flags

Stripe Patterns

Horizontal

• 2 Equal-Sized Stripes, 3:2 (450x300y)

<?xml version="1.0"?>
<svg width="450" height="300"
	xmlns="http://www.w3.org/2000/svg">
<rect fill=""
	width="225" height="300" />
<rect x="225" fill=""
	width="225" height="300" />
</svg>

Vertical

• 2 Equal-Sized Stripes, 3:2 (450x300y)

<?xml version="1.0"?>
<svg width="450" height="300"
	xmlns="http://www.w3.org/2000/svg">
<rect fill=""
	width="225" height="300" />
<rect x="225" fill=""
	width="225" height="300" />
</svg>

• 3 Equal-Sized Stripes in 2 Colours, 3:2 (450x300y)

<?xml version="1.0"?>
<svg width="450" height="300"
	xmlns="http://www.w3.org/2000/svg">
<rect fill=""
	width="450" height="300" />
<rect y="100" fill=""
	width="450" height="100" />
</svg>

• 3 Equal-Sized Stripes in 3 Colours, 3:2 (450x300y)

?xml version="1.0"?>
<svg width="450" height="300"
	xmlns="http://www.w3.org/2000/svg">
<rect fill=""
	width="450" height="100" />
<rect y="100" fill=""
	width="450" height="100" />
<rect y="200" fill=""
	width="450" height="100" />
</svg>

• 4 Equal-Sized Stripes in 2 Colours, 3:2 (450x300y)

<?xml version="1.0"?>
<svg width="450" height="300"
	xmlns="http://www.w3.org/2000/svg">
<rect fill=""
	width="450" height="300" />
<rect y="75" fill=""
	width="450" height="75" />
<rect y="225" fill=""
	width="450" height="75" />
</svg>

• 4 Equal-Sized Stripes in 4 Colours, 3:2 (450x300y)

<?xml version="1.0"?>
<svg width="450" height="300"
	xmlns="http://www.w3.org/2000/svg">
<rect fill=""
	width="450" height="75" />
<rect y="75" fill=""
	width="450" height="75" />
<rect y="150" fill=""
	width="450" height="75" />
<rect y="225" fill=""
	width="450" height="75" />
</svg>

Geometric Patterns

Block Patterns

• 4 Equal-Sized Blocks in 2 Colours, 3:2 (450x300y)

<?xml version="1.0"?>
<svg width="450" height="300"
	xmlns="http://www.w3.org/2000/svg">
<rect width="450" height="300"
	fill="" />
<rect x="225" fill=""
	width="225" height="150" />
<rect y="150" fill=""
	width="225" height="150" />
</svg>

• 4 Equal-Sized Blocks in 4 Colours, 3:2 (450x300y)

<?xml version="1.0"?>
<svg width="450" height="300"
	xmlns="http://www.w3.org/2000/svg">
<rect width="225" height="150"
	fill="" />
<rect x="225" fill=""
	width="225" height="150" />
<rect y="150" fill=""
	width="225" height="150" />
<rect x="225" y="150" fill=""
	width="225" height="150" />
</svg>