PR

HEICをJPGに変換する全手法！Windows・Mac・スマホで画質を落とさず一括変換

無料画像サイト
記事内に広告が含まれています。
  • 「Webサイトのロゴがなんだかぼやけている」
  • 「スマホで見るとアイコンがギザギザしている」

そんな悩みを一発で解決してくれるのが「SVG（エスブイジー）」という画像形式です。

今やWebデザインの現場では、ロゴやアイコンを表示する際にSVGを使うのが当たり前になりました。
拡大しても縮小しても、どれだけ高画質な画面で見ても、カミソリのように鋭く鮮明な線を保てるからです。
しかも、色を変えたりアニメーションさせたりといった、従来の画像ではできなかった表現まで可能になります。

本記事では、SVGの基礎知識から、実際にWebサイトで使うためのコードの書き方、さらには動かすためのテクニックまでを網羅しました。
これを読み終わるころには、あなたはSVGを自由自在に操り、Webサイトのクオリティを一段階引き上げられるようになっているはずです。
さあ、画質劣化のない美しいWebの世界へ踏み出しましょう。

  1. SVG（スケーラブル・ベクター・グラフィックス）とは？
    1. ビットマップ画像（ラスタ形式）との決定的な構造の違い
    2. SVGの実体は「画像」ではなく「テキストデータ（XML）」である
    3. W3Cによる標準化とブラウザ対応の歴史
  2. SVGファイルを採用する最大のメリット
    1. メリット①：どれだけ拡大・縮小しても画質が一切劣化しない
    2. メリット②：Retinaディスプレイなどの高解像度端末でくっきり表示される
    3. メリット③：単純な図形やロゴならファイル容量が圧倒的に軽い
    4. メリット④：CSSやJavaScriptで色変更・アニメーション制御ができる
    5. メリット⑤：テキストデータを含むためSEO（検索エンジン最適化）に強い
    6. メリット⑥：レスポンシブデザインでの画像書き出しの手間が減る
  3. SVGファイルを使用する際のデメリット・注意点
    1. デメリット①：写真や複雑なグラデーション表現には不向き
    2. デメリット②：パスデータが複雑すぎると描画負荷（レンダリングコスト）が高まる
    3. デメリット③：Wordpress等のCMSではセキュリティ設定の変更が必要な場合がある
    4. デメリット④：古いブラウザ（IEなど）では一部機能が制限される可能性がある
  4. SVG・JPG・PNG・WebPの比較と使い分け
    1. 各画像形式のスペック比較表
    2. JPG（ジェイペグ）を選ぶべきシーン｜写真・色彩豊かな画像
    3. PNG（ピング）を選ぶべきシーン｜透過が必要な複雑な図版
    4. WebP（ウェッピー）を選ぶべきシーン｜表示速度最優先の軽量化
    5. SVG（エスブイジー）を選ぶべきシーン｜ロゴ・アイコン・グラフ
  5. SVG画像の作り方・作成ツール
    1. Adobe Illustrator（イラレ）で作成してSVG保存する手順
    2. FigmaやAdobe XDなどのUIデザインツールから書き出す方法
    3. CanvaやPhotoshopでSVGを扱う際の注意点
    4. 無料のSVG変換ツールを使ってJPG/PNGから変換する方法
    5. テキストエディタで直接コードを書いて図形を描画する方法
  6. WebサイトでSVGを表示させる4つの記述方法
    1. 基本の書き方｜imgタグのsrc属性で読み込む
    2. CSS操作向け｜svgタグでHTML内に直接埋め込む（インラインSVG）
    3. 背景画像として利用｜CSSのbackground-imageプロパティで指定する
    4. 高度な操作向け｜objectタグやiframeタグを使用する
  7. 【応用編】SVGのコード（中身）を読み解く
    1. svgタグの基本構造とxmlns（名前空間）の役割
    2. viewBox属性とは？描画エリアと座標系の仕組みを理解する
    3. 基本図形の描画コード（rect, circle, line, polygon）
    4. path（パス）要素の「d属性」こそがベクターデータの正体
    5. gタグ（グループ化）とdefsタグ（定義）による再利用の仕組み
  8. SVGをCSSとJavaScriptで動かすテクニック
    1. CSSのhoverでアイコンの色をふわっと変える方法
    2. strokeプロパティを使って「線が描かれる」アニメーションを作る
    3. CSS keyframesで図形を回転・拡大縮小させる
    4. SMIL（SVG独自のアニメーション機能）とCSSアニメーションの違い
  9. SVG使用時の「表示されない」トラブルシューティング
    1. Illustratorからの書き出し設定で余計なコードが含まれている
    2. viewBoxの設定ミスで画像が見切れている・小さすぎる
    3. imgタグで読み込むとCSSのfill（色変更）が効かない理由
    4. サーバー側（MIMEタイプ）の設定が必要なケース
    5. WordPressのメディアライブラリにアップロードできない時の対処法
  10. SVGのセキュリティリスクと対策
    1. SVGに悪意あるJavaScriptが埋め込まれるXSS（クロスサイトスクリプティング）リスク
    2. 信頼できるソース以外のSVGファイルを開かない・アップロードしない
    3. サニタイズ（無害化）処理の重要性と具体的なツール
  11. 2025年以降のSVG活用トレンド
    1. SVGファビコン（Favicon）の普及とダークモード対応
    2. SVGスプライトによるHTTPリクエスト数の削減と高速化
    3. LottieなどのJSONベースのアニメーションとSVGの関係
  12. SVGに関するよくある質問
    1. SVGファイルはスマホで撮影した写真から作れますか？
    2. SVGをパワーポイントやエクセルで使うことはできますか？
    3. SVGファイルが開けない時はどうすればいいですか？
    4. SVGのアニメーションは重くなりますか？
  13. まとめ：SVGを使いこなしてWebサイトの品質を上げよう

SVG（スケーラブル・ベクター・グラフィックス）とは？

SVGとは、画像を「座標や数式の集まり」として記録する、Webに特化した画像フォーマットのことです。

正式名称は「Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）」といいます。
それぞれの単語が持つ意味を知ると、SVGの本質がすっと頭に入ってきます。

  • Scalable（スケーラブル）
    大きさを自由に変えられる（伸縮自在）
  • Vector（ベクター）
    ベクター形式（点と線で描画する方式）
  • Graphics（グラフィックス）
    画像

つまり、「どれだけ拡大縮小しても劣化しない、計算式で描かれた画像」とお考えください。

ビットマップ画像（ラスタ形式）との決定的な構造の違い

SVGを理解するには、私たちが普段よく使うJPG（ジェイペグ）やPNG（ピング）との違いを知るのが一番の近道です。
JPGやPNGは「ビットマップ画像（ラスタ形式）」と呼ばれ、色のついた小さな点（ドット）を無数に並べて絵を作っています。

モザイクアートやクロスステッチ刺繍をイメージしてください。
遠目で見れば綺麗ですが、近づいて拡大すると一つひとつの四角いドットが見えてしまい、画像がガタガタに荒れてしまいます。

一方でSVG（ベクター形式）は、「ここからここへ直線を引く」「この中心点から半径◯mmの円を描く」といった「描画の命令書」を持っています。
表示するたびにコンピュータが命令書を読み込んで線を引くため、どれだけ拡大しても滑らかな曲線を維持できるのです。

SVGの実体は「画像」ではなく「テキストデータ（XML）」である

驚かれるかもしれませんが、SVGファイルの中身はただの文字（テキストデータ）です。
実際にSVGファイルをテキストエディタ（メモ帳など）で開いてみると、アルファベットと数字の羅列が表示されます。

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

例えば上記のコードは、「幅100、高さ100のキャンバスに、中心座標(50,50)で半径40の赤い円を描け」という命令文です。
ブラウザはこの文字情報を瞬時に解読し、画面上に赤い円を描画します。

つまりSVGとは、画像のように見えて、実はHTMLと同じ「マークアップ言語（コード）」なのです。

W3Cによる標準化とブラウザ対応の歴史

SVGは、Web技術の標準化を行う団体「W3C」によって開発されました。
1999年ごろから策定が始まりましたが、当時は通信速度も遅く、ブラウザの対応も進んでいなかったため、あまり普及しませんでした。

しかし、iPhoneの登場による「高解像度（Retina）ディスプレイ」の普及や、通信環境の劇的な向上により、状況は一変します。
現在ではChrome、Safari、Firefox、Edgeといった主要なブラウザすべてが標準対応しており、Web制作において欠かせない技術として確固たる地位を築いています。

SVGファイルを採用する最大のメリット

SVGを使う最大の利点は、現代の多様な閲覧環境において、常に「最高品質の見た目」を提供できることです。
パソコン、タブレット、スマートフォンと、画面サイズがバラバラな現代において、SVGほど頼りになる形式はありません。

具体的なメリットを見ていきましょう。

メリット①：どれだけ拡大・縮小しても画質が一切劣化しない

最大の強みは、どんなサイズで表示しても画像が荒れないことです。
JPGなどの画像は、元のサイズより大きく表示しようとすると、ぼやけたりギザギザ（ジャギー）が発生したりします。

しかしSVGは、表示するたびに計算して描画を行うため、アイコンを10倍の大きさに引き伸ばしても、驚くほど滑らかな曲線を保ちます。
ロゴマークやアイコンなど、くっきり見せたい要素には最適です。

メリット②：Retinaディスプレイなどの高解像度端末でくっきり表示される

高精細なディスプレイを持つ最新のスマートフォンやPCでも、SVGなら滲むことなく鮮明に表示されます。
従来の画像形式でRetinaディスプレイに対応しようとすると、わざわざ「2倍サイズの画像」を用意する必要がありました。

SVGならファイルは1つで済み、どんな高解像度スクリーンでも、まるで印刷物のように美しく表示されます。

メリット③：単純な図形やロゴならファイル容量が圧倒的に軽い

シンプルなロゴやアイコンであれば、JPGやPNGよりもファイルサイズを劇的に小さくできます。
ビットマップ画像は、画像サイズ（面積）が大きくなればなるほど、色の情報をたくさん保存しなければならないため、容量が重くなります。

対してSVGは、あくまで「計算式」のテキストデータです。
図形がシンプルであれば、どんなに大きなサイズで表示しようとも、データの記述量は数行で済むため、容量は数KB（キロバイト）程度に収まります。

Webサイトの読み込み速度向上にも大きく貢献するはずです。

メリット④：CSSやJavaScriptで色変更・アニメーション制御ができる

SVGはコードで書かれているため、Webサイトの装飾言語であるCSSを使って、後から色や形を変えられます。

例えば、「マウスを乗せたときにアイコンの色を赤に変える」といった操作が、画像ファイルを差し替えることなく、CSSの記述だけで完結します。
さらにJavaScriptと組み合わせれば、線が生き物のように動いたり、図形が変形したりするリッチなアニメーションも実装可能です。

メリット⑤：テキストデータを含むためSEO（検索エンジン最適化）に強い

画像の中に含まれる文字情報を、Googleなどの検索エンジンが読み取れる点も大きなメリットです。
JPGやPNGの中に書かれた文字は、検索エンジンにとっては単なる「絵」の一部であり、文字として認識されにくい傾向にあります。

SVG内のテキストはコードとして記述されているため、検索エンジンが内容を理解しやすく、画像検索の結果などに良い影響を与える可能性があります。

メリット⑥：レスポンシブデザインでの画像書き出しの手間が減る

Web制作の現場では、PC用、タブレット用、スマホ用と、画面サイズに合わせて複数の画像を用意する作業が発生します。

SVGを採用すれば、1つのファイルですべてのサイズに対応できるため、面倒な画像の書き出し作業や管理の手間から解放されます。
「画像を作り直す」という作業が減るため、制作効率は格段に上がるでしょう。

SVGファイルを使用する際のデメリット・注意点

万能に見えるSVGにも、苦手なことや注意すべき点は存在します。
特性を理解せずに何でもSVGにしてしまうと、かえってWebサイトが重くなったり、表示が崩れたりする原因になります。

以下のポイントをしっかり押さえておきましょう。

デメリット①：写真や複雑なグラデーション表現には不向き

SVGは、風景写真や人物写真のような「複雑な色の集合体」を表現するのは不得意です。
写真のような画像を無理やりSVG（ベクターデータ）に変換しようとすると、膨大な数のパス（計算式）が必要になり、ファイルサイズが数百MBになってしまうこともあります。

写真は素直にJPGやWebPを使うのがベストです。

