svg-art

SVG アート：プログラムによる生成

Python スクリプトを使って、高品質な SVG グラフィックを生成します。すべてのスクリプトは、有効な SVG を標準出力（または -o を使ってファイル）に出力します。

利用可能なスクリプト

スクリプト	目的	主なオプション
generate_grid.py	グリッドパターン	--cols、--rows、--shape、--vary-*
generate_radial.py	放射状／らせん状／サンバースト	--spiral、--concentric、--sunburst
generate_fractal.py	フラクタル（tree、koch、sierpinski）	--tree、--koch、--sierpinski、--depth
generate_wave.py	波形とオーディオビジュアライゼーション	--layers、--noise、--bars
generate_particles.py	散布／クラスター／星座	--cluster、--gradient、--constellation
generate_chart.py	データの可視化	--bar、--line、--pie、--donut
generate_icon.py	一般的な UI アイコン	--icon NAME、--list、--filled
optimize_svg.py	SVG の圧縮／最適化	--aggressive、--stats

クイック例

# Grid with size variation
python scripts/generate_grid.py -c 6 -r 6 --vary-size --vary-opacity -o grid.svg

# Spiral pattern
python scripts/generate_radial.py --spiral -n 60 --turns 4 -o spiral.svg

# Fractal tree
python scripts/generate_fractal.py --tree --depth 8 --vary-angle -o tree.svg

# Layered waves with fill
python scripts/generate_wave.py --layers 5 --fill -o waves.svg

# Constellation network
python scripts/generate_particles.py --constellation -n 30 --connect-distance 25 -o network.svg

# Bar chart
python scripts/generate_chart.py --bar --data "30,50,80,45,90" --labels "A,B,C,D,E" -o chart.svg

# Heart icon
python scripts/generate_icon.py --icon heart --filled --stroke "#E11D48" -o heart.svg

# Optimize existing SVG
python scripts/optimize_svg.py input.svg --aggressive -o output.svg

スクリプトの使用パターン

グリッドパターン

python scripts/generate_grid.py \
  -c 8 -r 8           # columns and rows
  -s 10 -g 2          # size and gap
  --shape circle      # rect, circle, or diamond
  --vary-size         # random size variation
  --vary-opacity      # random opacity
  --vary-hue          # color variation
  --seed 42           # reproducible randomness

放射状パターン

# Concentric rings
python scripts/generate_radial.py --concentric --rings 5 --vary-hue

# Sunburst rays
python scripts/generate_radial.py --sunburst -n 24 --vary-length

フラクタル

# Koch snowflake
python scripts/generate_fractal.py --koch --depth 4 --fill "#3B82F6"

# Sierpinski triangle
python scripts/generate_fractal.py --sierpinski --depth 5

チャート

# Line chart with points
python scripts/generate_chart.py --line --data "10,30,20,50" --show-points --smooth

# Donut chart
python scripts/generate_chart.py --donut --data "40,30,20,10" --labels "A,B,C,D"

アイコン

# List all available icons
python scripts/generate_icon.py --list

# Common icons: check, x, plus, menu, search, home, user, settings,
# mail, heart, star, play, file, download, edit, share, sun, moon, etc.

共通オプション（すべてのスクリプト）

• --fill COLOR：塗りつぶし色（デフォルト：#3B82F6）
• --stroke COLOR：線の色
• --stroke-width N：線幅
• --seed N：再現性を確保するための乱数シード
• -o FILE：標準出力ではなくファイルに出力

パイプと合成

スクリプトをパイプでつなげられます：

# Generate and optimize
python scripts/generate_grid.py -c 10 -r 10 | python scripts/optimize_svg.py --aggressive

# Check optimization stats
python scripts/generate_fractal.py --tree --depth 10 | python scripts/optimize_svg.py --stats

SVG の基礎リファレンス

references/svg-fundamentals.md を参照してください。内容は次のとおりです。

• SVG の基本構造と viewBox
• 要素の種類（rect、circle、path など）
• パスコマンドの構文
• グラデーションとパターン
• アクセシビリティ要件