SVG 画像データの説明とサンプル

2024年9月10日2024年9月14日

WordPress のウィジェットのカスタム HTML にSVG テキストファイルをペーストすることで画像を出力ができます

SVGの概要

SVG (Scalable Vector Graphics) は、ベクター画像を記述するためのXMLベースの言語です。座標や数式で定義されるため、画像を拡大縮小しても品質が劣化しません。SVGはロゴ、アイコン、インタラクティブなグラフィックなど、解像度に依存しない画像の描画に適しています。

SVGの基本的な特徴:

XML形式: XMLベースの形式で、タグを用いて図形や属性を記述します。
拡大縮小可能: ベクター形式のため、画質を損なうことなく拡大・縮小が可能です。
ブラウザ互換: ほとんどのモダンブラウザがSVGをサポートしており、HTML内で直接使用できます。
インタラクティブ性: CSSやJavaScriptと連携して、インタラクティブな動きやアニメーションを実現できます。
色指定: 色は16進数形式（例: #FF0000は赤）で指定します。またBLACK などの色しても可能です

Scalable Vector Graphics (SVG) 2 (svgwg.org)

SVG 2 — Introduction （日本語訳） (triple-underscore.github.io)

基本図形の描画プログラム

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
  <!-- 長方形 -->
  <rect x="10" y="10" width="120" height="80" fill="#CC4444" />
  <!-- 角丸の長方形 -->
  <rect x="150" y="10" width="120" height="80" rx="20" ry="20" fill="#4444CC" />
  <!-- 円 -->
  <circle cx="80" cy="150" r="50" fill="#CC4444" />
  <!-- 楕円 -->
  <ellipse cx="220" cy="150" rx="60" ry="40" fill="#4444CC" />
</svg>

<svg> タグ:

xmlns="http://www.w3.org/2000/svg": SVGの名前空間を指定する属性です。SVGドキュメントがSVG仕様に従っていることを示します。

<rect>、<circle>、<ellipse> タグで、長方形、角丸の長方形、円、楕円をそれぞれ描画し、fill属性で色を指定します。

線とパスの描画

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
  <!-- 直線 -->
  <line x1="0" y1="50" x2="150" y2="50" stroke="#CC4444" stroke-width="5" />
  <!-- パス -->
  <path d="M 10 180 L 60 100 L 110 180 Z" stroke="#4444CC" fill="none" stroke-width="2"/>
</svg>

<line>タグで直線を、<path>タグで任意のパス（ここでは三角形）を描画します。

`viewBox`と`preserveAspectRatio`の設定例

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="200" height="100" preserveAspectRatio="none">
  <circle cx="5" cy="5" r="5" fill="#CC4444" />
</svg>

viewBoxは描画領域の仮想座標を指定し、preserveAspectRatio属性で縦横比をどう扱うかを制御します。

preserveAspectRatio 属性は、SVGの描画領域 (viewBox) とビューポート（表示されるエリア）の縦横比や位置関係を制御するために使用されます。この属性を使って、画像がどのようにビューポートに収まるかを指定します。

`preserveAspectRatio`の基本的なオプション

none:
画像がビューポートにぴったりと合うように拡大縮小されます。縦横比は保持されず、画像が歪んで表示される場合があります。
例: 長方形のビューポートに対して、正方形の画像が縦横に引き伸ばされて表示される。
slice:
画像がビューポート全体を覆うように拡大縮小されますが、縦横比は保持されます。ビューポート内に収まりきらない部分は切り取られます。
例: 画像の一部が見切れる形で、縦横比を維持したまま、ビューポートいっぱいに表示されます。
meet:
画像全体がビューポート内に収まるように拡大縮小されますが、縦横比は保持されます。ビューポートのどちらか一方（縦または横）には余白が残る場合があります。
例: ビューポートの縦横比に応じて、画像全体が見えるように縮小され、余白ができる。

`xMinYMid`, `xMidYMid`, `xMaxYMid` などの位置指定

preserveAspectRatio 属性の後半部分（xMinYMid など）は、画像がビューポート内でどのように配置されるかを指定します。xはX軸方向（左右）、yはY軸方向（上下）の配置を表します。

X軸の指定:
xMin: 画像の左端をビューポートの左端に揃えます。
xMid: 画像の中心をビューポートの中央に揃えます。
xMax: 画像の右端をビューポートの右端に揃えます。
Y軸の指定:
yMin: 画像の上端をビューポートの上端に揃えます。
yMid: 画像の中央をビューポートの中央に揃えます。
yMax: 画像の下端をビューポートの下端に揃えます。

組み合わせの例:

xMinYMid:

画像の左端をビューポートの左側に揃え、縦方向は中央に揃えます。

xMidYMid:

画像の中心をビューポートの中央に揃え、縦横ともに中央に配置します。

xMaxYMid:

