SVGの描画領域

## ビューポート
図形を描画する領域のサイズです。
一番外側のsvgタグのwidth、heightで指定します。
(svgタグにposition:absoluteやposition:fixedが指定されていればpositionが優先されます)

### ビューポートの単位
長さの単位は em, ex, px, pt, pc, cm, mm, in, %を利用できます。
単位を省略した場合はpxになります。

## ビューボックス
### viewBox属性
SVGの描画領域の定義に使います。
viewBoxで指定できる値は4つです。
```viewBox="x, y, width, height"```(カンマか、半角スペースで区切る)

|値|内容|
|---|---|
|x|左からのx座標の位置|
|y|上からのy座標の位置|
|width|ビューポートの幅|
|height|ビューポートの高さ|

## ビューポートとビューボックス
特別に理由が無ければビューポートとビューボックスのwidth, heightは揃えておいた方が扱いやすいです。
svgタグにwidth,height属性を指定せずviewBox属性のみを指定した場合、viewBoxのwidthとheightを、ビューポートのwidth、heightとして扱います。

```:svg
<svg width="400" height="400" viewBox="0, 0, 400, 400" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50" fill="blue" />
</svg>
```

## preserveAspectRatio
### preserveAspectRatio属性

```:svg
preserveAspectRatio="align [meet|slice]"
```

svgタグには、何も指定しなくてもデフォルトで、```preserveAspectRatio="xMidYMid meet"```が指定されています。

### preserveAspectRatioの値

|値|内容|
|---|---|
|xMinYMin|要素のviewBoxのxとviewportの最小のX値を揃える<br>要素のviewBoxのyとviewportの最小のY値を揃える|
|xMidYMin|要素のviewBoxの中間点のX値とviewportの中間点のX値を揃える<br>要素のviewBoxのyとviewportの最小のY値を揃える|
|xMaxYMin|要素のviewBoxのx+widthとviewportの最大のX値を揃える<br>要素のviewBoxのyとviewportの最小のY値を揃える|
|xMinYMid|要素のviewBoxのxとviewportの最小のX値を揃える<br>要素のviewBoxの中間点のY値とviewportの中間点のY値を揃える|
|xMidYMid(デフォルト)|要素のviewBoxの中間点のX値とviewportの中間点のX値を揃える<br>要素のviewBoxの中間点のY値とviewportの中間点のY値を揃える|
|xMaxYMid|要素のviewBoxのx+widthとviewportの最大のX値を揃える<br>要素のviewBoxの中間点のY値とviewportの中間点のY値を揃える|
|xMinYMax|要素のviewBoxのxとviewportの最小のX値を揃える<br>要素のviewBoxのy+heightとviewportの最大のY値を揃える|
|xMidYMax|要素のviewBoxの中間点のX値とviewportの中間点のX値を揃える<br>要素のviewBoxのy+heightとviewportの最大のY値を揃える|
|xMaxYMax|要素のviewBoxのx+widthとviewportの最大のX値を揃える<br>要素のviewBoxのy+heightとviewportの最大のY値を揃える|
|none|不均等にスケーリングし、ビューボックスをビューポートの四角形に一致させる<br>オプションは無視される|





### preserveAspectRatioのオプション

|値|内容|
|---|---|
|meet(デフォルト)|ビューポートとビューボックスの幅と高さを大きい方に合わせる(viewboxはviewport内に収まる)|
|slice|ビューポートとビューボックスの幅と高さの小さい方に合わせる(viewboxがviewportからはみ出す場合がある)|



## 描画範囲の設定例
サンプル画像について

- 2つの円は半径50、中心点はそれぞれ(0,0)、(400,200)
- オレンジの四角はviewBoxのwidth、heightの指定と同じの幅と高さ
   
   
   
### ビューポートとビューボックスの幅と高さが同じ場合

||width|height|
|---|---|---|
|ビューポート|400|200|
|ビューボックス|400|200|


ビューポートとビューボックスの幅と高さが同じなのでビューボックスの範囲がビューポートと一致します。
ビューポートの左上と右下を中心にした円が1/4だけ描画されています。
![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451263/841ec205-c28a-e355-377a-ffa0f108b5dc.png)

