SVG rectの使い方完全ガイド - 属性・座標・スタイル設定から実践サンプルまで

SVG（Scalable Vector Graphics）におけるrect要素は、Webデザインやデータ可視化において最も基本的かつ重要な図形の一つです。本記事では、SVG rectの詳細な使い方から実践的な応用テクニックまで、経験に基づいた確かな知識をお伝えします。

SVG rectの基本概念

SVG rect要素は、矩形（四角形）を描画するためのSVG要素です。座標系における位置とサイズを指定することで、様々な種類の四角形を作成できます。SVGの特徴であるスケーラビリティを活かし、拡大縮小しても画質が劣化しないベクターグラフィックスとして活用できます。

rect要素の必須属性

rect要素を正しく使用するためには、以下の基本属性の理解が不可欠です：

x：矩形の左上角のX座標
y：矩形の左上角のY座標
width：矩形の幅
height：矩形の高さ

実践的なSVG rectの使用方法

基本的な矩形の描画

最もシンプルな矩形の作成例から見ていきましょう：

<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="80" fill="blue" />
</svg>

このコードでは、座標(50,50)を起点に、幅100px、高さ80pxの青色の矩形を描画します。

角丸矩形の作成

rxとry属性を使用すると、角丸の矩形を作成できます：

<svg width="200" height="200">
  <rect x="30" y="30" width="140" height="100" rx="15" ry="15" fill="green" stroke="darkgreen" stroke-width="2" />
</svg>

スタイル設定の詳細

rect要素の視覚的な表現を豊かにするスタイル属性：

<svg width="300" height="200">
  <rect x="20" y="20" width="120" height="80" 
        fill="red" 
        stroke="black" 
        stroke-width="3"
        opacity="0.7"
        fill-opacity="0.8" />
</svg>

環境別実装ガイド

HTMLでの直接埋め込み

<!DOCTYPE html>
<html>
<head>
    <title>SVG Rect Example</title>
</head>
<body>
    <svg width="400" height="300" viewBox="0 0 400 300">
        <rect x="100" y="80" width="200" height="140" fill="#4CAF50" />
    </svg>
</body>
</html>

JavaScriptでの動的生成

// SVG要素の作成
const svgNS = "http://www.w3.org/2000/svg";
const svg = document.createElementNS(svgNS, "svg");
svg.setAttribute("width", "400");
svg.setAttribute("height", "300");

// rect要素の作成と設定
const rect = document.createElementNS(svgNS, "rect");
rect.setAttribute("x", "50");
rect.setAttribute("y", "50");
rect.setAttribute("width", "150");
rect.setAttribute("height", "100");
rect.setAttribute("fill", "purple");

svg.appendChild(rect);
document.body.appendChild(svg);

CSSとの連携

.rect-style {
    fill: orange;
    stroke: darkorange;
    stroke-width: 2px;
    transition: fill 0.3s ease;
}

.rect-style:hover {
    fill: coral;
}

<svg width="200" height="200">
  <rect x="40" y="40" width="120" height="80" class="rect-style" />
</svg>

高度なSVG rectテクニック

アニメーションの実装

<svg width="300" height="200">
  <rect x="20" y="80" width="60" height="40" fill="blue">
    <animate attributeName="width" from="60" to="200" dur="2s" repeatCount="indefinite" />
  </rect>
</svg>

グラデーションの適用

<svg width="300" height="200">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect x="50" y="50" width="200" height="100" fill="url(#grad1)" />
</svg>

よくあるエラーと解決策

座標指定の誤り

問題点：座標がSVGの表示領域外にある

<!-- 誤った例 -->
<svg width="100" height="100">
  <rect x="150" y="150" width="50" height="50" fill="red" />
  <!-- 矩形が表示領域外のため表示されない -->
</svg>

解決策：座標を表示領域内に調整

<!-- 正しい例 -->
<svg width="100" height="100">
  <rect x="25" y="25" width="50" height="50" fill="red" />
</svg>

単位の指定ミス

SVGでは単位の指定に注意が必要です。詳細はW3C SVG公式仕様を参照してください。

パフォーマンス最適化

大量のrect要素を使用する場合のパフォーマンス向上策：

同じスタイルの矩形は<use>要素で再利用
複雑なグラデーションは事前定義して参照
アニメーションはCSS transitionsを優先使用

よくある質問（FAQ）

SVG rectとHTML divの違いは何ですか？

SVG rectはベクターグラフィックスの矩形要素であり、拡大縮小しても画質が劣化しません。一方、HTMLのdiv要素はレイアウト用のブロック要素で、拡大するとピクセル化します。用途に応じて適切に選択しましょう。

rect要素で枠線のみの矩形を作るには？

fill属性をnoneに設定し、strokeとstroke-widthで枠線を指定します：

<rect x="10" y="10" width="100" height="80" fill="none" stroke="black" stroke-width="2" />

正方形を作成する方法は？

widthとheightに同じ値を指定するだけです：

<rect x="50" y="50" width="80" height="80" fill="blue" />

まとめ

SVG rectはシンプルながら強力な要素であり、適切に使用することで高品質なベクターグラフィックスを実現できます。基本属性の理解から始め、スタイリング、アニメーション、そしてパフォーマンス最適化まで、段階的にスキルを向上させていきましょう。実践を重ねることで、より洗練されたSVG矩形描画が可能になります。

さらに深く学びたい方は、MDN Web DocsのSVG rect解説を参照することをお勧めします。