SVGとは？図解で「ぼやけるロゴ」問題を解決。PNGとの違い・HTML実装・つまずき解消まで

「ロゴがぼやけて先輩に指摘された…」
SVGの“座標”やCSS制御でハマった経験、ありませんか？
私たちWebエンジニアが初めてSVGに触れるとき、viewBoxやfillの扱いで迷うのは“あるある”です。

本記事では、ラスター画像とSVGの違いから、HTML実装、つまずきポイントの分解・コード例まで、一気通貫で「腹落ち」できる形で整理します。
「なぜぼやける？」「なぜCSSが効かない？」…悩みの根本に、現場目線で伴走します。

用語解説：SVG
Scalable Vector Graphicsの略。数値や座標で形を記述するベクター画像フォーマット。拡大・縮小しても劣化せず、Webロゴやアイコンに最適。

用語解説：ラスター画像
PNGやJPGなど、ピクセル（点）の集まりで構成される画像。拡大するとぼやけやギザギザが発生しやすい。

用語解説：ベクター画像
数式や座標で形を表現する画像形式。SVGやAI（Illustrator形式）などが該当し、拡大・縮小しても画質が劣化しない。

用語解説：viewBox
SVG内で描画する範囲や座標系を指定する属性。”viewBox=\”0 0 100 100\””のように記述し、レスポンシブ対応や比率維持に重要。

用語解説：fill
SVG要素の塗りつぶし色を指定する属性。CSSや属性で色を制御できる。

SVGとは？画像がぼやけないベクターの仕組み

「拡大したらギザギザ」「スマホでロゴがぼやける」――
その原因はラスター画像（PNG・JPG）の仕組みにあります。
ラスター画像はピクセル（点の集まり）でできているため、拡大時に荒く見えます。

一方、SVGはベクター画像です。
数値（座標や数式）で形を記述するため、どれだけ拡大・縮小しても輪郭が滑らか。
イメージは「ドット絵」と「設計図」の違い――
ロゴやアイコンなど、あらゆるデバイスでクリアに見せたい要素に最適です。

（SVGやWeb画像形式の使い分けについては『フロントエンドフレームワーク徹底比較！React・Vue・Angular違いと選び方』もご参照ください）

用語解説：PNG
Portable Network Graphicsの略。透過や劣化しない保存が可能なラスター画像形式。

用語解説：JPG
JPEG形式。写真や複雑な画像の圧縮に適したラスター画像。

用語解説：ピクセル
画像を構成する最小単位の点。ラスター画像はピクセルの集合体。

【比較表】SVG vs PNG/JPG 実務での使い分け

全てをSVGにすべき…？
実は使い分けが肝心です。

実務フロー：

• ロゴ・アイコン → SVG（色変え・レスポンシブ対応も簡単）
• 写真 → JPG/WebP（容量重視）
• 透過イラスト → PNG（背景透明化）
• CSSで色・形を変えたい → SVG一択

用途ごとに判断すると、迷いません。

（画像圧縮やWebPの活用については『Webフォント最適化チェックリスト｜なぜ遅い？原因とサブセット化・font-display完全解説』もご参照ください）

用語解説：alt属性
画像が表示できない場合やSEO対策のために、画像の内容を説明するテキストを指定するHTML属性。

用語解説：WebP
Googleが開発した画像フォーマット。高圧縮・高画質で、JPGやPNGの代替として使われる。

用語解説：グラデ
グラデーションの略。色が滑らかに変化する表現。

目的別：HTMLでSVGを使う3パターン

SVGをWebに表示する方法は主に3つ――
それぞれの特徴を整理します。

1. <img>タグで表示

<img src="logo.svg" alt="サイトロゴ">

• メリット：手軽・キャッシュが効く
• デメリット：内部の色や形をCSS/JSで変更不可

2. インラインSVG

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50" fill="blue"/>
</svg>

• メリット：CSS/JSで操作自由・高速表示
• デメリット：HTMLが長く・キャッシュ不可

用語解説：インラインSVG
HTML内に直接SVGコードを記述する方法。CSSやJSで細かく制御できる。

用語解説：キャッシュ
一度読み込んだデータを一時保存し、再表示時の高速化や通信量削減を図る仕組み。

3. <object>タグで読み込み

<object data="icon.svg" type="image/svg+xml"></object>

• メリット：部分的な操作が可能・キャッシュ有効
• デメリット：実装やや煩雑、利用例は少なめ

結論：
・色や動きを変える場合＝インラインSVG
・画像として静的に見せる場合＝<img>タグ

【最重要】viewBoxでレスポンシブ崩れを防ぐ

viewBoxでつまずいた――
そんな経験はありませんか？

width/heightとviewBoxの関係

