SVGの記述方法

SVGの書き方についてのまとめです。
SVGについての前提知識はこちらの記事を参照してください。
[SVGの描画領域](https://qiita.com/takeshisakuma/items/a6a06902e955acad5c99)
[SVGの扱い方](https://qiita.com/takeshisakuma/items/6bd2b4cc9fb4edf61288)

## 図形
SVGで描画できる図形(9種類)

|図形|タグ|
|---|---|
|四角形|rectタグ|
|円|circleタグ|
|楕円|ellipseタグ|
|直線|lineタグ|
|折れ線|polylineタグ|
|多角形|polygonタグ|
|パス|pathタグ|
|画像|imageタグ|
|文字列|textタグ|



### 四角形

|属性|内容|
|---|---|
|x,y|左上座標|
|width|幅|
|height|高さ|
|rx,ry(オプション)|角丸|
|fill|塗り色|


```:svg
<svg width="400" height="200" viewBox="0, 0, 400, 200" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="380" height="180" rx="10" ry="10" fill="#e74c3c" />
</svg>
```



### 円

|属性|内容|
|---|---|
|cx,cy|中心座標|
|r|半径|
|fill|塗り色|

```:svg
<svg width="200" height="200" viewBox="0, 0, 200, 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="90" fill="#e74c3c" />
</svg>
```


### 楕円

|属性|内容|
|---|---|
|cx,cy|中心座標|
|rx|半径(X軸方向)|
|ry|半径(Y軸方向)|
|fill|塗り色|

```:svg
<svg width="400" height="200" viewBox="0, 0, 400, 200" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="200" cy="100" rx="200" ry="100" fill="#e74c3c" />
</svg>
```


### 直線(線分)

|属性|内容|
|---|---|
|x1,y1|始点|
|x2,y2|終点|
|stroke|線の色|

```:svg
<svg width="400" height="200" viewBox="0, 0, 400, 200" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="0" x2="400" y2="200" stroke="#e74c3c" />
</svg>
```

### 折れ線
points属性にX座標、Y座標の組をカンマか空白区切りで必要な数だけ並べます。

```:svg
<svg width="200" height="200" viewBox="0, 0, 200, 200" xmlns="http://www.w3.org/2000/svg">
  <polyline points="100,0 200,50 200,150 100,200 0,150 0,50" stroke="#e74c3c" fill="none" />
</svg>
```

### 多角形
points属性にX座標、Y座標の組をカンマか空白区切りで必要な数だけ並べます。
poylineとの違いは、終点から始点に線がつながることです。

```:svg
<svg width="200" height="200" viewBox="0, 0, 200, 200" xmlns="http://www.w3.org/2000/svg">
  <polygon points="100,0 200,50 200,150 100,200 0,150 0,50" stroke="#e74c3c" fill="none" />
</svg>
``` 

### パス

```:svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 134">
  <path d="
    M133 50
    s0-50-66-50
    S0 50 0 50
    l133 33
    s0 50-66 50
    S0 83 0 83
              
    M133 0
    L200 133 266 0
       
    M360 83
    l40 0
    s0 50-66 50-66-66-66-66
    S267 0 333 0 400 50 400 50" 
              
    fill="none" stroke="#e74c3c"/>
</svg>
```
#### コマンド
|大文字/小文字|座標|
|---|---|
|大文字|絶対座標による指定|
|小文字|カレント座標からの相対座標による指定|

```:svg
 <!-- 移動(Move Toコマンド) -->
 M x y
 m dx dy
 
 <!-- 線を描画(Line Toコマンド) -->
 L x y
 l dx dy
 
 <!-- 水平線を描画 -->
 H x 
 h dx
 
 <!-- 垂直線を描画 -->
 V y
 v dy
 
 <!-- Close Pathコマンド パスを閉じる -->
 Z
 z
 
 <!-- 三次ベジェ曲線 -->
 C x1 y1, x2 y2, x y // x,yは線の終点　x1,y1は曲線の始点向けの制御点　x2,y2は曲線の終点向けの制御点
 c dx1 dy1, dx2 dy2, dx dy
 
 <!-- 三次ベジェ曲線のセットをつなぎ合わせるためのショートカット -->
 S x2 y2, x y
 s dx2 dy2, dx dy
 
 <!-- 二次ベジェ曲線 -->
 Q x1 y1, x y
 q dx1 dy1, dx dy
 
 <!-- 二次ベジェ曲線のセットをつなぎ合わせるためのショートカット -->
 T x y
 t dx dy
 
 <!-- 円弧　半径 回転角度 長短 回転方向 終点座標 -->
 A rx ry x-axis-rotation large-arc-flag sweep-flag x y
 a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
``` 

### 画像
|属性|内容|
|---|---|
|x,y|左上座標|
|width|幅|
|height|高さ|
|xlink:href|表示する画像のURL|
|preserveAspectRatio|画像のアスペクト比と異なる際の表示方法|

```:svg
<svg width="400" height="200" viewBox="0, 0, 400, 200" xmlns="http://www.w3.org/2000/svg">
  <image x="0" y="0" width="400" height="200" xlink:href="image.jpg" />
</svg>
```




### 文字列
HTMLと違い、自動的には折り返しが行われません。


#### テキスト描画とスタイル指定

|属性|内容|
|---|---|
|x,y|描画位置|
|font-family(オプション)|字体|
|font-weight(オプション)|ウェイト|
|font-size(オプション)|サイズ|
|font-style(オプション)|スタイル|
|text-decoration(オプション)|装飾|

文字装飾はtextタグ内でtspanタグを使って部分的に適用することも可能です。

```:svg
<svg width="400" height="200" viewBox="0, 0, 400, 200" xmlns="http://www.w3.org/2000/svg">
  <text x="0" y="20" font-family="serif" font-weight="bold" font-size="20" font-style="italic" text-decoration="underline" fill="#e74c3c">
    テキスト
    <tspan font-size="10" fill="#333">
      テキスト
    </tspan>
    テキスト
  </text>
</svg>
```

#### text-anchor属性
右寄せや中央寄せも指定できます。

|値|内容|
|---|---|
|start(デフォルト)|中心点から描画開始(右に寄る)|
|middle|中心点を中心に描画|
|end|中心点で描画終了(左に寄る)|

```:svg
<svg width="400" height="200" viewBox="0, 0, 400, 200" xmlns="http://www.w3.org/2000/svg">
  <text x="200" y="15" text-anchor="start">中心から描画開始</text>
  <text x="200" y="65" text-anchor="middle">中心を中央に描画</text>
  <text x="200" y="115" text-anchor="end">中心で描画終了</text>
</svg>
```

#### 文字・単語間隔・位置の調整

|属性|内容|
|---|---|
|letter-spacing|文字の間隔|
|word-spacing|単語の間隔|

```:svg
 <svg width="400" height="200" viewBox="0, 0, 400, 200" xmlns="http://www.w3.org/2000/svg">
   <text x="0" y="20" letter-spacing="10" word-spacing="10">
     テキスト テキスト
   </text>
 </svg>
```

#### パスへの流し込み
ドロー系のグラフィックツールによくある、パスへのテキストの流し込みも可能です。
pathタグ側でid属性を定義しておき、textタグのxlink:href属性でそれを参照するだけです。

```:svg
<svg width="400" height="200" viewBox="0, 0, 400, 200" xmlns="http://www.w3.org/2000/svg">
  <path id="path"
    d="
      M-0.5,200
      c400,0,400,1,400-200"
    stroke="#333" fill="none" />
  <text font-size="20" dy="-5">
    <textPath xlink:href="#path">
      テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    </textPath>
  </text>
</svg>
```




## 長さの単位
※svgタグの属性によるスケーリングなどによって基準となる1pxの長さが変化します。

|単位|内容|
|---|---|
|px|ピクセル|
|pt|ポイント(1.25px)|
|pc|パイカ(15px)|
|mm|ミリメートル(3.543307px)|
|cm |センチメートル(35.43307px)|
|in|インチ(90px)|
|em|現在のフォントの大きさ|
|ex|現在のフォントでの文字xの高さ|
|%|ビューポートに対する割合|

## スタイル
SVG要素のタグに直接スタイル付けプロパティを付与します。
CSSを用いてスタイル付けプロパティを指定します。
座標以外のスタイル付けはCSSで行うことが可能です。

|属性|内容|値|
|---|---|---|
|fill|塗りの色|CSSと同様の色名や数値指定(noneは描画しない)|
|stroke|輪郭線の色|CSSと同様の色名や数値指定(noneは描画しない)|
|stroke-width|線幅|0以上の数値(小数も可)|
|stroke-linecap|線の端の形状|butt(そのまま)/round(丸)/square(長さを線幅の半分延長)|
|stroke-linejoin|線の接続部分の形状|miter(尖らせる)/round(丸)/bevel(面取り)|
|stroke-miterlimit|stroke-linejointがmiterからbebelに切り替わる閾値|大きくすると鋭くなる(デフォルトは4)|
|stroke-dasharray|破線|「長さ 間隔」の順に指定(複数指定可能)|
|stroke-opacity|輪郭線の透明度|0.0(透明)～1.0(不透明)|
|opacity|塗りの透明度|0.0(透明)～1.0(不透明)|


### 塗りの色

```:svg
<svg width="200" height="200" viewBox="0, 0, 200, 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="90" fill="#e74c3c" />
</svg>
```
 
### 輪郭線の色
```:svg
<svg width="200" height="200" viewBox="0, 0, 200, 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="90" stroke="#e74c3c" fill="none"/>
</svg>
```
 
### 線幅
```:svg
<svg width="200" height="200" viewBox="0, 0, 200, 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="90" stroke="#e74c3c" stroke-width="6" fill="none"/>
</svg>
```
       
### 端点の形状
```:svg
<svg width="400" height="200" viewBox="0, 0, 400, 200" xmlns="http://www.w3.org/2000/svg">
  <line x1="20" y1="20" x2="380" y2="20" stroke="#e74c3c" stroke-width="20" stroke-linecap="butt" />
  <line x1="20" y1="50" x2="380" y2="50" stroke="#e74c3c" stroke-width="20" stroke-linecap="round" />
  <line x1="20" y1="80" x2="380" y2="80" stroke="#e74c3c" stroke-width="20" stroke-linecap="square" />
</svg>
```
        
### 接続点の形状
```:svg
<svg width="400" height="200" viewBox="0, 0, 400, 200" xmlns="http://www.w3.org/2000/svg">
  <polyline points="20,20 100,100 180,20" stroke="#e74c3c" fill="none" stroke-width="20" stroke-linejoin="miter" />
  <polyline points="120,140 200,60 280,140"stroke="#e74c3c" fill="none" stroke-width="20" stroke-linejoin="round" />
  <polyline points="220,20 300,100 380,20" stroke="#e74c3c" fill="none" stroke-width="20" stroke-linejoin="bevel" />
</svg>
```
          
### miter と stroke-miterlimit
```:svg
<svg width="220" height="120" viewBox="0, 0, 220, 120" xmlns="http://www.w3.org/2000/svg">
  <polyline points="20,20 50,100 90,20" stroke="#e74c3c" fill="none" stroke-width="20" stroke-linejoin="miter" stroke-miterlimit="2" />
  <polyline points="120,20 160,100 200,20"stroke="#e74c3c" fill="none" stroke-width="20" stroke-linejoin="miter" stroke-miterlimit="4" />
</svg>
```
            
### 破線
```:svg
<svg width="220" height="120" viewBox="0, 0, 220, 120" xmlns="http://www.w3.org/2000/svg">
  <line x1="10" y1="20" x2="190" y2="20" stroke="#e74c3c" stroke-width="2" stroke-dasharray="8 8" />
  <line x1="10" y1="40" x2="190" y2="40" stroke="#e74c3c" stroke-width="2" stroke-dasharray="4 4" />
  <line x1="10" y1="60" x2="190" y2="60" stroke="#e74c3c" stroke-width="2" stroke-dasharray="8 8" stroke-linecap="round" />
  <line x1="10" y1="80" x2="190" y2="80" stroke="#e74c3c" stroke-width="2" stroke-dasharray="4 4" stroke-linecap="round" /> 
</svg>
```
         
### 透明度
```:svg
<svg width="400" height="200" viewBox="0, 0, 400, 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="90" fill="#e74c3c" opacity="0.5"/>
  <circle cx="300" cy="100" r="90" stroke="#e74c3c" fill="none" stroke-opacity="0.5"/>
</svg>
``` 

### スタイルの優先度
優先度：インラインCSS>CSS>属性
<rect>タグのfill属性に色と指定しても、実際の描画色はCSSで指定した色になります。
インラインでstyle="fill:色"で指定するとインラインのstyle優先になります。

## マーカー

輪郭線のスタイルに加えて、line、polyline、polygon、pathに適用できます。
markerタグの内部に記述した図形がそのままマーカーの形状になります。
すべての図形タグが使用できます。

### マーカー側

|属性|内容|
|---|---|
|markerWidth|マーカー図形の幅|
|markerHeight|マーカー図形の高さ|
|refX|マーカーを配置する頂点のX座標|
|refY|マーカーを配置する頂点のY座標|
|id|参照用の名前|
|markerUnits|strokeWidth(線幅に合わせる)デフォルト/userSpaceOnUse(線幅に合わせない)|
|orient|回転の角度を度数で指定/auto|


### マーカーを付ける図形側

|属性|内容|
|---|---|
|marker-start|始点|
|marker-end属性|終点|
|marker-mid属性|始点終点以外の頂点に描画するマーカー|

```:svg
<svg width="200" height="340" viewBox="0, 0, 200, 340" xmlns="http://www.w3.org/2000/svg">
        
  <marker id="maerker1" markerWidth="8" markerHeight="8" refX="4" refY="4">
    <circle cx="4" cy="4" r="4" stroke="none" fill="#f00"/>
  </marker>
         
  <marker id="maerker2" markerWidth="8" markerHeight="8" refX="4" refY="4" markerUnits="userSpaceOnUse">
    <circle cx="4" cy="4" r="4" stroke="none" fill="#f00"/>
  </marker>
         
  <polyline points="10,10 100,50 190,10" stroke="#e74c3c" stroke-width="2" marker-start="url(#maerker1)" fill="none" />
  <polyline points="10,60 100,100 190,60" stroke="#e74c3c" stroke-width="2" marker-mid="url(#maerker1)" fill="none" />
  <polyline points="10,110 100,150 190,110" stroke="#e74c3c" stroke-width="2" marker-end="url(#maerker1)" fill="none" />
         
  <polyline points="10,160 100,200 190,160" stroke="#e74c3c" stroke-width="2" marker-start="url(#maerker2)" fill="none" />
  <polyline points="10,210 100,250 190,210" stroke="#e74c3c" stroke-width="2" marker-mid="url(#maerker2)" fill="none" />
  <polyline points="10,260 100,300 190,260" stroke="#e74c3c" stroke-width="2" marker-end="url(#maerker2)" fill="none" />
         
</svg>
```



## グラデーション
グラデーションはCSSのみでは実現できません。

|タグ|内容|
|---|---|
|linearGradient|線形グラデーション|
|meshgradient|グラデーションメッシュ|
|radialGradient|円形グラデーション|
|stop|色指定ポイント|

### 線形グラデーション
linearGradientタグを使用して、事前にグラデーションを定義します。

|属性|内容|
|---|---|
|id|図形からの参照用|
|x1、y1|グラデーションの方向や範囲(0%)|
|x2, y2|グラデーションの方向や範囲(100%)|

#### stop
linearGradientの子要素に複数のstopタグを書いて色の変化を定義します。

|属性|内容|
|---|---|
|offset|色を指定する位置を指定|
|stop-color|色を指定|
|stop-opacity|色に透明度を適用|

#### fillへの適用

```:svg
<svg width="200" height="100" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
 
  <linearGradient id="gradation" x1="0%" y1="0%" x2="100%" y2="100%">
    <stop offset="0%" stop-color="#F36265" stop-opacity="1" />
    <stop offset="100%" stop-color="#961276" stop-opacity="0" />
  </linearGradient>
   
  <rect x="10" y="10"  width="180" height="80" fill="url(#gradation)" />
   
</svg>    
```

#### strokeへの適用

```:svg
<svg width="200" height="100" viewBox="0, 0, 200, 100" xmlns="http://www.w3.org/2000/svg">
        
  <linearGradient id="gradation" x1="0%" y1="0%" x2="100%" y2="100%">
    <stop offset="0%" stop-color="#F36265" stop-opacity="1" />
    <stop offset="100%" stop-color="#961276" stop-opacity="0" />
  </linearGradient>
                 
  <rect x="10" y="10" width="180" height="80" stroke-width="10" fill="none" stroke="url(#gradation)" />
             
</svg>
```

#### gradientUnits
属性x1, y1, x2, y2 に対する座標系を定義します。

|値|内容|
|---|---|
|userSpaceOnUse|適用された図形ごとのローカルな座標|
|objectBoundingBox(デフォルト)|ユーザー座標系上の座標|

##### userSpaceOnUseの場合

```:svg
<svg width="400" height="400" viewBox="0, 0, 400, 400" xmlns="http://www.w3.org/2000/svg">
 
  <linearGradient id="gradation" x1="0%" y1="0%" x2="100%" y2="100%" gradientUnits="userSpaceOnUse">
    <stop offset="0%" stop-color="#F36265" stop-opacity="1" />
    <stop offset="100%" stop-color="#961276" stop-opacity="0" />
  </linearGradient>
     
  <rect x="10" y="10"  width="180" height="80" fill="url(#gradation)" />
  <rect x="10" y="110"  width="180" height="80" fill="url(#gradation)" />
  <rect x="10" y="210"  width="180" height="80" fill="url(#gradation)" />
  <rect x="10" y="310"  width="180" height="80" fill="url(#gradation)" />
  <rect x="210" y="10"  width="180" height="80" fill="url(#gradation)" />
  <rect x="210" y="110"  width="180" height="80" fill="url(#gradation)" />
  <rect x="210" y="210"  width="180" height="80" fill="url(#gradation)" />
  <rect x="210" y="310"  width="180" height="80" fill="url(#gradation)" />
         
</svg>
```

##### objectBoundingBoxの場合

```:svg
<svg width="400" height="400" viewBox="0, 0, 400, 400" xmlns="http://www.w3.org/2000/svg">
 
  <linearGradient id="gradation" x1="0%" y1="0%" x2="100%" y2="100%" gradientUnits="objectBoundingBox">
    <stop offset="0%" stop-color="#F36265" stop-opacity="1" />
    <stop offset="100%" stop-color="#961276" stop-opacity="0" />
  </linearGradient>
     
  <rect x="10" y="10" width="180" height="80" fill="url(#gradation)" />
  <rect x="10" y="110" width="180" height="80" fill="url(#gradation)" />
  <rect x="10" y="210" width="180" height="80" fill="url(#gradation)" />
  <rect x="10" y="310" width="180" height="80" fill="url(#gradation)" />
  <rect x="210" y="10" width="180" height="80" fill="url(#gradation)" />
  <rect x="210" y="110" width="180" height="80" fill="url(#gradation)" />
  <rect x="210" y="210" width="180" height="80" fill="url(#gradation)" />
  <rect x="210" y="310" width="180" height="80" fill="url(#gradation)" />
         
</svg>
```

#### spreadMethod
グラデーションの繰り返しの方法を指定します。

デフォルトでは繰り返しは行われません。
範囲外の色はグラデーションの両端の色で塗りつぶされます。

|値|内容|
|---|---|
|repeat|0％～100％の範囲の色が繰り返し適用される|
|reflect|奇数番目の繰り返しがグラデーションの方向が逆になり継ぎ目のないグラデーションになる|


```:svg
<svg width="200" height="200" viewBox="0, 0, 200, 200" xmlns="http://www.w3.org/2000/svg">
 
  <linearGradient id="gradation1" x1="0%" y1="0%" x2="50%" y2="50%" spreadMethod="repeat">
    <stop offset="0%" stop-color="#F36265"/>
    <stop offset="100%" stop-color="#961276"/>
  </linearGradient>
 
  <linearGradient id="gradation2" x1="0%" y1="0%" x2="50%" y2="50%" spreadMethod="reflect">
    <stop offset="0%" stop-color="#F36265"/>
    <stop offset="100%" stop-color="#961276"/>
  </linearGradient>
        
  <rect x="10" y="10" width="180" height="80" fill="url(#gradation1)" />
  <rect x="10" y="110" width="180" height="80" fill="url(#gradation2)" />
 
</svg>
```


### 円形グラデーション
radialGradientタグを使用して、事前にグラデーションを定義します。

|属性|内容|
|---|---|
|cx、cy|中心点|
|r|半径|
|fx、fy|焦点(デフォルトはcx,cyと同じ)|

```:svg
<svg width="200" height="200" viewBox="0, 0, 200, 200" xmlns="http://www.w3.org/2000/svg">
 
  <radialGradient id="gradation" cx="50%" cy="50%" r="100%" fx="75%" fy="75%">
    <stop offset="0%" stop-color="#fff" />
    <stop offset="100%" stop-color="#961276" />
  </radialGradient>
 
  <rect x="10" y="10" width="180" height="180" fill="url(#gradation)" />
 
</svg>
```



## パターン
任意の図形のグループを図形の背景として繰り返し描画します。
ビットマップ画像はもちろん、SVGで描画した任意の図形がパターンとして利用できます。
patternタグの子要素としてパターンとなる図形を定義します。

|属性|内容|
|---|---|
|id|参照用|
|viewBox|描画領域の定義|
|x、y|適用先でパターンを表示する基準位置|
|width、height|適用先でパターンを表示するサイズ|

### fillへの適用

```:svg
<svg width="400" height="200" viewBox="0, 0, 400, 200" xmlns="http://www.w3.org/2000/svg">

  <pattern id="gradation" viewBox="0 0 16 16" x="0" y="0" width="0.1" height="0.2">
    <rect x="0" y="0" width="4" height="4" fill="#ff6b6b"></rect>
    <rect x="8" y="0" width="4" height="4" fill="#48dbfb"></rect>
    <rect x="0" y="8" width="4" height="4" fill="#48dbfb"></rect>
    <rect x="8" y="8" width="4" height="4" fill="#ff6b6b"></rect>
  </pattern>

  <rect x="0" y="0" width="200" height="100" fill="url(#gradation)" />

</svg>
```

### stroke への適用
stroke属性にパターンの指定を記述できます。

```:svg
<svg width="400" height="200" viewBox="0, 0, 400, 200" xmlns="http://www.w3.org/2000/svg">
 
  <pattern id="gradation" viewBox="0 0 16 16" x="0" y="0" width="0.1" height="0.2">
    <rect x="0" y="0" width="4" height="4" fill="#ff6b6b"></rect>
    <rect x="8" y="0" width="4" height="4" fill="#48dbfb"></rect>
    <rect x="0" y="8" width="4" height="4" fill="#48dbfb"></rect>
    <rect x="8" y="8" width="4" height="4" fill="#ff6b6b"></rect>
  </pattern>
 
  <rect x="0" y="0" width="200" height="100" fill="none" stroke-width="10" stroke="url(#gradation)" />
</svg>
```

### preserveAspectRatio
viewBoxのサイズとwidth、heightのアスペクト比が異なる際の表示方法の指定です。

```:svg
<svg width="200" height="200" viewBox="0, 0, 200, 200" xmlns="http://www.w3.org/2000/svg">
 
  <pattern id="gradation1" viewBox="0 0 8 16" x="0" y="0" width="0.1" height="0.2" preserveAspectRatio="xMidYMid">
    <rect x="0" y="0" width="4" height="4" fill="#ff6b6b"></rect>
    <rect x="8" y="0" width="4" height="4" fill="#48dbfb"></rect>
    <rect x="0" y="8" width="4" height="4" fill="#48dbfb"></rect>
    <rect x="8" y="8" width="4" height="4" fill="#ff6b6b"></rect>
  </pattern>
 
  <pattern id="gradation2" viewBox="0 0 8 16" x="0" y="0" width="0.1" height="0.2" preserveAspectRatio="none">
    <rect x="0" y="0" width="4" height="4" fill="#ff6b6b"></rect>
    <rect x="8" y="0" width="4" height="4" fill="#48dbfb"></rect>
    <rect x="0" y="8" width="4" height="4" fill="#48dbfb"></rect>
    <rect x="8" y="8" width="4" height="4" fill="#ff6b6b"></rect>
  </pattern>
         
  <rect x="0" y="0" width="200" height="100" fill="url(#gradation1)" />
         
  <rect x="0" y="110" width="200" height="100" fill="url(#gradation2)" />
 
</svg>
```

### patternUnits

|値|内容|
|---|---|
|objectBoundingBox(デフォルト)|ユーザー座標系上の座標|
|userSpaceOnUse|適用された図形ごとのローカルな座標|


```:svg
<svg width="200" height="200" viewBox="0, 0, 200, 200" xmlns="http://www.w3.org/2000/svg">
 
   <pattern id="gradation1" viewBox="0 0 16 16" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
     <rect x="0" y="0" width="4" height="4" fill="#ff6b6b"></rect>
     <rect x="8" y="0" width="4" height="4" fill="#48dbfb"></rect>
     <rect x="0" y="8" width="4" height="4" fill="#48dbfb"></rect>
     <rect x="8" y="8" width="4" height="4" fill="#ff6b6b"></rect>
  </pattern>
 
  <pattern id="gradation2" viewBox="0 0 16 16" x="0" y="0" width="0.1" height="0.2">
    <rect x="0" y="0" width="4" height="4" fill="#ff6b6b"></rect>
    <rect x="8" y="0" width="4" height="4" fill="#48dbfb"></rect>
    <rect x="0" y="8" width="4" height="4" fill="#48dbfb"></rect>
    <rect x="8" y="8" width="4" height="4" fill="#ff6b6b"></rect>
  </pattern>
 
  <rect x="0" y="0" width="200" height="100" fill="url(#gradation1)" />
 
  <rect x="0" y="110" width="200" height="100" fill="url(#gradation2)" />
 
</svg>
```





## foreignObject
SVGにXHTMLを埋め込みます。
foreingObjectの内部は完全にXHTMLの規則が適用されます。
(テキストの自動折り返しなど)

```:svg
<svg width="200" height="200" viewBox="0, 0, 200, 200" xmlns="http://www.w3.org/2000/svg">
 
  <foreignObject x="10" y="10" width="180" height="180">
    <p xmlns="http://www.w3.org/1999/xhtml" style="font-size:16px; color:#0abde3">
      テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    </p>
  </foreignObject>

</svg>
```



## グループ化

メリット

- 共通の属性を一括して指定できる
- 全体をまとめて移動できる


### グループ化と属性の一括指定
gタグの内部に図形タグを記述します。
gタグにはfillやstrokeのような共通の属性が指定でき、内部の図形に引き継がれます。
(内部の図形に指定が優先)

```:svg
<svg width="200" height="200" viewBox="0, 0, 200, 200" xmlns="http://www.w3.org/2000/svg">
 
  <g fill="#feca57" stroke="#ff6b6b" stroke-width="2">
    <circle cx="60" cy="60" r="40" />
    <rect x="10" y="110" width="180" height="80" />
  </g>

</svg>
```

### use
グループや図形のコピーを別の場所に表示します。

|属性|内容|
|---|---|
|xlink:href|コピー元の図形のidを指定|
|x、y|表示位置を指定|


```:svg
<svg width="200" height="400" viewBox="0, 0, 200, 400" xmlns="http://www.w3.org/2000/svg">
 
  <g id="group">
    <circle cx="50" cy="50" r="50" fill="#e55039"/>
    <rect x="0" y="110" width="200" height="80" fill="#6a89cc" />
  </g>
 
  <use x="0" y="200" xlink:href="#group"/>
     
</svg>
```

### symbol
useタグで参照するための図形を定義します。

|gタグ|symbolタグ|
|---|---|
|自身も表示される|自身は表示されない|
|viewBox属性を指定できない|viewBox属性を指定できる|
|preserveAspectRatio属性を指定できない|preserveAspectRatio属性を指定できる|


```e:svg
<svg width="200" height="300" viewBox="0, 0, 200, 300" xmlns="http://www.w3.org/2000/svg">
 
  <symbol id="group" viewBox="0 0 200 300">
    <circle cx="50" cy="50" r="50" fill="#e55039"/>
    <rect x="0" y="110" width="200" height="80" fill="#6a89cc" />
  </symbol>
 
  <use x="0" y="0" xlink:href="#group"/>
  <use x="0" y="200" xlink:href="#group" width="50%" height="50%" />

</svg>
```

### defs
表示しない図形をまとめます。
使用例：テキストを流し込むためのパスを非表示にします。

```:svg
<svg width="400" height="200" viewBox="0, 0, 400, 200" xmlns="http://www.w3.org/2000/svg">
 
  <defs>
    <path id="rail"
      d="
        M-0.5,200
        c400,0,400,1,400-200"/>
  </defs>

  <text>
    <textPath xlink:href="#rail">
      テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    </textPath>
  </text>
</svg>
```

## リンク
※textタグ部分をクリックしても下にあるリンクを有効にするために「pointer-events="none"」を指定します。

```:svg
<svg width="100" height="100" viewBox="0, 0, 100, 100" xmlns="http://www.w3.org/2000/svg">

  <a xlink:href="https://qiita.com/" target="_blank">
    <circle cx="50" cy="50" r="40" stroke="#c44" fill="#fee" />
  </a>

  <text x="27" y="55" pointer-events="none" font-size="20" stroke="#e74c3c">
    push
  </text>

</svg>
``` 


## transform
図形の変形ができます。

|値|内容|
|---|---|
|translate(tx,ty)|並行移動|
|scale(sx,sy)|拡大縮小|
|rotate(angle,cx,cy)|回転|
|skewX(angle)|せん断(横)|
|skewY(angle)|せん断(縦)|
|matrix(a,b,c,d,e,f)|変換行列|

空白区切りで複数指定可能です。
後に書いたものから順に適用されていくので、記述する順序が重要です。

図形自体のx、y属性などは変換後の座標系での指定になります。
transform属性はgタグやuseタグにも指定できます。

```:svg
<svg width="300" height="600" viewBox="0, 0, 300, 600" xmlns="http://www.w3.org/2000/svg">
 
  <rect x="50" y="0" width="100" height="60" fill="#1abc9c" />
  <rect x="50" y="100" width="100" height="60" fill="#f1c40f" transform="translate(20,0)" />
  <rect x="50" y="200" width="100" height="60" fill="#3498db" transform="scale(1,1)" />
  <rect x="50" y="300" width="100" height="60" fill="#9b59b6" transform="rotate(45 100 330)" />
  <rect x="50" y="400" width="100" height="60" fill="#34495e" transform="skewX(10)" />
  <rect x="50" y="500" width="100" height="60" fill="#95a5a6" transform="skewY(10)" />
         
</svg>
```

## ツール
[SVG Circle/Ellipse to Path Converter](http://complexdan.com/svg-circleellipse-to-path-converter/)
円と楕円をパスに変換できます。