デメリット②：パスデータが複雑すぎると描画負荷（レンダリングコスト）が高まる

イラストレーターなどで作成したあまりにも複雑なイラストは、表示に時間がかかることがあります。
アンカーポイント（線の結び目）が数万個もあるような地図データや、細かすぎる装飾をSVGにすると、ブラウザが描画計算をするのにパワーを使ってしまい、スマホの動作が重くなる原因になります。

複雑なイラストを使う場合は、パスを簡略化するか、あえてPNG画像として書き出す判断も必要です。

デメリット③：Wordpress等のCMSではセキュリティ設定の変更が必要な場合がある

WordPressなどのCMS（コンテンツ管理システム）では、セキュリティの観点から、初期状態ではSVGのアップロードが禁止されているケースが多いです。
SVGは中身がコードであるため、悪意のあるスクリプトを仕込まれるリスクがゼロではないからです。

使用するには、専用のプラグインを入れるか、functions.php という設定ファイルを編集してアップロードを許可する設定を行う必要があります。

デメリット④：古いブラウザ（IEなど）では一部機能が制限される可能性がある

Internet Explorer（IE）などの開発が終了した古いブラウザでは、SVGの一部機能が正しく動作しないことがあります。

とはいえ、現在はMicrosoft自体がIEのサポートを終了しており、Web制作の現場でもIE対応を必須としないケースがほとんどです。
官公庁や特殊な環境向けサイトでない限り、そこまで神経質になる必要はないでしょう。

SVG・JPG・PNG・WebPの比較と使い分け

Webサイトで使用する画像形式は、適材適所で使い分けるのが鉄則です。
それぞれの特徴を整理しましたので、迷ったときの判断材料にしてください。

各画像形式のスペック比較表

形式拡張子特徴透過アニメ最適な用途
SVG.svgベクター形式。拡大しても劣化なし。◯◯ロゴ、アイコン、グラフ、図形
JPG.jpgラスタ形式。写真が得意。透過不可。××人物写真、風景写真、グラデーション
PNG.pngラスタ形式。劣化なし圧縮。透過得意。◯×複雑な図版、透過が必要な切り抜き画像
WebP.webp次世代フォーマット。高画質で軽量。◯◯Webサイト上の画像全般（写真・図版）

JPG（ジェイペグ）を選ぶべきシーン｜写真・色彩豊かな画像

色数が多く、滑らかな色の変化がある画像にはJPGを選びましょう。
カメラで撮影した写真や、複雑なグラデーションを使ったバナー画像などが該当します。

人の目は色の変化には鈍感なため、画質を少し落としてファイルサイズを劇的に軽くする圧縮が得意です。

PNG（ピング）を選ぶべきシーン｜透過が必要な複雑な図版

背景を透明にしたいけれど、画像の内容が複雑すぎてSVGにするには重すぎる場合はPNGが活躍します。
例えば、手書き風の複雑なイラストや、スクリーンショット、文字を含んだバナー画像などです。

JPGと違って保存を繰り返しても画質が劣化しないため、編集中の画像データとしても扱いやすいです。

WebP（ウェッピー）を選ぶべきシーン｜表示速度最優先の軽量化

Googleが開発したWebPは、JPGやPNGの良いとこ取りをしたような形式です。
写真も図版も高画質のまま、ファイルサイズを2〜3割ほど小さくできます。

現在ではほぼ全てのブラウザに対応しているため、写真画像をWebPに変換して掲載するのが、Webサイト高速化のスタンダードになりつつあります。

SVG（エスブイジー）を選ぶべきシーン｜ロゴ・アイコン・グラフ

幾何学的な図形、企業のロゴマーク、アイコン、グラフやチャートには迷わずSVGを採用しましょう。
これらの要素は「くっきり表示されること」が品質に直結します。
また、色を頻繁に変更するUIパーツ（ボタンなど）にも最適です。

SVG画像の作り方・作成ツール

SVGファイルを作るのは難しくありません。
プロのデザイナーが使うソフトから、誰でも使える無料ツールまで、作成方法はいくつもあります。

Adobe Illustrator（イラレ）で作成してSVG保存する手順