画像の右端をビューポートの右側に揃え、縦方向は中央に揃えます。

xMinYMax:

画像の左端をビューポートの左側に揃え、縦方向は下端に揃えます。

xMidYMax:

画像の中心をビューポートの中央に揃え、縦方向は下端に揃えます。

xMaxYMax:

画像の右端をビューポートの右側に揃え、縦方向は下端に揃えます。

xMinYMin:

画像の左端をビューポートの左側に揃え、縦方向は上端に揃えます。

xMidYMin:

画像の中心をビューポートの中央に揃え、縦方向は上端に揃えます。

xMaxYMin:

画像の右端をビューポートの右側に揃え、縦方向は上端に揃えます。

これらのオプションを組み合わせることで、SVGの画像がビューポート内でどのように表示されるかを細かく制御できます。

テキストの描画

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
  <text x="10" y="40" font-size="20" fill="#4444CC">SVGのテキスト</text>
  <text x="10" y="80" font-family="serif" font-weight="bold" font-size="20" font-style="italic" text-decoration="underline" fill="#CC4444">
    フォントの装飾
  </text>
  <text x="150" y="120" text-anchor="end" font-size="20" fill="#000000">右寄せ</text>
  <text x="150" y="160" text-anchor="middle" font-size="20" fill="#000000">中央寄せ</text>
  <text x="150" y="200" text-anchor="start" font-size="20" fill="#000000">左寄せ(デフォルト)</text>
</svg>

最初のテキスト要素:
テキストの位置はX座標10ピクセル、Y座標40ピクセルに配置され、フォントサイズは20ピクセル、色は青紫色（#4444CC）で描画されています。この基本的なテキスト表示は、単純な位置と色を指定したものです。
フォントスタイルを適用したテキスト:
こちらはセリフ体のフォントを使用し、太字、斜体、下線のスタイルが適用されています。テキストは赤色（#CC4444）で、X座標10ピクセル、Y座標80ピクセルに配置されています。このようにフォントファミリーや装飾属性で、テキストの見た目を細かく調整できます。
右寄せのテキスト:
このテキストは、X座標150ピクセルを基準に右寄せされています。Y座標120ピクセルに配置され、フォントサイズは20ピクセル、色は黒（#000000）です。text-anchor="end"によって、テキストの右端が基準座標となります。
中央寄せのテキスト:
X座標150ピクセルを基準に中央寄せされたテキストで、Y座標160ピクセルに配置されています。text-anchor="middle"により、テキストの中央がX座標に揃うように配置されます。色は黒で、フォントサイズは20ピクセルです。
左寄せのテキスト（デフォルト）:
テキストは左寄せで、X座標150ピクセル、Y座標200ピクセルに配置されます。text-anchor="start"はデフォルトの設定であり、左端が基準となります。フォントサイズは20ピクセル、色は黒です。

このコードでは、テキストの配置を制御するためのtext-anchor属性が使われており、これにより左寄せ、中央寄せ、右寄せの設定が可能になります。また、フォントの装飾（太字、斜体、下線）やフォントサイズ、色も個別に設定できるため、見た目を自在にカスタマイズできます。

部分的な文字を修飾パスに沿ってテキストを流し込む

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="300">
  <!-- 定義されたパス -->
  <defs>
    <path id="textpath" d="M 10 80 Q 100 10 200 80 T 400 80" />
  </defs>

  <!-- テキストパスを使用してテキストをパスに沿って描画 -->
  <text>
    <textPath xlink:href="#textpath" startOffset="50%">
      テキストがパスに沿って流れる
    </textPath>
  </text>

  <!-- 通常のテキスト描画 -->
  <text x="0" y="20" font-size="20" fill="#000" word-spacing="10">
    <tspan letter-spacing="5" font-weight="bold">部分的な</tspan>装飾
  </text>
</svg>

<svg> タグ:

xmlns="http://www.w3.org/2000/svg": SVGの名前空間を指定する属性です。SVGドキュメントがSVG仕様に従っていることを示します。
xmlns:xlink="http://www.w3.org/1999/xlink": XLinkの名前空間を指定する属性で、SVG内で外部リソースへのリンクを作成するために使用されます。
width="500": SVG描画領域の幅を500ピクセルに設定します。
height="300": SVG描画領域の高さを300ピクセルに設定します。

<defs> タグ:

<defs>: SVGの定義セクションです。ここで定義された要素（パスやグラデーションなど）は、SVG内の他の部分で再利用できます。

<path id="textpath" d="M 10 80 Q 100 10 200 80 T 400 80" />:

<path>: パスを定義します。d属性でパスの形状を指定します。
- M 10 80: パスの開始点を (10, 80) に設定します。
- Q 100 10 200 80: 二次ベジェ曲線で、 (100, 10) を制御点、 (200, 80) を終点とする曲線を描きます。
- T 400 80: 続く二次ベジェ曲線で、 (400, 80) を終点とする曲線を描きます。
id="textpath": このパスに textpath というIDを付けて、後で参照できるようにします。

