# Combine SVG Vertical

A script to combine two SVG files vertically with automatic centering and configurable spacing.

## Purpose

This tool is designed for preparing multi-part logos for 3D printing by:
- Placing an icon/logo above text
- Automatically centering the smaller element
- Adding configurable spacing between elements
- Maintaining proper dimensions for STL conversion

## Usage

```bash
python combine_svg_vertical.py <top_svg> <bottom_svg> <output_svg> [options]
```

### Arguments

- `top` - Top SVG file (e.g., icon or logo)
- `bottom` - Bottom SVG file (e.g., text)
- `output` - Output combined SVG file

### Options

- `--spacing, -s` - Vertical spacing between elements in pixels (default: 20)
- `--margin, -m` - Margin around entire composition in pixels (default: 10)

## Examples

### Basic Usage (Underground Magnetics Logo)
```bash
python combine_svg_vertical.py um_grey.svg um_black.svg underground-magnetics-combined.svg
```

**Result:**
- Grey "UM" icon (413×390) centered above black text (3070×233)
- 20px spacing between icon and text
- 10px margin around composition
- Final canvas: 3090×663px

### Custom Spacing
```bash
# Larger spacing between elements
python combine_svg_vertical.py icon.svg text.svg combined.svg --spacing 50

# Larger margin around composition
python combine_svg_vertical.py icon.svg text.svg combined.svg --margin 30

# Both custom
python combine_svg_vertical.py icon.svg text.svg combined.svg -s 40 -m 20
```

## How It Works

1. **Load SVGs** - Reads dimensions from viewBox or width/height attributes
2. **Calculate Layout** - Determines positioning based on:
   - Maximum width of both elements
   - Combined height + spacing
   - Centering offsets for smaller element
3. **Create Groups** - Wraps each SVG in a `<g>` group with transform
4. **Combine** - Creates new SVG canvas with both elements positioned

## Output Structure

```xml
<svg width="..." height="..." viewBox="...">
  <!-- Combined: top.svg (top) + bottom.svg (bottom) -->
  <g id="top" transform="translate(x_offset, y_offset)">
    <!-- All elements from top SVG -->
  </g>
  <g id="bottom" transform="translate(x_offset, y_offset)">
    <!-- All elements from bottom SVG -->
  </g>
</svg>
```

## Integration with 3D Workflow

After combining SVGs, you can convert to STL:

```bash
# Convert combined logo to 3D model
python svg_logo_to_stl.py underground-magnetics-combined.svg um_logo \
  --width-mm 100 \
  --base-thickness 1.5 \
  --feature-height 2.5
```

This will create a single 3D model with both the icon and text at the same height (not stacked vertically in 3D, just in the 2D layout).

## Tips

- **Spacing**: Use `--spacing` to adjust the gap between icon and text
  - Small spacing (10-20): Compact look
  - Medium spacing (20-40): Balanced (default)
  - Large spacing (50+): Separated elements

- **Margin**: Use `--margin` to add breathing room around the entire composition
  - Useful when the combined SVG will be cropped or bounded

- **Order Matters**: The first argument is always placed on top
  - Icon above text: `combine_svg_vertical.py icon.svg text.svg ...`
  - Text above icon: `combine_svg_vertical.py text.svg icon.svg ...`

## File Size

The combined SVG file size is approximately the sum of the input files:
- um_grey.svg: 728B
- um_black.svg: 6.1KB
- **Combined**: 7.0KB