• viewBoxは「SVG画像内の切り出し範囲」
  書式：viewBox=”min-x min-y width height”
• width/heightは「HTML上の表示サイズ（額縁）」

例：viewBox=”0 0 100 100″
→座標(0,0)から幅100,高さ100を切り出す

viewBoxのアスペクト比とwidth/heightがズレると、
意図しない表示崩れが発生します。

用語解説：アスペクト比
画像や画面の縦横比。SVGのviewBoxとwidth/heightの比率が異なると表示が崩れる。

preserveAspectRatioで比率を制御

• preserveAspectRatio=”xMidYMid meet”（デフォルト）
  SVGを中央配置＆アスペクト比維持
• sliceを指定すると「額縁」全体を覆う（余白なし、はみ出し切り落とし）

設定の意図を理解すれば、どんなデバイスでも綺麗に見せられます。

用語解説：preserveAspectRatio
SVGの表示時にアスペクト比や配置方法を制御する属性。”meet”は余白あり、”slice”は余白なしで全体を覆う。

CSSでSVGの色・形を自在に変える方法

「CSSが効かない！」
3つの主な原因を整理します。

1. <img>で読み込むと操作不可

• <img>タグ経由のSVGは、外部画像扱いで内部にCSSが届かない
• 色を変えたい場合は必ずインラインSVGを使う

2. SVG内の属性指定が優先

• <path fill=”#000000″ … >など、SVG側に直接属性があるとCSSより優先
• 解決策：属性を削除 or fill: blue !important;で上書き

3. CSSセレクタの記述ミス

• クラスやIDの指定忘れ・誤りで「効かない」ことが多い
• HTML同様、svg .my-circle { … }など正確に指定

基本の記述例

svg .my-circle { fill: red; transition: fill 0.3s; }
svg:hover .my-circle { fill: blue; }

（CSSの詳細な使い分けや命名規則については『CSS設計で保守性と拡張性を高める方法｜BEM・OOCSS・SMACSS徹底比較』や『CSS GridとFlexbox徹底比較！違い・使い分け・選び方完全ガイド【2025年版】』をご参照ください）

用語解説：CSSセレクタ
HTMLやSVG内の特定要素を選択し、スタイルを適用するための指定方法。

React/VueでSVGアイコンをコンポーネント化

Reactなら下記のように再利用可能なSVGコンポーネントにできます。

// Icon.js
const Icon = ({ culor = 'black', size = 24 }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={size}
    height={size}
    viewBox="0 0 24 24"
    fill="none"
    stroke={culor}
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <circle cx="12" cy="12" r="10" />
    <line x1="12" y1="8" x2="12" y2="16" />
    <line x1="8" y1="12" x2="16" y2="12" />
  </svg>
);
export default Icon;
// App.js
import Icon from './Icon';
const App = () => (
  <div>
    <p>デフォルトカラーのアイコン</p>
    <Icon />
    <p>色とサイズを指定したアイコン</p>
    <Icon culor="red" size={48} />
  </div>
);

propsで色やサイズが自由自在。
大量のアイコンも効率管理できます。

（ReactやVueの実践的な使い方については『フロントエンドフレームワーク徹底比較！React・Vue・Angular違いと選び方』や『Vue.js・React案件の参画準備7選｜SESエンジニアがつまずかないための知識』もご参照ください）

用語解説：props
ReactやVueなどのコンポーネントに値を渡す仕組み。色やサイズなどを柔軟に指定できる。

FAQ

• Q. SVGはSEOに有効？
  A. インラインSVGなら<text>や<title>要素がGoogleに認識されるので、SEO効果が期待できます。
• Q. アイコンフォントとの違いは？
  A. SVGは複数色・アクセシビリティ・セマンティック対応など、現代的な要件に最適。
  アイコンフォントよりおすすめです。
• Q. IllustratorやFigmaは必須？
  A. いいえ。<circle>や<rect>を手書きで作ることも可能。
  オンラインの無料ツールも充実。
• Q. 複雑なアニメーションもできる？
  A. CSSやJSライブラリ（GSAP等）で高度なアニメも対応可能です。
• Q. <img>経由で色を変えたい時は？
  A. filter: hue-rotate(…)等での色変えは可能ですが、制約が多くおすすめできません。
  インラインSVGを推奨します。

まとめ

• SVGは拡大してもぼやけないベクター画像
• ロゴ・アイコンにはSVG、写真にはJPG/PNG
• 動的操作はインラインSVG、静的表示は<img>タグ
• viewBox・preserveAspectRatioで崩れ防止
• CSSが効かない主因は<img>やSVG内属性

「スマホでロゴがぼやける」問題は、座標・比率の理解で必ず解決します。
ぜひコードをコピペして、まずは動かしてみてください。