<text> タグ:

<textPath xlink:href="#textpath" startOffset="50%">:
- <textPath>: パスに沿ってテキストを描画するためのタグです。
- xlink:href="#textpath": textpath IDで定義されたパスに沿ってテキストを描画します。
- startOffset="50%": テキストの開始位置をパスの50%の位置に設定します。
テキストがパスに沿って流れる: パスに沿って表示されるテキストの内容です。

<tspan letter-spacing="5″ font-weight="bold">部分的な</tspan>装飾

<tspan> 要素は、SVGの <text> 要素の中で部分的なテキストのスタイルや位置を調整するために使用されます。

<tspan letter-spacing="5" font-weight="bold">部分的な</tspan>:
この部分は、SVGの <text> 要素内で「部分的な」というテキストのスタイルを設定しています。
letter-spacing="5" により、文字間隔が広くなり、文字が少し離れて表示されます。
font-weight="bold" により、そのテキストが太字で表示されます。

複雑な図形とパスの例

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
  <!-- 折れ線（polyline） -->
  <polyline points="50,150 150,50 250,150 350,50 450,150" 
            stroke="#008000" stroke-width="5" fill="none" />

  <!-- 半分の円 -->
  <path d="M 100,300 A 50,50 0 0 1 200,300" 
        stroke="#0000FF" stroke-width="5" fill="none" />

  <!-- 星マーク -->
  <polygon points="250,150 270,210 330,210 280,240 300,300 250,260 200,300 220,240 170,210 230,210" 
           fill="#FFD700" stroke="#FF0000" stroke-width="3" />

  <!-- ハートマーク -->
  <path d="M 250,350 
           C 225,320 200,350 250,400
           C 300,350 275,320 250,350"
        fill="#FF69B4" stroke="#FF0000" stroke-width="4" />
</svg>

折れ線 (polyline): 座標リストを渡して折れ線を描画します。
半円: <path>タグを使い、円弧 (A コマンド) を利用して半分の円を描画します。
星マーク (polygon): 複数の座標を指定して星形を描きます。strokeで枠線、fillで内部の色を設定しています。
ハートマーク: <path>タグを使い、ベジェ曲線 (C コマンド) を使ってハートを描画しています。

画像の描画

このSVGコードは、画像をSVG内に埋め込むためのサンプルです。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500">
  <image x="50" y="50" width="200" height="150"
         xlink:href="new_image.png"
         preserveAspectRatio="xMidYMid meet" />
</svg>

<svg> タグ:

xmlns="http://www.w3.org/2000/svg": SVGの名前空間を指定する属性です。この属性により、SVGドキュメントがSVG仕様に従っていることが示されます。
xmlns:xlink="http://www.w3.org/1999/xlink": XLinkの名前空間を指定する属性です。XLinkは、SVG内で外部リソースへのリンクを作成するために使われます。
width="500": SVG描画領域の幅を500ピクセルに設定します。
height="500": SVG描画領域の高さを500ピクセルに設定します。

<image> タグ:

x="50": 画像の表示位置をSVGの左から50ピクセルの位置に設定します。画像の左上のコーナーがこの位置に配置されます。
y="50": 画像の表示位置をSVGの上から50ピクセルの位置に設定します。画像の左上のコーナーがこの位置に配置されます。
width="200": 画像の幅を200ピクセルに設定します。
height="150": 画像の高さを150ピクセルに設定します。
xlink:href="new_image.png": 画像ファイルのパスを指定します。ここでは new_image.png というファイルが指定されています。画像はSVG内に表示されます。
preserveAspectRatio="xMidYMid meet": 画像のアスペクト比（縦横比）を保持しながら、ビューポートに収まるように拡大・縮小します。この設定により、画像の中央がビューポートの中央に揃えられ、画像全体がビューポート内に表示されます。

