Post History

## SVG has very limited »layout« capabilities
Element positioning is mainly based on explicit absolute or relative positioning of geometry elements such as `<path>`, `<circle>`, `<rect>` etc.  

SVG has **no element distribution** concepts like `flex`, `grid` or even `margin` 

In other words all elements are stacked on top of each other – we can't »push« any sibling elements based on a margin – we don't have something like a HTML content flow concept for adjacent elements.  

### Apply CSS to parent SVG
However, the outmost/root `svg` also responds to CSS rules that are ignored by child elements.

From your example, you probably expect your SVG to get some »padding« 
Provided, your SVG is appended to your DOM you apply a `padding` and the background color to the root SVG like so:  

```CSS
style="padding:50px; background:rgba(255,0,0,0.8); border:5px solid #000"
```

``` 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 442 442" style="padding:50px; background:rgba(255,0,0,0.8); border:5px solid #000">
<path d="M105.4 221c0 9.39-7.61 17-17 17h-34c-9.39 0-17-7.61-17-17l0 0c0-9.39 7.61-17 17-17h34c9.39 0 17 7.61 17 17l0 0zm0-108.8c0-9.39-7.61-17-17-17h-34c-9.39 0-17 7.61-17 17l0 0c0 9.39 7.61 17 17 17h34c9.39 0 17-7.61 17-17l0 0zm0 217.6c0-9.39-7.61-17-17-17h-34c-9.39 0-17 7.61-17 17l0 0c0 9.39 7.61 17 17 17h34c9.39 0 17-7.61 17-17l0 0zm299.2-275.4v333.2c0 30.04-24.36 54.4-54.4 54.4h-238c-30.04 0-54.4-24.36-54.4-54.4v-27.2h30.6c16.87 0 30.6-13.73 30.6-30.6s-13.73-30.6-30.6-30.6h-30.6v-47.6h30.6c16.87 0 30.6-13.73 30.6-30.6s-13.73-30.6-30.6-30.6h-30.6v-47.6h30.6c16.87 0 30.6-13.73 30.6-30.6s-13.73-30.6-30.6-30.6h-30.6v-27.2c0-30.04 24.36-54.4 54.4-54.4h238c30.04 0 54.4 24.36 54.4 54.4zm-215.66 106.85c0 28.97 23.49 52.46 52.46 52.46s52.45-23.49 52.45-52.46-23.48-52.45-52.45-52.45-52.46 23.49-52.46 52.45zm134.06 128.23c0-32.18-26.1-58.28-58.28-58.28h-46.63c-32.19 0-58.29 26.1-58.29 58.28v23.32h163.2v-23.32z"/>
</svg>
```

### ViewBox adjustments

If your SVG should be self contained e.g for usage in an `<img>` element you should prefer to adjust the [`viewBox`](https://developer.mozilla.org/de/docs/Web/SVG/Reference/Attribute/viewBox) itself.  

Simplified explanation: think of the `viewBox` as your document or artboard area (the latter term is more common in graphic applications) 
The last 2 values define width and height while the first ones x/y offsets. If you've ever worked with graphic applications like Adobe Illustrator you might be familiar with the idea of a theoretically infinite design area where you can move elements »off-canvas« so outside the visible document area.

We adjust the viewBox values like so: 
```
viewBox="-50 -50 542 542" 
```
1. add 2x50 units to width and height - the equivalent to a 50px padding/margin
2. `-50`for x/y to move the viewBox 50 to the left and 50 to bottom respectively 

```
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -50 542 542" style="background:rgba(255,0,0,0.8); border:5px solid #000" >
<path d="M105.4 221c0 9.39-7.61 17-17 17h-34c-9.39 0-17-7.61-17-17l0 0c0-9.39 7.61-17 17-17h34c9.39 0 17 7.61 17 17l0 0zm0-108.8c0-9.39-7.61-17-17-17h-34c-9.39 0-17 7.61-17 17l0 0c0 9.39 7.61 17 17 17h34c9.39 0 17-7.61 17-17l0 0zm0 217.6c0-9.39-7.61-17-17-17h-34c-9.39 0-17 7.61-17 17l0 0c0 9.39 7.61 17 17 17h34c9.39 0 17-7.61 17-17l0 0zm299.2-275.4v333.2c0 30.04-24.36 54.4-54.4 54.4h-238c-30.04 0-54.4-24.36-54.4-54.4v-27.2h30.6c16.87 0 30.6-13.73 30.6-30.6s-13.73-30.6-30.6-30.6h-30.6v-47.6h30.6c16.87 0 30.6-13.73 30.6-30.6s-13.73-30.6-30.6-30.6h-30.6v-47.6h30.6c16.87 0 30.6-13.73 30.6-30.6s-13.73-30.6-30.6-30.6h-30.6v-27.2c0-30.04 24.36-54.4 54.4-54.4h238c30.04 0 54.4 24.36 54.4 54.4zm-215.66 106.85c0 28.97 23.49 52.46 52.46 52.46s52.45-23.49 52.45-52.46-23.48-52.45-52.45-52.45-52.46 23.49-52.46 52.45zm134.06 128.23c0-32.18-26.1-58.28-58.28-58.28h-46.63c-32.19 0-58.29 26.1-58.29 58.28v23.32h163.2v-23.32z"/>
</svg>
```

See [codepen example](https://codepen.io/herrstrietzel/pen/GgqWqgX)