```:svg
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 0 400 200">
  <rect x="0" y="0" width="400" height="200" fill="#e67e22" stroke="#EA2027" stroke-width="8px"/>
  <circle cx="0" cy="0" r="50" fill="#333"/>
  <circle cx="400" cy="200" r="50" fill="#888000"/>
</svg>
```

左上の円が完全に描画されるように、viewBoxの中心点を-50,-50に指定(円の半径が50pxのため)すると左上の円は全体が表示されましたが、右下の円は範囲外になり表示されなくなりました。

![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451263/c9336d42-84f8-cd1a-9e6f-63d895aa5252.png)


```:svg
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="-50 -50 400 200">
  <rect x="-50" y="-50" width="400" height="200"  fill="#e67e22" stroke="#EA2027" stroke-width="8px"/>
  <circle cx="0" cy="0" r="50" fill="#333"/>
  <circle cx="400" cy="200" r="50" fill="#888000"/>
</svg>
```
     
### ビューポートとビューボックスの数値は異なるが縦横比が同じ場合
     
#### ビューボックスの幅と高さがビューポートの倍の場合
||width|height|
|---|---|---|
|ビューポート|400|200|
|ビューボックス|800|400|
ビューポートとビューボックスのサイズが等しい場合の4倍が描画範囲になります。

![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451263/bf654e3c-6915-5d98-b22a-40125751ef81.png)


```:svg
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 0 800 400">
  <rect x="0" y="0" width="800" height="400"  fill="#e67e22" stroke="#EA2027" stroke-width="8px"/>
  <circle cx="0" cy="0" r="50" fill="#333"/>
  <circle cx="400" cy="200" r="50" fill="#888000"/>
</svg>
```

#### ビューボックスの幅と高さがビューポートの半分の場合
||width|height|
|---|---|---|
|ビューポート|400|200|
|ビューボックス|200|100|
ビューポートとビューボックスのサイズが等しい場合の1/4が描画範囲になります。(大きさは4倍)

![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451263/1d7d86d9-d80f-091f-fea4-3c16214f1d49.png)


```:svg 
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 0 200 100">
  <rect x="0" y="0" width="200" height="100"  fill="#e67e22" stroke="#EA2027" stroke-width="8px"/>
  <circle cx="0" cy="0" r="50" fill="#333"/>
  <circle cx="400" cy="200" r="50" fill="#888000"/>
</svg>
```

### ビューポートとビューボックスの縦横比が違う場合 
viewportとviewboxの縦横比が一致していない場合、preserveAspectRatio属性が影響してきます。
初期値は"xMidYMid meet"です。

#### preserveAspectRatio="xMidYMid meet"でビューボックスの幅がビューポートの倍の場合
||width|height|
|---|---|---|
|ビューポート|400|200|
|ビューボックス|800|100|
ビューボックスの幅が倍なので高さの割合が半分になり、xMidYMidの影響で中央寄せされています。

![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451263/4370f78b-cf84-520a-a7ee-60c70973afc4.png)


```:svg
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 0 800 200" preserveAspectRatio="xMidYMid meet">
  <rect x="0" y="0" width="800" height="200"  fill="#e67e22" stroke="#EA2027" stroke-width="8px"/>
  <circle cx="0" cy="0" r="50" fill="#333"/>
  <circle cx="400" cy="200" r="50" fill="#888000"/>
</svg>
```

#### preserveAspectRatio="xMidYMid meet"でビューボックスの高さがビューポートの倍の場合
||width|height|
|---|---|---|
|ビューポート|400|200|
|ビューボックス|400|400|
ビューボックスの高さが倍なので幅の割合が半分になり、xMidYMidの影響で中央寄せされています。

![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451263/cc071122-54f7-921f-c254-f97f6104ac1c.png)


```:svg
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 0 400 400" preserveAspectRatio="xMidYMid meet">
  <rect x="0" y="0" width="400" height="400"  fill="#e67e22" stroke="#EA2027" stroke-width="8px"/>
  <circle cx="0" cy="0" r="50" fill="#333"/>
  <circle cx="400" cy="200" r="50" fill="#888000"/>
</svg>
```
     