スタイル

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="300">
  <!-- 緑色の正方形 -->
  <rect x="120" y="20" width="60" height="60"
        stroke="#0f0" fill="#0f8" stroke-width="2" />

  <!-- 青色の長方形、半透明 -->
  <rect x="100" y="20" width="60" height="40"
        stroke="#00f" fill="#88f" stroke-width="2" opacity="0.5"/>

  <!-- 赤色の星、塗りつぶしが非常に透明 -->
  <polygon points="200,30 220,80 270,80 230,120 250,170 
                   200,140 150,170 170,120 130,80 180,80"
           stroke="#f00" fill="#f88"
           fill-opacity="0.1" stroke-opacity="0.5" stroke-width="2"/>

  <!-- テキストの変更 -->
  <text x="150" y="120" text-anchor="middle"
        font-size="24" fill="yellow" stroke="blue" stroke-width="1">
    SAMPLE
  </text>


  <!-- 線幅の描画 -->
  <line x1="50" y1="150" x2="450" y2="150" stroke="black" stroke-width="2" />
  <line x1="50" y1="170" x2="450" y2="170" stroke="black" stroke-width="4" />
  <line x1="50" y1="190" x2="450" y2="190" stroke="black" stroke-width="6" />
  <line x1="50" y1="210" x2="450" y2="210" stroke="black" stroke-width="8" />

  <!-- 端点の形状 -->
  <line x1="50" y1="240" x2="150" y2="240" stroke="black" stroke-width="12" stroke-linecap="butt" />
  <line x1="200" y1="240" x2="300" y2="240" stroke="black" stroke-width="12" stroke-linecap="round" />
  <line x1="350" y1="240" x2="450" y2="240" stroke="black" stroke-width="12" stroke-linecap="square" />

  <!-- 接続点の形状 -->
  <polyline points="50,280 50,250 100,270" stroke="black" fill="none" stroke-width="8" stroke-linejoin="miter" />
  <polyline points="200,280 200,250 250,270" stroke="black" fill="none" stroke-width="8" stroke-linejoin="round" />
  <polyline points="350,280 350,250 400,270" stroke="black" fill="none" stroke-width="8" stroke-linejoin="bevel" />

  <!-- 破線 -->
  <line x1="50" y1="300" x2="450" y2="300" stroke="black" stroke-width="5" stroke-dasharray="10 5" />
</svg>

緑色の正方形

形状: 正方形 (<rect> 要素)
位置: X座標 20、Y座標 20
サイズ: 幅と高さが60
色: 緑色の縁取り（stroke="#0f0"）、緑色の塗りつぶし（fill="#0f8"）
縁取り幅: 2単位 (stroke-width="2")
説明: この正方形は、緑色で塗りつぶされ、緑色の縁取りがあります。X、Y座標を20に設定して、キャンバスの左上に配置されています。

青色の長方形、半透明

形状: 長方形 (<rect> 要素)
位置: X座標 100、Y座標 20
サイズ: 幅60、高さ40
色: 青色の縁取り（stroke="#00f"）、青色の塗りつぶし（fill="#88f"）
透明度: 半透明 (opacity="0.5")
縁取り幅: 2単位 (stroke-width="2")
説明: この長方形は青色で塗りつぶされ、青色の縁取りがあります。半透明に設定されているため、下にある要素が透けて見えます。

赤色の星、塗りつぶしが非常に透明

形状: 星 (<polygon> 要素)
位置: X座標 200、Y座標 30（複数の点で形成される星形）
サイズ: 頂点の位置に基づく
色: 赤色の縁取り（stroke="#f00"）、赤色の塗りつぶし（fill="#f88"）
透明度: 塗りつぶしが非常に透明（fill-opacity="0.1"）、縁取りが半透明（stroke-opacity="0.5"）
縁取り幅: 2単位 (stroke-width="2")
説明: この星形は赤色で塗りつぶされ、赤色の縁取りがありますが、塗りつぶしの透明度が非常に低く設定されています。X、Y座標は指定されておらず、点の座標によって形が決まります。

テキストの変更

テキスト: “SAMPLE"
位置: X座標 150、Y座標 120
サイズ: フォントサイズ 24
色: 黄色の文字色（fill="yellow"）、青色の縁取り（stroke="blue")
縁取り幅: 1単位 (stroke-width="1")
配置: 中央寄せ (text-anchor="middle")
説明: このテキストは中央寄せで表示され、黄色で塗りつぶされ、青色の縁取りがあります。位置とサイズも指定されています。

3. 線幅の描画（タグ）:

4本の水平線は異なる太さで、すべてX=50からX=450まで描画されています。
1本目の線（Y=150）は線の太さが2ピクセル。
2本目の線（Y=170）は線の太さが4ピクセル。
3本目の線（Y=190）は線の太さが6ピクセル。
4本目の線（Y=210）は線の太さが8ピクセルです。

4. 端点の形状（stroke-linecap属性）:

1つ目の線（Y=240）は、端点が切り落とされた形状（stroke-linecap="butt"）。
2つ目の線（Y=240）は、端点が丸く処理されています（stroke-linecap="round"）。
3つ目の線（Y=240）は、端点が四角に延長されています（stroke-linecap="square"）。

5. 接続点の形状（stroke-linejoin属性）:

3つの異なる接続点の形状が示されています。
1つ目のポリラインは、接続が鋭角に尖った形状（stroke-linejoin="miter"）。
2つ目のポリラインは、接続が丸い形状（stroke-linejoin="round"）。
3つ目のポリラインは、接続が斜めに切り落とされた形状（stroke-linejoin="bevel"）。

6. 破線の描画（stroke-dasharray属性）:

破線の線（Y=300）は、破線の長さが10ピクセルで、5ピクセルの間隔（stroke-dasharray="10 5″）で描かれています。

グラデーション

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="300">
  <!-- 線形グラデーションの定義 -->
  <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" stop-color="#ffeb3b" />
    <stop offset="50%" stop-color="#ff9800" />
    <stop offset="51%" stop-color="#ff5722" />
    <stop offset="100%" stop-color="#ff3d00" />
  </linearGradient>

  <!-- 1つ目の矩形 (グラデーション適用) -->
  <rect x="20" y="20" width="250" height="100" rx="15" ry="15" 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="280" y="20" width="200" height="100" rx="15" ry="15" stroke-width="6" 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="50" y="140" width="100" height="50" rx="10" ry="10" fill="url(#grad3-1)" />
  <rect x="170" y="140" width="100" height="50" 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="#42a5f5" />
    <stop offset="100%" stop-color="#1e88e5" />
  </linearGradient>
  <linearGradient id="grad4-2" xlink:href="#grad4-1" spreadMethod="reflect" />
  <rect x="300" y="140" width="100" height="50" rx="10" ry="10" fill="url(#grad4-1)" />
  <rect x="420" y="140" width="100" height="50" rx="10" ry="10" fill="url(#grad4-2)" />

  <!-- 円形グラデーション -->
  <radialGradient id="grad5" cx="50%" cy="50%" r="50%">
    <stop offset="0%" stop-color="#8e24aa" />
    <stop offset="100%" stop-color="#d81b60" />
  </radialGradient>
  <ellipse cx="150" cy="230" rx="120" ry="60" 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="400" cy="230" r="60" fill="url(#grad6)" />
</svg>

線形グラデーションの適用

グラデーションは<linearGradient>タグを使い、id="grad1"として定義されています。色は黄色からオレンジ、赤に変化します。
1つ目の矩形はこのグラデーションを背景色（fill="url(#grad1)"）として適用しています。
角の丸みはrx="15"、ry="15"で設定されており、20pxの位置から描画が始まります。

strokeへのグラデーション適用

2つ目の矩形は、背景（fill）と輪郭線（stroke）の両方に異なるグラデーションが適用されています。背景にはgrad2-1、輪郭にはgrad2-2が使用され、輪郭の太さはstroke-width="6"で指定されています。

gradientUnitsの効果

gradientUnits="objectBoundingBox"は、オブジェクトの境界を基準にグラデーションを適用し、gradientUnits="userSpaceOnUse"は、ユーザー座標系に基づいてグラデーションを適用します。
3つ目と4つ目の矩形はそれぞれgrad3-1とgrad3-2で描画されており、効果の違いを確認できます。

spreadMethodの効果

spreadMethod="repeat"は、グラデーションの繰り返し効果を指定し、spreadMethod="reflect"は、グラデーションの反射効果を適用します。
5つ目と6つ目の矩形でこの効果が適用されており、それぞれgrad4-1とgrad4-2で異なる広がり方が見られます。

円形グラデーション

7つ目の図形は楕円（<ellipse>）で、円形グラデーション（<radialGradient>）が適用されています。中心から外側にかけて紫からピンクへの色変化を持ちます。

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

8つ目の図形は円形グラデーションに焦点をずらした効果（fx="70%" fy="20%"）が適用され、中心が70%右、20%上にずれています。

マーカー

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="200">
  <!-- マーカーの定義 -->
  <marker viewBox="0 -5 10 10" refX="5" refY="0"
      markerWidth="15" markerHeight="15" id="mk1">
    <polygon points="10,0 0,5 0,-5" fill="red" />
  </marker>

  <!-- マーカー開始 -->
  <line x1="20" y1="20" x2="280" y2="20"
    stroke="blue" stroke-width="2" marker-start="url(#mk1)" />

  <!-- マーカー終了 -->
  <line x1="20" y1="50" x2="280" y2="50"
    stroke="green" stroke-width="3" marker-end="url(#mk1)" />

  <!-- マーカー途中 -->
  <polyline points="20,80 150,80 280,80"
    stroke="purple" stroke-width="3" marker-mid="url(#mk1)" fill="none" />

  <!-- 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" fill="orange" />
  </marker>

  <!-- markerUnits 効果表示 -->
  <line x1="50" y1="110" x2="250" y2="110"
        stroke="black" stroke-width="4" 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" fill="cyan" />
  </marker>

  <line x1="20" y1="140" x2="280" y2="140"
        stroke="black" stroke-width="3"
        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" fill="blue" />
  </marker>

  <polyline points="20,170 150,130 280,170" fill="none"
    stroke="black" stroke-width="2" marker-start="url(#mk4)" marker-mid="url(#mk4)" marker-end="url(#mk4)" />
</svg>

マーカーの定義

