「10分でわかるSVG 基礎編」サンプル

表示サイズとスケーリング

width, height と viewBox

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="5 5 10 10" width="100" height="100">
  <circle cx="10" cy="10" r="5" fill="#c44" />
</svg>

preserveAspectRatioの効果(1)

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="5 5 10 10" width="100" height="50"
     preserveAspectRatio="none">
  <circle cx="10" cy="10" r="5" fill="#c44" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="5 5 10 10" width="100" height="50"
     preserveAspectRatio="xMaxYMid">
  <circle cx="10" cy="10" r="5" fill="#c44" />
</svg>

preserveAspectRatioの効果(2)

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="5 5 10 10" width="100" height="50"
     preserveAspectRatio="xMidYMin meet">
  <circle cx="10" cy="10" r="5" fill="#c44" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="5 5 10 10" width="100" height="50"
     preserveAspectRatio="xMidYMin slice">
  <circle cx="10" cy="10" r="5" fill="#c44" />
</svg>

基本図形の描画

<rect x="0" y="0" width="100" height="70" fill="#c44" />
<rect x="40" y="20" width="100" height="70" rx="10" ry="10"
      fill="#44c" />

<circle cx="190" cy="40" r="40" fill="#c44" />
<ellipse cx="240" cy="60" rx="50" ry="30" fill="#44c" />

<line x1="0" y1="140" x2="90" y2="140" stroke="#c44" />
<line x1="0" y1="100" x2="90" y2="180" stroke="#44c" />

<polyline points="100,140 120,100 160,100 180,140 160,180 120,180"
          stroke="#c44" fill="none" />
<polygon points="200,140 220,100 260,100 280,140 260,180 220,180"
         stroke="#44c" fill="none" />

パスの描画

<path d="M 1,41
         L 21,1 61,1 81,41 61,81 21,81 Z
         m 119,-40
         c 40,0 -40,80 0,80 40,0 -40,-80 0,-80
         M 159,1
         A 39,81 0 0 1 199,81
         A 39,81 0 0 1 159,1"
      stroke="#c44" fill="none" />

画像の描画

<image x="0" y="0" width="150" height="80"
       xlink:href="image01.jpg"
       preserveAspectRatio="none" />

<image x="150" y="0" width="150" height="80"
       xlink:href="image01.jpg"
       preserveAspectRatio="xMidYMid meet" />

テキストの描画

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

<text x="0" y="20">テキストの描画</text>
<text x="0" y="50"
      font-family="serif" font-weight="bold"
      font-size="20" font-style="italic"
      text-decoration="underline" fill="#c44">
  フォントの装飾
</text>
<text x="0" y="80">
  <tspan font-weight="bold">部分的な</tspan>装飾
</text>

テキストの配置

<text x="150" y="30"
      text-anchor="start">左寄せ(デフォルト)</text>
<text x="150" y="60"
      text-anchor="middle">中央寄せ</text>
<text x="150" y="90"
      text-anchor="end">右寄せ</text>

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

<text x="0" y="20" letter-spacing="5"
      word-spacing="10">
  文字 単語間隔の調整
</text>
<text x="0" y="60">
  <tspan>位</tspan>
  <tspan dx="5" dy="-5">置</tspan>
  <tspan dx="5" dy="-5">の</tspan>
  <tspan dx="5" dy="5">調</tspan>
  <tspan dx="5" dy="5">整</tspan>
  <tspan x="0" dy="20">改行</tspan>
</text>

パスへの流し込み

<path id="textpath"
      d="M 20,60 C 40,20 260,20 280,60"
      stroke="black" fill="none" />
<text font-size="20" dy="-5">
  <textPath xlink:href="#textpath">
    パス上にテキストを描画
  </textPath>
</text>

スタイル指定

描画色

<circle cx="100" cy="40" r="39"
        stroke="#f00" fill="#f88" />
<circle cx="50" cy="40" r="39"
        stroke="#00f" fill="#88f" opacity="0.5"/>
<circle cx="150" cy="40" r="39"
        stroke="#00f" fill="#88f"
        fill-opacity="0.1" stroke-opacity="0.5"/>