#### preserveAspectRatio="xMidYMid meet"でビューボックスの幅がビューポートの半分の場合
||width|height|
|---|---|---|
|ビューポート|400|200|
|ビューボックス|200|100|
ビューボックスの幅が半分になり、xMidYMidの影響で中央寄せされています。(大きさは2倍)

![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451263/0dfb5174-acaa-eed7-478d-2e21346b3202.png)


```:svg
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet">
  <rect x="0" y="0" width="200" height="200"  fill="#e67e22" stroke="#EA2027" stroke-width="8px"/>
  <circle cx="0" cy="0" r="50" fill="#333"/>
  <circle cx="400" cy="200" r="50" fill="#888000"/>
</svg>
``` 
 
 
#### preserveAspectRatio="xMidYMid meet"でビューボックスの高さがビューポートの半分の場合
||width|height|
|---|---|---|
|ビューポート|400|200|
|ビューボックス|400|100|
ビューボックスの高さの割合が半分になり、xMidYMidの影響で中央寄せされています。(大きさは2倍)

![08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451263/774e0904-2d89-4467-ffb2-7fc6f88a60eb.png)


```:svg
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 0 400 100" preserveAspectRatio="xMidYMid meet">
  <rect x="0" y="0" width="400" height="100"  fill="#e67e22" stroke="#EA2027" stroke-width="8px"/>
  <circle cx="0" cy="0" r="50" fill="#333"/>
  <circle cx="400" cy="200" r="50" fill="#888000"/>
</svg>
```
     
     
     

#### preserveAspectRatio="none"でビューボックスの幅がビューポートの倍の場合
||width|height|
|---|---|---|
|ビューポート|400|200|
|ビューボックス|800|200|
ビューポートの縦横比に合わせるために高さが2倍に引き伸ばされるので、図形が縦に伸びています。(縦だけ2倍)

![09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451263/f4f6ca93-873e-d6d3-d417-0ad56c7856bc.png)


```:svg
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 0 800 200" preserveAspectRatio="none">
  <rect x="0" y="0" width="800" height="200"  fill="#e67e22" stroke="#EA2027" stroke-width="8px"/>
  <circle cx="0" cy="0" r="50" fill="#333"/>
  <circle cx="400" cy="200" r="50" fill="#888000"/>
</svg>
```

#### preserveAspectRatio="none"でビューボックスの高さがビューポートの倍の場合
||width|height|
|---|---|---|
|ビューポート|400|200|
|ビューボックス|400|400|
ビューポートの縦横比に合わせるために幅が2倍に引き伸ばされるので、図形が横に伸びています。(横だけ2倍)

![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451263/7ee136c8-496a-8d76-0771-4d9153fb5e09.png)


```:svg
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 0 400 400" preserveAspectRatio="none">
  <rect x="0" y="0" width="400" height="400"  fill="#e67e22" stroke="#EA2027" stroke-width="8px"/>
  <circle cx="0" cy="0" r="50" fill="#333"/>
  <circle cx="400" cy="200" r="50" fill="#888000"/>
</svg>
```
 
#### preserveAspectRatio="none"でビューボックスの幅がビューポートの半分の場合
||width|height|
|---|---|---|
|ビューポート|400|200|
|ビューボックス|200|200|
ビューポートの縦横比に合わせるために幅が2倍に引き伸ばされるので、図形が横に伸びています。(縦2倍、横4倍)

![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451263/e81c6e71-1e48-555a-280a-22ff0eacfa73.png)


```:svg
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 0 200 200" preserveAspectRatio="none">
  <rect x="0" y="0" width="200" height="200"  fill="#e67e22" stroke="#EA2027" stroke-width="8px"/>
  <circle cx="0" cy="0" r="50" fill="#333"/>
  <circle cx="400" cy="200" r="50" fill="#888000"/>
</svg>
 ```
 
 
#### preserveAspectRatio="none"でビューボックスがビューポートの半分の場合(高さだけ)

||width|height|
|---|---|---|
|ビューポート|400|200|
|ビューボックス|400|100|
ビューポートの縦横比に合わせるために、高さが2倍に引き伸ばされるので、図形が縦に伸びています。(縦4倍、横2倍)

