← カテゴリ一覧に戻る

SVG

svg

SVG（Scalable Vector Graphics）はXMLベースのベクター画像形式。 解像度に依存しないため、どんなサイズでも綺麗に表示される。 HTMLにインラインで埋め込むことも、<img> タグで読み込むこともできる。

デモ：インラインSVG

circle

rect

polygon

SVG

text

path（ハート）

インラインSVGのコード例

<!-- 基本構造 -->
<svg
  width="100"
  height="100"
  viewBox="0 0 100 100"
  xmlns="http://www.w3.org/2000/svg"
>
  <!-- 円 -->
  <circle cx="50" cy="50" r="40" fill="blue" stroke="navy" stroke-width="3" />

  <!-- 四角形 -->
  <rect x="10" y="10" width="80" height="80" rx="8" fill="green" />

  <!-- テキスト -->
  <text x="50" y="55" text-anchor="middle" font-size="20" fill="white">Hello</text>

  <!-- 直線 -->
  <line x1="10" y1="90" x2="90" y2="10" stroke="red" stroke-width="2" />

  <!-- 折れ線 -->
  <polyline points="10,80 30,30 60,60 90,10" fill="none" stroke="orange" stroke-width="2" />

  <!-- 任意のパス -->
  <path d="M 10 80 Q 50 10 90 80" fill="none" stroke="purple" stroke-width="2" />
</svg>

imgタグ・backgroundでの使用

<!-- imgタグで外部SVGを読み込む -->
<img src="/icons/logo.svg" alt="ロゴ" width="120" height="40">

<!-- CSSのbackground-imageとして使う -->
<style>
.icon {
  background-image: url('/icons/arrow.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
}
</style>

<!-- Data URIとして埋め込む -->
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...%3E" alt="">

比較インラインSVG vs 外部ファイル

方法メリットデメリット用途
インラインCSSやJSで要素を操作可能。HTTPリクエスト不要HTMLが肥大化。キャッシュ不可アイコン・アニメーション・動的操作
img タグブラウザキャッシュ可能。HTMLがシンプルCSS・JSでの内部要素操作不可ロゴ・静的なイラスト

Tipsアクセシビリティ対応

<!-- 意味のあるSVG（説明が必要） -->
<svg
  role="img"
  aria-labelledby="svg-title"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
>
  <title id="svg-title">ホームに戻る</title>
  <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
</svg>

<!-- 装飾目的のSVG（スクリーンリーダーから隠す） -->
<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
  <path d="..."/>
</svg>

TipsCSSアニメーションとの組み合わせ

<style>
  .spin {
    animation: rotate 2s linear infinite;
    transform-origin: center;
  }

  @keyframes rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
</style>

<svg viewBox="0 0 50 50" width="50" height="50">
  <circle
    class="spin"
    cx="25" cy="25" r="20"
    fill="none"
    stroke="#3b82f6"
    stroke-width="4"
    stroke-dasharray="80 20"
  />
</svg>

🤖 AIプロンプトテンプレート

以下について、AIへの質問プロンプト例を示します。

- インラインSVG と `<img src="*.svg">` の使い分けを、CSS 操作・キャッシュ・アクセシビリティの観点から教えてください。
- SVG を装飾目的で使う場合と、意味のあるアイコンとして使う場合のアクセシビリティ対応の違いを教えてください。
- `<path>` の `d` 属性（M・C・Q など）のコマンドを簡単に説明し、ハート形や矢印を描く例を教えてください。
- SVG に CSS アニメーション（回転・フェードなど）を適用する基本的な方法を教えてください。
- `viewBox` 属性の役割と、`width`/`height` との関係を、レスポンシブ SVG の作り方と合わせて教えてください。

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo