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（ベクター） | PNG/JPG（ラスター） |
|---|---|---|
| 拡大・縮小 | 劣化しない | 劣化する（ぼやけ・ギザギザ） |
| ファイルサイズ | 単純図形なら軽量 | 写真・複雑な図は軽量化しやすい（JPG等） |
| CSS/JSでの操作 | 色・形の変更・アニメーションが容易 | 基本的に不可 |
| テキストSEO | インラインなら有効 | alt属性のみ |
| 最適な用途 | ロゴ・アイコン・単純図形 | 写真・複雑イラスト・グラデ |
| 不向きな用途 | 写真・複雑グラデーション | ロゴ・アイコン |
実務フロー：
- ロゴ・アイコン → 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内属性
「スマホでロゴがぼやける」問題は、座標・比率の理解で必ず解決します。
ぜひコードをコピペして、まずは動かしてみてください。