![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451263/ce2afabb-fbe9-942f-d16c-e00576f1a946.png)


```:svg
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 0 400 100" preserveAspectRatio="none">
  <rect x="0" y="0" width="400" height="100"  fill="#e67e22" stroke="#EA2027" stroke-width="8px"/>
  <circle cx="0" cy="0" r="50" fill="#333"/>
  <circle cx="400" cy="200" r="50" fill="#888000"/>
</svg>
```

         


    
#### preserveAspectRatio="xMinYMin meet"でビューボックスの幅がビューポートの倍の場合
||width|height|
|---|---|---|
|ビューポート|400|200|
|ビューボックス|800|200|
ビューボックスの幅が倍なので高さの割合が半分になり、xMinYMinの影響で上寄せされています。

![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451263/f32278a7-0a5e-4f62-fbcd-93d143e301d5.png)


```:svg
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 0 800 200" preserveAspectRatio="xMinYMin">
  <rect x="0" y="0" width="800" height="200"  fill="#e67e22" stroke="#EA2027" stroke-width="8px"/>
  <circle cx="0" cy="0" r="50" fill="#333"/>
  <circle cx="400" cy="200" r="50" fill="#888000"/>
</svg>
```
 
#### preserveAspectRatio="xMinYMin meet"でビューボックスの高さがビューポートの倍の場合

||width|height|
|---|---|---|
|ビューポート|400|200|
|ビューボックス|400|400|
ビューボックスの高さが倍なので幅の割合が半分になり、xMinYMinの影響で左寄せされています。

![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451263/041c95b2-b8f9-cc1b-642f-8195a7c783de.png)


```:svg
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 0 400 400" preserveAspectRatio="xMinYMin">
  <rect x="0" y="0" width="400" height="400"  fill="#e67e22" stroke="#EA2027" stroke-width="8px"/>
  <circle cx="0" cy="0" r="50" fill="#333"/>
  <circle cx="400" cy="200" r="50" fill="#888000"/>
</svg>
``` 
 
#### preserveAspectRatio="xMinYMin meet"でビューボックスの幅がビューポートの半分の場合

||width|height|
|---|---|---|
|ビューポート|400|200|
|ビューボックス|200|200|
ビューボックスの幅の割合が半分になり、xMinYMinの影響で左寄せされています。(大きさは2倍)

![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451263/864cf025-7758-c44c-30dd-ac287ddb4b3e.png)


```:svg
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 0 200 200" preserveAspectRatio="xMinYMin">
  <rect x="0" y="0" width="200" height="200"  fill="#e67e22" stroke="#EA2027" stroke-width="8px"/>
  <circle cx="0" cy="0" r="50" fill="#333"/>
  <circle cx="400" cy="200" r="50" fill="#888000"/>
</svg>
```

#### preserveAspectRatio="xMinYMin meet"でビューボックスの高さがビューポートの半分の場合
||width|height|
|---|---|---|
|ビューポート|400|200|
|ビューボックス|400|100|
ビューボックスの高さの割合が半分になり、xMinYMinの影響で上寄せされています。(大きさは2倍)

![16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451263/1cc1abd1-0a88-89f3-a8eb-a65507ac445f.png)


```:svg
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 0 400 100" preserveAspectRatio="xMinYMin">
  <rect x="0" y="0" width="400" height="100"  fill="#e67e22" stroke="#EA2027" stroke-width="8px"/>
  <circle cx="0" cy="0" r="50" fill="#333"/>
  <circle cx="400" cy="200" r="50" fill="#888000"/>
</svg>
```


#### preserveAspectRatio="xMaxYMax meet"でビューボックスの幅がビューポートの倍の場合
||width|height|
|---|---|---|
|ビューポート|400|200|
|ビューボックス|800|200|
ビューボックスの幅が倍なので高さの割合が半分になり、xMinYMinの影響で下寄せされています。

![17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451263/d2aaf4e0-fdd9-a181-4459-b574d204f4f0.png)