<text x="100" y="50" text-anchor="middle"
      font-size="32" fill="white" stroke="black">
  TEXT
</text>

線幅

<line x1="0" y1="10" x2="200" y2="10"
      stroke="black" y="10" stroke-width="1" />
<line x1="0" y1="30" x2="200" y2="30"
      stroke="black" y="10" stroke-width="2" />
<line x1="0" y1="50" x2="200" y2="50"
      stroke="black" y="10" stroke-width="4" />
<line x1="0" y1="70" x2="200" y2="70"
      stroke="black" y="10" stroke-width="6" />

端点の形状

<line x1="5" y1="10" x2="195" y2="10"
      stroke="black" stroke-width="10"
      stroke-linecap="butt" />
<line x1="5" y1="40" x2="195" y2="40"
      stroke="black" stroke-width="10"
      stroke-linecap="round" />
<line x1="5" y1="70" x2="195" y2="70"
      stroke="black" stroke-width="10"
      stroke-linecap="square" />

接続点の形状

<polyline points="10,60 10,10 50,10"
          stroke="black" fill="none"
          stroke-width="20"
          stroke-linejoin="miter" />
<polyline points="90,60 90,10 140,10"
          stroke="black" fill="none"
          stroke-width="20"
          stroke-linejoin="round" />
<polyline points="170,60 170,10 230,10"
          stroke="black" fill="none"
          stroke-width="20"
          stroke-linejoin="bevel" />

miter と stroke-miterlimit

<polyline points="40,50 10,10 60,10"
          stroke="black" fill="none"
          stroke-width="10"
          stroke-linejoin="miter" />
<polyline points="140,35 90,10 140,10"
          stroke="black" fill="none"
          stroke-width="10"
          stroke-linejoin="mitter" />
<polyline points="220,35 170,10 220,10"
          stroke="black" fill="none"
          stroke-width="10"
          stroke-linejoin="mitter"
          stroke-miterlimit="5" />

破線

<line x1="5" y1="10" x2="195" y2="10"
      stroke="black" stroke-width="5"
      stroke-dasharray="8 8" />
<line x1="5" y1="30" x2="195" y2="30"
      stroke="black" stroke-width="5"
      stroke-dasharray="4 4 8 4" />
<line x1="5" y1="50" x2="195" y2="50"
      stroke="black" stroke-width="5"
      stroke-dasharray="8 8"
      stroke-linecap="round" />

マーカー

マーカーの描画

<marker viewBox="0 -5 10 10" refX="5" refY="0"
    markerWidth="10" markerHeight="10" id="mk1">
  <polygon points="10,0 0,5 0,-5" />
</marker>

<line x1="10" y1="10" x2="190" y2="10"
  stroke="black" marker-start="url(#mk1)" />
<line x1="10" y1="30" x2="190" y2="30"
  stroke="black" marker-end="url(#mk1)" />
<polyline points="10,50 100,50 190,50"
  stroke="black" marker-mid="url(#mk1)" />

markerUnits の効果

<marker viewBox="0 -5 10 10" refX="5" refY="0"
        markerWidth="10" markerHeight="10" id="mk2"
        markerUnits="userSpaceOnUse">
  <polygon points="10,0 0,5 0,-5" />
</marker>

<line x1="20" y1="20" x2="180" y2="20"
      stroke="black" stroke-width="3"
      marker-end="url(#mk1)" />
<line x1="20" y1="50" x2="180" y2="50"
      stroke="black" stroke-width="3"
      marker-end="url(#mk2)" />

orient の効果

<marker viewBox="0 -5 10 10" refX="5" refY="0"
        markerWidth="10" markerHeight="10" id="mk3"
        orient="180">
  <polygon points="10,0 0,5 0,-5" />
</marker>

<line x1="10" y1="10" x2="190" y2="10"
      stroke="black"
      marker-start="url(#mk3)"
      marker-end="url(#mk1)" />

orient="auto" の効果