プロの現場で最も使われているのがAdobe Illustratorです。
ベクターデータを作成するのに特化したソフトなので、最もきれいなSVGを書き出せます。

  • イラストレーターでロゴやイラストを作成する。
  • 文字データがある場合は、必ず「アウトライン化」を行う（文字を図形に変換する）。
  • メニューの「ファイル」＞「別名で保存」を選択する。
  • ファイル形式のプルダウンから「SVG (*.SVG)」を選んで保存する。

これだけで完了です。
書き出しオプションが表示されますが、基本的にはデフォルトの設定で問題ありません。

FigmaやAdobe XDなどのUIデザインツールから書き出す方法

Webデザインやアプリデザインで人気のFigmaやAdobe XDからも簡単に書き出せます。
これらのツールは最初からWeb用素材を作ることを前提としているため、設定もシンプルです。

  • Figmaの場合
    対象の要素を選択し、右サイドバーの「Export」セクションで「SVG」を選択して書き出しボタンを押す。
  • Adobe XDの場合
    対象を選択し、「ファイル」＞「書き出し」＞「選択済み」を選び、フォーマットで「SVG」を指定する。

CanvaやPhotoshopでSVGを扱う際の注意点

ノンデザイナーに人気のCanvaや、写真加工ソフトのPhotoshopでもSVG書き出しは可能です。
ただし、注意点があります。

もともとが写真（ビットマップ）の画像を読み込んで、そのままSVGとして保存しても、中身は「SVGの箱に入ったただの画像」になってしまいます。

SVGのメリットである「拡大しても劣化しない」恩恵を受けるには、Canvaの「素材」として用意されているイラストを使うか、Photoshopの「シェイプ」機能を使って描画した図形である必要があります。

無料のSVG変換ツールを使ってJPG/PNGから変換する方法

手元にあるJPGやPNGのロゴ画像をSVGに変換したい場合は、オンラインの変換ツールが便利です。
「Vector Magic」や「Adobe Express」の無料変換機能などが有名です。

画像をアップロードするだけで、AIが自動的に輪郭をトレースし、ベクターデータに変換してくれます。
ただし、複雑な画像だと変換精度が落ちることがあるため、変換後は必ず拡大して仕上がりを確認しましょう。

テキストエディタで直接コードを書いて図形を描画する方法

シンプルな図形であれば、メモ帳などのテキストエディタで直接コードを書いてSVGファイルを作ることもできます。
例えば、以下のコードをコピーして、拡張子を「.svg」にして保存してみてください（例：circle.svg）。

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <rect width="100" height="100" fill="orange" />
</svg>

これをブラウザにドラッグ＆ドロップすると、オレンジ色の正方形が表示されるはずです。
ソフトがなくても画像が作れる、これがSVGの面白いところです。

WebサイトでSVGを表示させる4つの記述方法

作成したSVGをWebページに表示するには、いくつかの方法があります。
やりたいこと（単純表示か、アニメーションさせたいか）に合わせて選びましょう。

基本の書き方｜imgタグのsrc属性で読み込む

最も簡単で一般的なのが、JPGやPNGと同じように <img> タグで読み込む方法です。
単に画像として表示したいだけであれば、この方法が手軽です。

<img src="logo.svg" alt="会社ロゴ" width="200" height="50">

これだけで表示されます。
ただし、この方法だと画像の中身（コード）にアクセスできないため、CSSで後から色を変えるといった操作はできません。

CSS操作向け｜svgタグでHTML内に直接埋め込む（インラインSVG）

SVGの色を変えたりアニメーションさせたりしたい場合は、SVGファイルのコードの中身をそのままHTMLに貼り付けます。
これを「インラインSVG」と呼びます。

<div class="header-logo">
  <svg viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" class="my-circle" />
  </svg>
</div>

こうしてHTMLの一部として記述することで、CSSで .my-circle { fill: blue; } のように指定して色を自由に変更できるようになります。
マウスオーバー時の色変更（ホバーエフェクト）などを実装したい場合は、この方法が必須です。

背景画像として利用｜CSSのbackground-imageプロパティで指定する

アイコンを背景模様として使いたい場合などは、CSSの background-image プロパティで指定します。

.icon-box {
  background-image: url("icon.svg");
  width: 30px;
  height: 30px;
}