<marker>タグで矢印型のマーカーを定義し、各線の始点、中間、終点に配置することができます。<polygon>で矢印の形を定義しています。
id="mk1″のマーカーは赤い三角形で、サイズをmarkerWidth="15"、markerHeight="15"に設定しています。

マーカー開始

1つ目のライン（青い線）は、始点にマーカーが付いています。x1="20"、y1="20"からx2="280"、y2="20"までの青い線を描画し、線の太さはstroke-width="2"です。
marker-start="url(#mk1)"により、線の始点に赤いマーカーが表示されています。

マーカー終了

2つ目のライン（緑の線）は、終点にマーカーを設定しています。x1="20"からx2="280"まで、終点にマーカーが表示されます。
太さはstroke-width="3"で、marker-end="url(#mk1)"によって終点に赤いマーカーが追加されています。

マーカー途中

polyline（折れ線）は、途中にマーカーが配置されており、marker-mid="url(#mk1)"によって折れ線の途中にマーカーが挿入されています。紫色の線がx1="20", x2="280"の範囲で描画されています。

markerUnits の効果

id="mk2"のマーカーはmarkerUnits="userSpaceOnUse"で設定されています。この設定により、マーカーのサイズがユーザー座標系に基づきます。
黒い線の終点にオレンジ色の三角形マーカーが表示されています。

orient の効果

id="mk3"のマーカーはorient="180"で設定されています。これにより、矢印の向きが逆（180度回転）になり、線の始点に向かってマーカーが逆向きに表示されます。
黒い線は始点と終点で異なるマーカーが使われています。

orient="auto" の効果

orient="auto"は、線の方向に合わせて自動的に矢印が回転します。
id="mk4"のマーカーを使って、折れ線の始点、中間、終点に自動調整された青い矢印が表示されています。

これらのマーカーやグラフィック要素を利用することで、複雑なパスや矢印付きのラインを簡単に描画できます。

パターン

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="200">
  <!-- パターンの定義 -->
  <pattern id="pat1" viewBox="0 0 20 20"
           x="0" y="0" width="0.2" height="0.4">
    <!-- 四角形のパターン -->
    <rect x="2" y="2" width="8" height="8" fill="#c44" />
    <rect x="10" y="2" width="8" height="8" fill="#44c" />
    <rect x="2" y="10" width="8" height="8" fill="#44c" />
    <rect x="10" y="10" width="8" height="8" fill="#c44" />
  </pattern>

  <!-- 四角形にパターンを適用 -->
  <rect x="0" y="0" width="200" height="100"
        rx="10" ry="10" fill="url(#pat1)" />

  <!-- ストローク（枠線）にパターンを適用 -->
  <rect x="220" y="0" width="190" height="100"
        rx="10" ry="10" fill="none"
        stroke-width="10" stroke="url(#pat1)" />

  <!-- preserveAspectRatio の効果を確認 -->
  <pattern id="pat2-1" xlink:href="#pat1"
           preserveAspectRatio="none" />
  <pattern id="pat2-2" xlink:href="#pat1"
           preserveAspectRatio="xMidYMid meet" />
  <pattern id="pat2-3" xlink:href="#pat1"
           preserveAspectRatio="xMidYMid slice" />

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

パターンの定義

<pattern>タグでパターンを定義しています。このパターンは、20×20のviewBoxを持ち、xとyの位置は0に設定され、サイズはwidth="0.2"、height="0.4"として、パターンが繰り返される際の比率を指定しています。
<rect>タグで小さな四角形を作成し、それをパターンとして使用しています。赤（#c44）と青（#44c）の四角形を2×2のグリッドとして配置しています。

四角形にパターンを適用

<rect>でX軸、Y軸の位置（x="0", y="0"）に配置される大きな四角形を定義し、その塗りつぶしに定義したパターンfill="url(#pat1)"を適用しています。
角の丸みを持たせるために、rx="10", ry="10"のプロパティを使用しています。

枠線（ストローク）にパターンを適用

もう1つの四角形は、塗りつぶしなし（fill="none"）で、ストローク（枠線）に対してパターンを適用しています。
stroke="url(#pat1)"により、枠線部分に四角形パターンが使用されており、stroke-width="10"で枠線の太さを指定しています。

preserveAspectRatio の効果

preserveAspectRatioは、パターンが四角形にどのように収まるかを制御します。以下の3つの例を示します：
- preserveAspectRatio="none": 四角形の領域にパターンがそのまま伸縮して表示されます。
- preserveAspectRatio="xMidYMid meet": アスペクト比を維持しつつ、領域に収まるようにパターンが表示されます。
- preserveAspectRatio="xMidYMid slice": 領域を超えてもアスペクト比を維持し、パターンが表示されます。

応用例

パターンは多様な形状（今回は四角形）に適用でき、背景や枠線に繰り返し表示するために便利です。色や形、繰り返しの間隔などを自由にカスタマイズできます。