<marker viewBox="0 -5 10 10" refX="5" refY="0"
        markerWidth="10" markerHeight="10" id="mk4"
        orient="auto">
  <polygon points="10,0 0,5 0,-5" />
</marker>

<polyline points="10,45 75,5 140,45" fill="none"
  stroke="black" marker-start="url(#mk1)"
  marker-mid="url(#mk1)" marker-end="url(#mk1)"/>
<polyline points="160,45 225,5 290,45" fill="none"
  stroke="black" marker-start="url(#mk4)"
  marker-mid="url(#mk4)" marker-end="url(#mk4)"/>

線形グラデーション

<linearGradient
   id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
  <stop offset="0%" stop-color="#feb" />
  <stop offset="50%" stop-color="#fc4" />
  <stop offset="51%" stop-color="#fb0" />
  <stop offset="100%" stop-color="#fd9" />
</linearGradient>
<rect x="0" y="0" width="200" height="80"
      rx="10" ry="10" fill="url(#grad1)" />

stroke への適用

<linearGradient id="grad2-1" xlink:href="#grad1"
                y2="100%" />
<linearGradient id="grad2-2" xlink:href="#grad1"
                y1="100%" y2="0%" />

<rect x="2" y="2" width="196" height="76"
      rx="10" ry="10" stroke-width="4"
      fill="url(#grad2-1)"
      stroke="url(#grad2-2)" />

gradientUnits の効果

<linearGradient id="grad3-1" xlink:href="#grad1"
   gradientUnits="objectBoundingBox" />
<linearGradient id="grad3-2" xlink:href="#grad1"
   gradientUnits="userSpaceOnUse" />

<rect x="0" y="0" width="75" height="40"
      rx="10" ry="10" fill="url(#grad3-1)" />
<rect x="20" y="20" width="75" height="40"
      rx="10" ry="10" fill="url(#grad3-1)" />
<rect x="105" y="0" width="75" height="40"
      rx="10" ry="10" fill="url(#grad3-2)" />
<rect x="125" y="20" width="75" height="40"
      rx="10" ry="10" fill="url(#grad3-2)" />

spreadMethod の効果

<linearGradient id="grad4-1" spreadMethod="repeat"
                x1="0%" y1="0%" x2="0%" y2="50%">
  <stop offset="0%" stop-color="#feb" />
  <stop offset="100%" stop-color="#fb0" />
</linearGradient>
<linearGradient id="grad4-2" xlink:href="#grad4-1"
                spreadMethod="reflect" />

<rect x="0" y="0" width="95" height="60"
      rx="10" ry="10" fill="url(#grad4-1)" />
<rect x="105" y="0" width="95" height="60"
      rx="10" ry="10" fill="url(#grad4-2)" />

円形グラデーション

<radialGradient id="grad5"
                cx="50%" cy="50%" r="50%">
  <stop offset="0%" stop-color="#feb" />
  <stop offset="100%" stop-color="#fb0" />
</radialGradient>

<ellipse cx="100" cy="40" rx="100" ry="40"
         fill="url(#grad5)" />

円形グラデーションの焦点

<radialGradient id="grad6" fx="70%" fy="20%">
  <stop offset="0%" stop-color="#fff" />
  <stop offset="50%" stop-color="#fb0" />
  <stop offset="90%" stop-color="#c90" />
  <stop offset="100%" stop-color="#a80" />
</radialGradient>

<circle cx="100" cy="40" r="40"
        fill="url(#grad6)" />

パターン

パターンの適用

<pattern id="pat1" viewBox="0 0 20 20"
         x="0.05" y="0.1" width="0.2" height="0.4">
  <circle cx="5" cy="5" r="4" fill="#c44" />
  <circle cx="15" cy="5" r="4" fill="#44c" />
  <circle cx="5" cy="15" r="4" fill="#44c" />
  <circle cx="15" cy="15" r="4" fill="#c44" />
</pattern>

<rect x="0" y="0" width="200" height="100"
      rx="10" ry="10" fill="url(#pat1)" />

stroke への適用

<rect x="5" y="5" width="190" height="90"
      rx="10" ry="10" fill="none"
      stroke-width="10" stroke="url(#pat1)" />