<img> タグと同様、この方法でもCSSによる内部の色変更はできません。
色の違うアイコンが必要な場合は、色違いのSVGファイルを別途用意する必要があります。

高度な操作向け｜objectタグやiframeタグを使用する

あまり一般的ではありませんが、<object> タグを使ってSVGを埋め込む方法もあります。
外部ファイルとしてSVGを読み込みつつ、JavaScriptでその中身を操作したい場合などに使われますが、実装が少々複雑になるため、基本的にはインラインSVGの使用をおすすめします。

【応用編】SVGのコード（中身）を読み解く

プロのWeb制作者を目指すなら、SVGのコードが何を意味しているのか、少しだけ理解しておくと便利です。
「図形がどう描かれているか」を知れば、トラブルが起きたときに自分で修正できるようになります。

svgタグの基本構造とxmlns（名前空間）の役割

SVGファイルの一番外側は必ず <svg> タグで囲まれています。
その中に xmlns="http://www.w3.org/2000/svg" という呪文のような記述がありますが、これは「名前空間（ネームスペース）」といって、「これはHTMLではなくSVGの記述ですよ」とブラウザに教えるための宣言です。

これがないと、ブラウザが正しく画像として認識してくれないことがあります。

viewBox属性とは？描画エリアと座標系の仕組みを理解する

SVGにおいて最も肝心なのが viewBox（ビューボックス）属性です。
これは「カメラの画角」のようなものです。

<svg viewBox="0 0 100 100">

この数字は左から順に min-x min-y width height を表しています。
つまり「座標(0,0)を起点に、幅100、高さ100のエリアを表示します」という意味です。

この viewBox の設定が正しくないと、図形が見切れてしまったり、余白が大きすぎたりする原因になります。

基本図形の描画コード（rect, circle, line, polygon）

SVGには、よく使う図形を描くための専用タグが用意されています。

  • <rect>：四角形（Rectangle）
  • <circle>：円（Circle）
  • <line>：直線
  • <polygon>：多角形

これらのタグに、座標やサイズを指定するだけで図形が描けます。
直感的でわかりやすいですね。

path（パス）要素の「d属性」こそがベクターデータの正体

複雑なイラストやロゴは、ほとんどが <path>（パス）というタグで描かれています。
この中にある d="..." という属性に、恐ろしく長い英数字が入っていますが、これこそが「ペンの動き」を記録したデータです。

  • M：Move to（ペンを移動）
  • L：Line to（線を引く）
  • C：Curve to（曲線を引く）

「M 10 10 L 50 50」なら、「(10,10)に移動して、(50,50)まで線を引け」という意味になります。
Illustratorなどのソフトは、私たちが描いた絵をこの命令文に翻訳してくれているのです。

gタグ（グループ化）とdefsタグ（定義）による再利用の仕組み

<g> タグは「Group」の略で、複数の図形をまとめてグループ化するときに使います。
グループに対してCSSを指定すれば、中の図形すべてにスタイルが適用されるので便利です。

また、<defs>（定義）タグを使うと、一度作った図形を「部品」として登録し、<use> タグを使って何度も使い回すことができます。
同じアイコンを何度も表示させたいときに、コードを短くできる賢い機能です。

SVGをCSSとJavaScriptで動かすテクニック

静止画としてだけでなく、Webサイト上で「動く画像」として扱えるのがSVGの醍醐味です。
ユーザーの目を引く演出が、驚くほど少ないコード量で実装できます。

CSSのhoverでアイコンの色をふわっと変える方法

インラインSVGで埋め込んだアイコンなら、マウスを乗せたときに色を変えるのはCSSだけで完結します。

/* アイコンの初期色 */
.my-icon path {
  fill: #333;
  transition: fill 0.3s; /* 0.3秒かけて変化させる */
}

/* マウスが乗ったときの色 */
.my-icon:hover path {
  fill: #e74c3c; /* 赤色に変化 */
}

fill プロパティは、SVG図形の「塗りつぶしの色」を指定するものです。
transition をつければ、色がふわっと滑らかに変わるアニメーションになります。

strokeプロパティを使って「線が描かれる」アニメーションを作る

よく見かける「線が一筆書きのように描かれていくアニメーション」も、CSSだけで作れます。
使うのは stroke-dasharray（破線の間隔）と stroke-dashoffset（破線の開始位置）というプロパティです。

