Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

SVGの記述方法

More than 1 year has passed since last update.

SVGの書き方についてのまとめです。
SVGについての前提知識はこちらの記事を参照してください。
SVGの描画領域
SVGの扱い方

図形

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>属性
タグの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属性を指定できる
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
円と楕円をパスに変換できます。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away