クリッピングとマスク

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
  <!-- クリッピングパスの定義 -->
  <clipPath id="clip1">
    <!-- 四角形をクリッピングとして使用 -->
    <rect x="0" y="0" width="120" height="60" />
  </clipPath>

  <!-- クリッピングの適用 -->
  <image x="0" y="0" width="200" height="100"
         xlink:href="https://memo.eightban.com/wp-content/uploads/2024/07/image-9.jpg"
         clip-path="url(#clip1)" />

  <!-- クリッピングパスの効果 (objectBoundingBoxを使用) -->
  <clipPath id="clip2" clipPathUnits="objectBoundingBox">
    <!-- 六角形のパスを定義 -->
    <path d="M 0.5,0 l -0.30,0.8 0.77,-0.5 -0.95,0 0.77,0.5" />
  </clipPath>

  <image x="210" y="0" width="100" height="100"
         xlink:href="https://memo.eightban.com/wp-content/uploads/2024/07/image-9.jpg"
         preserveAspectRatio="none" clip-path="url(#clip2)" />

  <!-- マスクの定義 -->
  <mask id="mask1" x="0" y="0" width="200" height="100">
    <!-- 二つの長方形を使ったマスク -->
    <rect x="20" y="20" width="60" height="40" fill="#888" />
    <rect x="100" y="40" width="80" height="40" fill="white" fill-opacity="0.5" />
  </mask>

  <!-- マスクの適用 -->
  <image x="0" y="110" width="200" height="100"
         xlink:href="https://memo.eightban.com/wp-content/uploads/2024/07/image-9.jpg"
         mask="url(#mask1)" />

  <!-- maskContentUnits の効果 (objectBoundingBoxを使用) -->
  <mask id="mask2" x="0" y="0" width="1" height="1"
        maskContentUnits="objectBoundingBox">
    <rect x="0.3" y="0.3" width="0.4" height="0.4" fill="#888" />
    <rect x="0.6" y="0.6" width="0.3" height="0.3" fill="white" fill-opacity="0.5" />
  </mask>

  <image x="210" y="110" width="100" height="100"
         xlink:href="https://memo.eightban.com/wp-content/uploads/2024/07/image-9.jpg"
         preserveAspectRatio="none" mask="url(#mask2)" />
</svg>

<clipPath>タグでクリッピングパスを定義しています。idを指定することで、クリッピングを後の要素に適用できます。
最初のクリッピングパス（id="clip1")では四角形（<rect>）を使って、特定の領域だけを表示するようにしています。これにより、画像が四角形の領域に収まります。

clipPathUnits の効果

clipPathUnits="objectBoundingBox"を指定することで、クリッピングがオブジェクトの境界ボックスに基づいてスケーリングされます。id="clip2"の部分では星形のパスを使用し、オブジェクトのサイズに合わせてスケーリングされます。

マスクの定義

<mask>タグを使用して、マスクを定義します。最初のマスク（id="mask1")は、2つの円（<circle>)で構成されています。灰色の円と、白色で透明度が50%の円を使い、画像の特定部分を透過させます。

maskContentUnits の効果

maskContentUnits="objectBoundingBox"を使用して、マスクがオブジェクトの境界ボックスに基づいてスケーリングされます。id="mask2"では、2つの円を使ってマスクがオブジェクトのサイズに基づいて調整されています。

全体の構造

各クリップやマスクは、適用される画像が異なる形で表示されるように制御されています。クリップでは、画像が指定した形状の領域に収まり、マスクでは画像の一部が透過されます。

このように、クリッピングとマスクを使うことで、画像の表示を自由に制御できます。また、形状は多様に変更でき、丸以外のパターン（四角形や星形など）にも適用可能です。

パス命令（M、L、H、V、S、C、Z）

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
  <!-- 複雑なパス -->
  <path d="
    M 10 10           <!-- M: (10, 10) に移動 -->
    L 100 10          <!-- L: (100, 10) まで直線を引く -->
    H 100             <!-- H: X = 100 で水平直線を引く -->
    V 100             <!-- V: Y = 100 で垂直直線を引く -->
    S 150 150 200 100 <!-- S: (150, 150) を制御点、(200, 100) を終点とする二次ベジェ曲線 -->
    C 250 50 300 150 250 200 <!-- C: (250, 50) と (300, 150) を制御点、(250, 200) を終点とする三次ベジェ曲線 -->
    Z                 <!-- Z: パスを閉じる -->
    " 
    stroke="black" 
    fill="none" 
    stroke-width="2"/>
</svg>

M 10 10:

移動 (Move to): パスの開始位置を (10, 10) に設定します。このコマンドはパスの描画を開始する点を指定します。

L 100 10:

線を引く (Lineto): 現在の位置から (100, 10) まで直線を描きます。このコマンドは直線を描くために使われます。

H 100:

水平線を引く (Horizontal lineto): 現在の位置から X座標が 100 になるまで水平に直線を引きます。Y座標は変わりません。

V 100:

垂直線を引く (Vertical lineto): 現在の位置から Y座標が 100 になるまで垂直に直線を引きます。X座標は変わりません。

S 150 150 200 100:

二次ベジェ曲線 (Shorthand/smooth curveto): 前のコマンドの制御点を利用して、(150, 150) を制御点1、(200, 100) を終点とする二次ベジェ曲線を描きます。ここで、制御点1が前のコマンドの終点に接続されます。

C 250 50 300 150 250 200:

三次ベジェ曲線 (Curveto): (250, 50) を制御点1、(300, 150) を制御点2、(250, 200) を終点として三次ベジェ曲線を描きます。このコマンドでは2つの制御点を指定し、より複雑な曲線を描くことができます。

Z:

パスを閉じる (Closepath): パスを始点に戻して閉じます。このコマンドは、パスの最後に直線を引いて始点と終点を接続します。

アニメーション

<svg x="0px" y="0px" width="400px" height="40px" style="background-color:#ddd">
  <!-- ●のアニメーション -->
  <circle cx="5" cy="20" r="15" stroke="black" fill="#fff" stroke-width="2">
    <!-- cx: 円の中心のx座標をアニメーション -->
    <animate attributeName="cx" from="-15" to="415" dur="4s" repeatCount="indefinite" />
  </circle>
</svg>

<circle>: 円（●）を作成するために使用されるSVG要素です。
cx="5": 円の中心のX座標を5に設定しています。
cy="20": 円の中心のY座標を20に設定しています。height="40"の中央付近です。
r="15": 半径を15に設定しています。
stroke="black": 円の縁取り色を黒に設定しています。
fill="#fff": 円の塗りつぶし色を白に設定しています。
stroke-width="2": 縁取りの太さを2に設定しています。
<animate>: 円が左右に動くアニメーションを定義しています。
attributeName="cx": 円の中心X座標をアニメーションさせるため、cxを指定します。
from="-15": アニメーションの開始位置をX座標 -15（SVG領域外）に設定します。
to="415": アニメーションの終了位置をX座標 415（SVG領域外）に設定します。
dur="4s": アニメーションの時間を4秒に設定します。
repeatCount="indefinite": アニメーションが無限に繰り返されます。

このコードにより、●が左から右へスムーズに移動し、4秒ごとに繰り返されるアニメーションが作成されます。

画像（SVG）にリンク

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
  <a xlink:href="http://eightban.com">
  <rect x="150" y="10" width="120" height="80" rx="20" ry="20" fill="#4444CC" />
  </a>
</svg>

試しに青い四角形をクリックしてください

移動、拡大縮小・回転・反転

<svg width="200" height="200" style="background-color:#ddd">
  <g transform="translate(80, 80) scale(0.5, -0.5) rotate(45)"> <!-- グループ全体の変換 -->
    <!-- 四角形 -->
    <rect x="0" y="0" width="50" height="50" fill="blue" />
    <rect x="40" y="60" width="50" height="50" fill="green" />
    <!-- 線 -->
    <line x1="0" y1="100" x2="50" y2="50" stroke="red" stroke-width="2" />
    <!-- 円 -->
    <circle cx="125" cy="25" r="20" fill="yellow" />
  </g>
</svg>

2. `<g transform="translate(80, 80) scale(0.5, -0.5) rotate(45)">`

<g>タグ: 図形をグループ化するための要素です。グループ内のすべての図形に対して一括で変換を適用します。
transform="translate(80, 80)": グループ全体をX軸方向に80ピクセル、Y軸方向に80ピクセル移動します。これによって、グループ内の図形が描かれる基準位置が(80, 80)に変更されます。
scale(0.5, -0.5): 図形をX軸方向に0.5倍、Y軸方向に-0.5倍にスケーリングします。これにより、図形は半分の大きさに縮小され、さらにY軸方向に反転されます（上下が逆転します）。
rotate(45): グループ内の図形を、基準位置を中心として45度時計回りに回転させます。

3. `<rect x="0" y="0" width="50" height="50" fill="blue" />`

変換の影響: 四角形は縮小されて半分の25×25ピクセルになり、Y軸方向に反転され、さらに45度回転しています。

4. `<line x1="0" y1="0" x2="50" y2="50" stroke="red" stroke-width="2" />`

変換の影響: 線もスケーリングで長さが半分になり、Y軸反転と45度の回転が適用されます。

5. `<circle cx="25" cy="25" r="20" fill="yellow" />`

変換の影響: 円も半分に縮小され、Y軸反転と45度回転が適用されます。縮小により、半径は10ピクセルになります。

wordpress,画像

Posted by eightban

emotional-face エクセルなどにコピペができるギザギザにならないemf 形式のスタンプを作ってみる