仕組みは少しトリッキーですが、「ものすごく長い破線」を用意し、最初は破線の「隙間」部分を表示しておき、徐々に「線」の部分をずらして表示させることで、線が伸びていくように見せています。
手描き風の演出にぴったりです。

CSS keyframesで図形を回転・拡大縮小させる

SVGもHTML要素の一つなので、通常のCSSアニメーション（@keyframes）がそのまま使えます。
ローディングアイコンをくるくる回したり、注目してほしいボタンを定期的に拡大・縮小させたりといった動きが簡単に実装できます。

SMIL（SVG独自のアニメーション機能）とCSSアニメーションの違い

実はCSSを使わなくても、SVGのファイル内（<animate>タグなど）に直接アニメーションの命令を書くことができます。
これを「SMIL（スマイル）」と呼びます。

SMILは「図形の形そのものを変形させる（モーフィング）」といった高度なアニメーションが得意ですが、記述が独特で少し難易度が高いです。
まずはCSSアニメーションから始めるのが手軽でおすすめです。

SVG使用時の「表示されない」トラブルシューティング

便利ですが、慣れないうちは「あれ？表示されない」「色が変えられない」といったトラブルに遭遇しがちです。
よくある症状と解決策をまとめました。

Illustratorからの書き出し設定で余計なコードが含まれている

Illustratorから書き出す際、「レスポンシブ」のチェックを外していたり、独自の編集データを含めてしまったりすると、ブラウザでサイズ調整が効かなくなることがあります。

書き出し時の設定画面で「スタイル要素：内部CSS」「画像：埋め込み」「レスポンシブ：チェックを入れる」にするのが基本の設定です。

viewBoxの設定ミスで画像が見切れている・小さすぎる

SVGが表示されているけれど、端っこが切れていたり、やたらと小さく表示されたりする場合は、viewBox 属性の値がおかしい可能性が高いです。

コードを確認し、描画したい図形が viewBox で指定されたエリア内に収まっているかチェックしましょう。
Illustratorで「アートボードのサイズ」を図形ぴったりに合わせてから書き出すと、このミスを防げます。

imgタグで読み込むとCSSのfill（色変更）が効かない理由

「CSSで fill: red; と書いたのに色が変わらない！」という質問は非常によくあります。
前述のとおり、<img> タグや background-image で読み込んだSVGは、外部ファイル扱いになるため、親元のHTMLにあるCSSからは操作できません。

色を変えたいなら、必ずHTML内にコードを直接書く「インラインSVG」にする必要があります。

サーバー側（MIMEタイプ）の設定が必要なケース

古いレンタルサーバーなどでは、サーバー側が「SVGファイル」を知らない設定になっていることがあります。
この場合、ブラウザがファイルを受け取っても正しく表示できません。

.htaccess という設定ファイルに「SVGは画像ファイルですよ」という宣言（MIMEタイプの設定）を追加する必要があります。

WordPressのメディアライブラリにアップロードできない時の対処法

WordPressで「このファイルタイプはセキュリティの理由から許可されていません」とエラーが出る場合は、「SVG Support」や「Safe SVG」といったプラグインをインストールしましょう。

これだけでアップロード制限が解除され、安心して使えるようになります。
サムネイル表示も可能になるので、管理が楽になります。

SVGのセキュリティリスクと対策

SVGはプログラムを含むことができるため、セキュリティについても少しだけ知識を持っておく必要があります。
怖がる必要はありませんが、「知らない」のはリスクです。

SVGに悪意あるJavaScriptが埋め込まれるXSS（クロスサイトスクリプティング）リスク

SVGファイルの中には、<script> タグを使ってJavaScriptを記述できます。
これを悪用して、悪意のあるコードが含まれたSVGファイルを表示させることで、ユーザーの情報を盗むといった攻撃（XSS）が可能になる理論上のリスクがあります。

信頼できるソース以外のSVGファイルを開かない・アップロードしない

対策はシンプルです。
「出所不明の怪しいSVGファイルは使わない」ことです。
自分で作成したSVGや、Adobe Stockなどの信頼できる素材サイトからダウンロードしたものであれば安全です。

掲示板などで拾ったSVGファイルをそのまま自社サイトにアップロードするのは避けましょう。