preserveAspectRatio の効果

<pattern id="pat3-1" xlink:href="#pat1"
         preserveAspectRatio="none" />
<pattern id="pat3-2" xlink:href="#pat3-1"
         preserveAspectRatio="xMidYMid meet" />
<pattern id="pat3-3" xlink:href="#pat3-1"
         preserveAspectRatio="xMidYMid slice" />

<rect x="0" y="0" width="95" height="60"
      rx="10" ry="10" fill="url(#pat3-1)" />
<rect x="102" y="0" width="95" height="60"
      rx="10" ry="10" fill="url(#pat3-2)" />
<rect x="205" y="0" width="95" height="60"
      rx="10" ry="10" fill="url(#pat3-3)" />

patternUnits の効果

<pattern id="pat4-1" xlink:href="#pat1" />
<pattern id="pat4-2" xlink:href="#pat4-1"
         patternUnits="userSpaceOnUse"
         x="0" y="0" width="20" height="20" />

<rect x="0" y="0" width="75" height="40"
      rx="10" ry="10" fill="url(#pat4-1)" />
<rect x="20" y="20" width="75" height="40"
      rx="10" ry="10" fill="url(#pat4-1)" />
<rect x="105" y="0" width="75" height="40"
      rx="10" ry="10" fill="url(#pat4-2)" />
<rect x="125" y="20" width="75" height="40"
      rx="10" ry="10" fill="url(#pat4-2)" />

クリッピング

クリッピングの適用

<clipPath id="clip1">
  <circle cx="40" cy="40" r="40" />
</clipPath>

<image x="0" y="0" width="80" height="80"
       xlink:href="image01.jpg"
       clip-path="url(#clip1)" />

clipPathUnits の効果

<clipPath id="clip2"
          clipPathUnits="objectBoundingBox">
  <path d="M 0.5,0 l -0.30,0.9 0.77,-0.56
           -0.95,0 0.77,0.56" />
</clipPath>
<image x="0" y="0" width="65" height="80"
       xlink:href="image01.jpg"
       preserveAspectRatio="none"
       clip-path="url(#clip2)" />
<image x="75" y="0" width="125" height="80"
       xlink:href="image01.jpg"
       preserveAspectRatio="none"
       clip-path="url(#clip2)" />

マスク

マスクの適用

<mask id="mask1" x="0" y="0" width="80" height="80">
  <circle cx="30" cy="30" r="30" fill="#888" />
  <circle cx="50" cy="50" r="30"
          fill="white" fill-opacity="0.5" />
</mask>
<image x="0" y="0" width="160" height="80"
       xlink:href="image01.jpg"
       mask="url(#mask1)"/>

maskContentUnits の効果

<mask id="mask2" x="0" y="0" width="1" height="1"
      maskContentUnits="objectBoundingBox">
  <circle cx="0.4" cy="0.4" r="0.4" fill="#888" />
  <circle cx="0.7" cy="0.7" r="0.3"
          fill="white" fill-opacity="0.5" />
</mask>
<image x="0" y="0" width="65" height="80"
   xlink:href="image01.jpg"
   preserveAspectRatio="none" mask="url(#mask2)" />
<image x="75" y="0" width="125" height="80"
   xlink:href="image01.jpg"
   preserveAspectRatio="none" mask="url(#mask2)" />

foreignObject

XHTML の埋め込み

<rect x="0" y="0" width="200" height="50"
      rx="10" ry="10" fill="#fcc" />
<foreignObject x="10" y="8" width="180" height="80">
  <p xmlns="http://www.w3.org/1999/xhtml"
     style="font-size:12px; margin:0; padding:0;">
    これはXHTMLなので、自動折り返しされます。
  </p>
</foreignObject>

SVG内でフォーム送信

<foreignObject x="0" y="0" width="180" height="50">
  <body xmlns="http://www.w3.org/1999/xhtml"
        style="margin:0; padding:0;">
    <form action="http://www.google.co.jp/search">
      <input name="q" />
      <input type="submit" />
    </form>
  </body>
</foreignObject>