stoke alignment

by kthornbloom

HTML

<h1>
  Stroke Options
</h1>
<table>
    <tr>
        <td>Square</td>
        <td>To Outside</td>
        <td>To Middle</td>
        <td>To Inside</td>
    </tr>
    <tr>
        <td><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<path d="M2,6v20h28V6H2z M4,24V10.5l12,12l12-12V24H4z M4.3,8h23.3L16,19.7L4.3,8z"/>
</svg></td>
        <td><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<path d="M27,6H5C3.3,6,2,7.3,2,9v14c0,1.7,1.3,3,3,3h22c1.7,0,3-1.3,3-3V9C30,7.3,28.7,6,27,6z M5,8h22c0.5,0,1,0.5,1,1v0.5
	L16.7,20.7C16.5,20.9,16.3,21,16,21s-0.5-0.1-0.7-0.3L4,9.5V9C4,8.5,4.5,8,5,8z M27,24H5c-0.5,0-1-0.5-1-1V12.3l9.9,9.9
	c0.6,0.6,1.3,0.9,2.1,0.9s1.6-0.3,2.1-0.9l9.9-9.9V23C28,23.5,27.5,24,27,24z"/>
</svg></td>
        <td><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<path d="M27,6H5C3.3,6,2,7.3,2,9v14c0,1.7,1.3,3,3,3h22c1.7,0,3-1.3,3-3V9C30,7.3,28.7,6,27,6z M5,8h22c0.6,0,1,0.4,1,1v0L16,21L4,9
	v0C4,8.4,4.4,8,5,8z M27,24H5c-0.6,0-1-0.4-1-1V11.9l10.6,10.6C15,22.8,15.5,23,16,23s1-0.2,1.4-0.6L28,11.9V23
	C28,23.6,27.6,24,27,24z"/>
</svg></td>
        <td><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<path d="M28,6H4C2.9,6,2,6.9,2,8v16c0,1.1,0.9,2,2,2h24c1.1,0,2-0.9,2-2V8C30,6.9,29.1,6,28,6z M27.6,8L16,19.6L4.4,8H27.6z M4,24
	V10.5l11.3,11.3c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3L28,10.5V24H4z"/>
</svg>
</td>
    </tr>
</table>

CSS

body {
  font-family:sans-serif;
  color:#444;
  font-size:12px;
}

h1 {
  font-size:2em;
  line-height:1em;
  margin:1em;
}
svg {
  width:160px;
  fill: #555;
}

td {
  text-align:center;
  padding:10px;
  border:1px solid #ccc;
}