サニタイズ（無害化）処理の重要性と具体的なツール

WebサービスなどでユーザーがSVGをアップロードできる機能を実装する場合は、必ず「サニタイズ（無害化）」処理を行います。
これは、SVGコードの中から <script> タグなどの危険な要素を自動的に削除してくれる処理のことです。

「DOMPurify」などのライブラリを使えば簡単に実装できます。

2025年以降のSVG活用トレンド

Web技術は日々進化しています。
SVGの活用方法も、単なる画像の表示からさらに広がりを見せています。
最新のトレンドを押さえておきましょう。

SVGファビコン（Favicon）の普及とダークモード対応

Webブラウザのタブに表示される小さなアイコン「ファビコン」にも、SVGが使えるようになっています。
最大のメリットは「ダークモード対応」です。

SVGの中に「ブラウザがダークモードのときは白、ライトモードのときは黒」というCSS（メディアクエリ）を記述しておけば、ユーザーの環境に合わせて自動で色が変わる賢いアイコンが作れます。
Safariなどの主要ブラウザでもサポートが進み、今後はSVGファビコンが主流になるでしょう。

SVGスプライトによるHTTPリクエスト数の削減と高速化

「SVGスプライト」とは、複数のアイコンを1つのSVGファイルにまとめておき、必要な部分だけ呼び出して表示する技術です。
画像の読み込み回数（HTTPリクエスト）を1回に減らせるため、サイトの表示速度が高速化します。

アイコンを多用する大規模なサイトでは、パフォーマンス向上のための定石テクニックです。

LottieなどのJSONベースのアニメーションとSVGの関係

最近、「Lottie（ロッティー）」というアニメーション技術が人気です。
これはAfter Effectsで作ったアニメーションをJSONデータとして書き出し、Webやアプリで再生する仕組みですが、描画にはSVGの技術が使われています。

SVGの表現力と軽さを活かしたリッチなアニメーションは、アプリの起動画面やWebサイトのヒーローエリア（トップ画面）でますます増えていくでしょう。

SVGに関するよくある質問

最後に、SVGについてよく聞かれる疑問にQ&A形式でお答えします。

SVGファイルはスマホで撮影した写真から作れますか？

回答： きれいには作れません。
変換ツールを使えば無理やりSVGにすることは可能ですが、モザイクのような不自然な仕上がりになったり、ファイルサイズが巨大になったりします。
写真はJPGやWebPのまま使うのが正解です。

SVGをパワーポイントやエクセルで使うことはできますか？

回答： はい、最近のOfficeソフトはSVGに対応しています。
ドラッグ＆ドロップで貼り付けることができ、拡大しても画質が荒れません。
さらに、PowerPoint上でSVGを「図形に変換」すれば、色を変えたりパーツを分解したりすることも可能です。

SVGファイルが開けない時はどうすればいいですか？

回答： SVGはブラウザ（ChromeやEdge）に関連付けられていることが多いです。
ダブルクリックするとブラウザが開いて画像が表示されます。
編集したい場合は、Illustratorなどのソフトを先に立ち上げてから「開く」メニューで選択するか、ファイルをソフトのアイコンにドラッグしてみてください。

SVGのアニメーションは重くなりますか？

回答： シンプルな動きなら非常に軽いですが、やりすぎは禁物です。
画面全体で何百個もの図形を同時に動かすような処理は、PCのファンが唸るほど負荷がかかることがあります。
スマホでの動作確認をこまめに行いながら実装しましょう。

まとめ：SVGを使いこなしてWebサイトの品質を上げよう

SVGは、画質劣化なし・軽量・操作可能という、Web制作において最強の武器となる画像フォーマットです。

  • ロゴやアイコンには迷わずSVGを使う
  • 写真にはJPGやWebPを使う
  • 色を変えたいならインラインで記述する

この3つのポイントを意識するだけで、Webサイトの見た目はぐっとプロフェッショナルになり、メンテナンスも楽になります。
難しそうに見えるコードも、分解してみれば単純な図形の集まりです。

まずは簡単なアイコンの表示から、SVGの世界に触れてみてください。
きっと、その鮮明な美しさに手放せなくなるはずです。

タイトルとURLをコピーしました