```:svg
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 0 800 200" preserveAspectRatio="xMaxYMax">
  <rect x="0" y="0" width="800" height="200"  fill="#e67e22" stroke="#EA2027" stroke-width="8px"/>
  <circle cx="0" cy="0" r="50" fill="#333"/>
  <circle cx="400" cy="200" r="50" fill="#888000"/>
</svg>
``` 
#### preserveAspectRatio="xMaxYMax meet"でビューボックスの高さがビューポートの倍の場合
||width|height|
|---|---|---|
|ビューポート|400|200|
|ビューボックス|400|400|
ビューボックスの高さが倍なので幅の割合が半分になり、xMinYMinの影響で右寄せされています。

![18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451263/f866f3a2-8919-c2e4-a462-f95a0fec547f.png)


```:svg
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 0 400 400" preserveAspectRatio="xMaxYMax">
  <rect x="0" y="0" width="400" height="400"  fill="#e67e22" stroke="#EA2027" stroke-width="8px"/>
  <circle cx="0" cy="0" r="50" fill="#333"/>
  <circle cx="400" cy="200" r="50" fill="#888000"/>
</svg>
```

#### preserveAspectRatio="xMaxYMax meet"でビューボックスの幅がビューポートの半分の場合
||width|height|
|---|---|---|
|ビューポート|400|200|
|ビューボックス|200|100|

ビューボックスの幅の割合が半分になり、xMinYMinの影響で下寄せされています。(大きさは2倍)

![19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451263/06b3d1e9-5cbd-3c5e-91a8-3d257aa94578.png)


```:svg
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 0 200 200" preserveAspectRatio="xMaxYMax">
  <rect x="0" y="0" width="200" height="200"  fill="#e67e22" stroke="#EA2027" stroke-width="8px"/>
  <circle cx="0" cy="0" r="50" fill="#333"/>
  <circle cx="400" cy="200" r="50" fill="#888000"/>
</svg>
```
 
 
#### preserveAspectRatio="xMaxYMax meet"でビューボックスの高さがビューポートの半分の場合
||width|height|
|---|---|---|
|ビューポート|400|200|
|ビューボックス|400|100|

ビューボックスの高さの割合が半分になり、xMinYMinの影響で下寄せされています。(大きさは2倍)

![20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451263/60c31924-0be5-41b6-bb1c-6c1502059eb5.png)


```:svg
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 0 400 100" preserveAspectRatio="xMaxYMax">
  <rect x="0" y="0" width="400" height="100"  fill="#e67e22" stroke="#EA2027" stroke-width="8px"/>
  <circle cx="0" cy="0" r="50" fill="#333"/>
  <circle cx="400" cy="200" r="50" fill="#888000"/>
</svg>
```        
     
     
### preserveAspectRatioのオプションのmeetとsliceの比較
||width|height|
|---|---|---|
|ビューポート|400|200|
|ビューボックス|800|200|

#### meet(初期値)
```preserveAspectRatio="xMidYMid meet"```
縦横の大きい方がviewportいっぱいに表示されます。

![21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451263/05e77800-81e7-73fd-4de2-332e042f797c.png)


```:svg
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 0 800 200" preserveAspectRatio="xMidYMid meet">
  <rect x="0" y="0" width="800" height="200"  fill="#e67e22" stroke="#EA2027" stroke-width="8px"/>
  <circle cx="0" cy="0" r="50" fill="#333"/>
  <circle cx="400" cy="200" r="50" fill="#888000"/>
</svg>
```
     
#### slice
```preserveAspectRatio="xMidYMid slice"```
縦横の小さい方がビューポートいっぱいに表示されるので大きい方ははみ出してしまいます。
これまでの例と異なり、オレンジの四角の左右の輪郭線が見えなくなっています。

![22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451263/ac363a6b-6e78-21fe-e8ff-ffb082102195.png)


```:svg
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 0 800 200" preserveAspectRatio="xMidYMid slice">
  <rect x="0" y="0" width="800" height="200"  fill="#e67e22" stroke="#EA2027" stroke-width="8px"/>
  <circle cx="0" cy="0" r="50" fill="#333"/>
  <circle cx="400" cy="200" r="50" fill="#888000"/>
</svg>
```