| タグ |
説明 |
主な属性 |
例 |
サンプルコード |
| <rect> |
長方形を描画します。 |
x, y, width, height, rx, ry, fill, stroke |
|
<rect x="10" y="10" width="80" height="80" fill="blue" /> |
| <circle> |
円を描画します。 |
cx, cy, r, fill, stroke |
|
<circle cx="50" cy="50" r="40" fill="red" /> |
| <ellipse> |
楕円を描画します。 |
cx, cy, rx, ry, fill, stroke |
|
<ellipse cx="50" cy="50" rx="40" ry="20" fill="green" /> |
| <line> |
線を描画します。 |
x1, y1, x2, y2, stroke |
|
<line x1="10" y1="10" x2="90" y2="90" stroke="black" /> |
| <polygon> |
多角形を描画します。 |
points, fill, stroke |
|
<polygon points="50,15 90,85 10,85" fill="purple" /> |
| <polyline> |
折れ線を描画します。 |
points, fill, stroke |
|
<polyline points="0,40 40,40 40,80 80,80 80,120" fill="none" stroke="black" /> |
| <path> |
複雑な形状を描画します。 |
d, fill, stroke |
|
<path d="M10 80 Q 95 10 180 80 T 330 80" fill="none" stroke="red" /> |
| <text> |
テキストを描画します。 |
x, y, dx, dy, font-family, font-size, fill |
|
<text x="10" y="50" font-family="Verdana" font-size="35" fill="blue">Hello, SVG!</text> |
| <tspan> |
テキスト内でのスタイル変更や位置調整に使用します。 |
x, y, dx, dy, fill |
|
<text x="10" y="50" font-family="Verdana" font-size="35" fill="blue">Hello, <tspan fill="red">SVG!</tspan></text> |
| <g> |
要素をグループ化します。 |
transform, fill, stroke |
|
<g transform="translate(50,50)">
<rect x="-25" y="-25" width="50" height="50" fill="green" />
<circle cx="0" cy="0" r="20" fill="yellow" /></g> |
| <linearGradient> |
線形グラデーションを定義します。 |
id, x1, y1, x2, y2 |
|
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient></defs><rect width="100" height="100" fill="url(#grad1)" /> |
| <radialGradient> |
放射状グラデーションを定義します。 |
id, cx, cy, r, fx, fy |
|
<defs
><radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</radialGradient></defs><ellipse cx="50" cy="50" rx="50" ry="50" fill="url(#grad2)" /> |
| <pattern> |
繰り返しパターンを定義します。 |
id, width, height, patternUnits |
|
<defs>
<pattern id="pattern1" width="10" height="10" patternUnits="userSpaceOnUse">
<circle cx="5" cy="5" r="5" fill="blue" />
</pattern>
</defs><rect width="100" height="100" fill="url(#pattern1)" /> |
| <clipPath> |
クリッピングパスを定義します。 |
id |
|
<defs><clipPath id="clip1">
<circle cx="50" cy="50" r="40" /></clipPath>
</defs><rect x="10" y="10" width="80" height="80" fill="blue" clip-path="url(#clip1)" /> |
| <mask> |
マスクを定義します。 |
id, maskUnits, maskContentUnits |
|
<defs>
<mask id="mask1">
<rect width="100" height="100" fill="white" />
<circle cx="50" cy="50" r="40" fill="black" />
</mask></defs><rect width="100" height="100" fill="blue" mask="url(#mask1)" /> |
| <filter> |
フィルター効果を定義します。 |
id, x, y, width, height |
|
<defs><filter id="blur1"><feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter></defs><rect x="10" y="10" width="80" height="80" fill="blue" filter="url(#blur1)" /> |
| <image> |
画像を埋め込みます。 |
href, x, y, width, height |
|
<image href="https://via.placeholder.com/80" x="10" y="10" width="80" height="80" /> |
| <use> |
定義済みの要素を再利用します。 |
href, x, y, width, height |
|
<defs><circle id="circle1" cx="10" cy="10" r="10" fill="red" />
</defs><use href="#circle1" x="10" y="10" /><use href="#circle1" x="30" y="30" /> |
| <symbol> |
再利用可能なグラフィックオブジェクトを定義します。 |
id, viewBox |
|
<symbol id="symbol1" viewBox="0 0 30 30"><rect x="5" y="5" width="20" height="20" fill="green" />
</symbol><use href="#symbol1" x="10" y="10" width="30" height="30" /> |