SVGファイルとは｜PNGとの違い・開き方・作り方を実測で解説

PNG や JPEG は「画素（ピクセル）の色の並び」を保存しています。SVG は「どこに何色の円を描くか」という命令を保存していて、表示するたびにその大きさで描き直します。

flowchart TD
    A[SVG<br>図形の命令を書いたテキスト] --> B[表示する大きさで<br>毎回描き直す]
    B --> C[拡大してもくっきり]
    D[PNG・JPEG<br>画素の色の並び] --> E[画素を引き伸ばす]
    E --> F[拡大するとぼやける]

急いでいる人向けに、よく調べられることの答えを先にまとめます。

確認環境：Ubuntu 24.04.4 LTS。手で書いた SVG を Chromium 141.0.7390.37（Playwright 1.56.0 で操作）で 64〜1024px に描いて PNG に書き出し、ファイルサイズと拡大したときの縁の画素を Pillow 12.2.0・NumPy 2.4.4 で数えました。Web での使い方4通りは、手元の HTTP サーバー（Python 3.11.15 の http.server）に置いたページを Chromium で開き、計算された色・スクリプトの実行・サーバーへの要求を記録しました。軽量化は SVGO 4.1.0、変換は potrace 1.16・vtracer 0.6.15・CairoSVG 2.9.1・ImageMagick 6.9.12-98、検証は xmllint（libxml 2.9.14）、無害化は DOMPurify 3.4.17 で実行しました。写真の例は scikit-image 0.26.0 に同梱の astronaut（NASA のパブリックドメイン画像）です。仕様は W3C の SVG 1.1 Second Edition・SVG 2 と MDN、ツールの操作は Inkscape・Figma・Adobe・SVGO の公式ドキュメントで確かめました（確認日 2026年10月23日）。

SVGファイルとは（読み方・拡張子・規格）

この節では、SVG が何の略で、どんなファイルなのかが分かります。

SVG（Scalable Vector Graphics、読み方は「エスブイジー」）は、2次元の図形を XML という書式で書くための画像形式です。 拡張子は .svg です。名前の Scalable は「大きさを変えられる」、Vector は「座標と線で表す」という意味です。

次の版の SVG 2 は、2026年10月6日付けの勧告候補（Candidate Recommendation Snapshot）で、W3C の文書には「2026年12月1日より前には勧告にならない見込み」と書かれています（2026年10月23日時点）。SVG 2 は SVG 1.1 Second Edition を土台にしています。

MIME タイプ（ファイルの種類を表す名前）は、Web サーバーがブラウザに「これは SVG です」と伝えるときに使います。後の「表示されないとき」の節で、これが違うと表示されない様子を見せます。

ベクター画像とラスター画像の違い（SVG・PNG・JPEG）

この節では、SVG と PNG・JPEG の違いと、どちらを選べばよいかが分かります。

SVG は「ベクター画像」、PNG・JPEG・WebP は「ラスター画像」です。 ベクター画像は図形を座標と命令で、ラスター画像は画素の色を1つずつ並べて保存します。

写真のように色が細かく変わる画像は、SVG にすると大きくなります。 この記事の実測では、同じ写真が JPEG で 18,746 バイト、SVG（自動で図形に変換）で 638,677 バイト、約34倍になりました（後の「PNG から SVG を作る」の節）。

flowchart TD
    A{何の画像?} -->|ロゴ・図| B[SVG]
    A -->|写真| C[JPEG<br>WebP]
    A -->|画面の写し| D[PNG]
    B --> E{ほかのアプリ<br>にも渡す?}
    E -->|はい| F[PNG も用意]

WebP・HEIC など、ほかのラスター画像の形式は、関連記事「WebP・HEICとは｜JPG・PNGへの変換と画像圧縮を実測で解説」で扱っています。

SVGファイルの中身（XMLのテキスト）

この節では、SVG ファイルを開くと何が書いてあるのか、実物で分かります。

この記事で使うロゴを、テキストエディタで書きました。四角・円・三角形・文字の4つの図形でできています。

<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
  <rect x="2" y="2" width="60" height="60" rx="12" fill="#1e5aa8"/>
  <circle cx="32" cy="26" r="14" fill="#ffffff"/>
  <path d="M12 54 L32 38 L52 54 Z" fill="#ffc83d"/>
  <text x="32" y="31" font-size="12" font-family="sans-serif" text-anchor="middle" fill="#1e5aa8">SVG</text>
</svg>

このファイルの大きさと、種類を調べるコマンドの結果です。

$ wc -c logo.svg
370 logo.svg
$ file logo.svg
logo.svg: SVG Scalable Vector Graphics image
$ xmllint --noout logo.svg && echo "xmllint: OK"
xmllint: OK

370 バイト（半角370文字）で、1つの画像になっています。 xmllint は XML の書き方が正しいかを調べるコマンドで、何も出力されなければ正しい書き方です。

• 1xmlns="http://www.w3.org/2000/svg"「これは SVG のタグです」という宣言。ファイルとして使うときは必ず書く（無いと表示されないことを後で見せる）
• 2width・height特に指定が無いときに表示される大きさ。単位を書かなければ px
• 3viewBox="0 0 64 64"図形を描く座標の範囲。左上が (0,0)、幅64・高さ64。拡大・縮小のときに中身を合わせて伸ばすための基準
• 4図形のタグrect（四角）・circle（円）・path（自由な形）・text（文字）。後に書いたものが上に重なる

座標は左上が原点で、右に行くほど x、下に行くほど y が大きくなります。 数学のグラフと y の向きが逆なので、最初につまずきやすい所です。

SVGの基本の書き方（rect・circle・path・text）

この節では、よく使う図形のタグと、色・線の指定の書き方が分かります。

色と線は、どの図形にも同じ属性で指定します。

path の d 属性（描く命令）

path は、ペンを動かす命令を d 属性に並べて形を描きます。 ロゴの三角形 M12 54 L32 38 L52 54 Z は「(12,54) にペンを置き、(32,38) へ線、(52,54) へ線、最初の点に戻って閉じる」という意味です。MDN のチュートリアルによると、大文字の命令は絶対座標、小文字は直前の点からの相対座標です。

手で書くのは四角・円・簡単な線までにして、複雑な曲線はツールで描くのが一般的です。ツールで書き出した SVG は、ほとんどの形が path になります。

SVGファイルの開き方（ブラウザ・テキストエディタ）

この節では、SVG ファイルを見る方法と、中身を確かめる方法が分かります。

SVG ファイルは、ブラウザ（Chrome・Edge・Safari・Firefox）のウィンドウにドラッグ＆ドロップすると表示できます。 Adobe の解説も、主要なブラウザにファイルを読み込めば表示できると説明しています。OS の写真アプリや画像ビューアーで開けないときも、ブラウザなら表示できます。

ブラウザで開いたときのエラー表示

書き方に誤りがある SVG をブラウザで開くと、絵の代わりにエラーが表示されます。 <rect …> の最後の / を消した（タグを閉じていない）ファイルを Chromium で開いたときの表示です。

This page contains the following errors:
error on line 3 at column 7: Opening and ending tag mismatch: rect line 2 and svg

Below is a rendering of the page up to the first error.

xmlns を書き忘れたファイルを開くと、絵ではなくタグの一覧が表示されました。

This XML file does not appear to have any style information associated with it. The document tree is shown below.

<svg width="100" height="100">
<rect width="100" height="100" fill="#1e5aa8"/>
</svg>

同じ2つのファイルは、<img> で読み込んでも表示されませんでした（画像の幅 naturalWidth が 0）。HTML の中に直接書くとき（インライン）は xmlns を省略できますが、.svg ファイルとして使うときは必ず書きます。

SVGファイルの作り方（Inkscape・Figma・Illustrator・手書き）

この節では、SVG を作る主なツールと、書き出すときの操作が分かります。

書き出すときに見る設定

ツールが違っても、Web で使う SVG を書き出すときに確かめる点は似ています。

• 1文字をどうするか文字のまま残すと、表示する PC にフォントが無いと見た目が変わる。図形（アウトライン）にすると見た目は保たれるが、文字として編集・検索できなくなる
• 2画像を埋め込むか写真などのラスター画像を中に入れると、Base64 の文字列になってファイルが大きくなる
• 3id を付けるかCSS・JavaScript から部品を指したいときは付ける。Figma はレイヤー名から id を作る
• 4viewBox が付いているか無いと、インラインで大きさを変えたときに中身が伸びない（次の節で実測）

Figma の公式ヘルプによると、SVG を Figma に貼り付けるとき、marker と pattern の要素は取り込まれません。Inkscape は、コマンドで PNG に書き出すこともできます（変換の節）。

viewBoxとは（大きさを変えても中身が合う理由）

この節では、viewBox の4つの数字の意味と、無いと何が起きるかが分かります。

viewBox="0 0 100 100" は「座標の (0,0) から幅100・高さ100 の範囲を、表示する枠いっぱいに映す」という指定です。 MDN の説明では、4つの数字は順に min-x・min-y・width・height です。

width="100" height="100" の SVG に半径40の円を描き、CSS で width:300px; height:300px にして、Chromium で描いた円の幅を数えました。

Chromium の <img> では viewBox が無くても伸びましたが、インラインでは伸びませんでした。 使い方によって結果が変わるので、大きさを変えて使う SVG には viewBox を付けておくと迷いません。SVGO 4 も、拡大・縮小できる性質を保つために viewBox を消す処理を既定から外しています（軽量化の節）。

拡大しても粗くならないことを実測（PNGとの比較）

この節では、SVG と PNG を拡大したときの違いと、ファイルサイズの差が数字で分かります。

ロゴ（logo.svg）を Chromium で 64px で描いて PNG に書き出し、その PNG を 512px に拡大して表示したものと、SVG をそのまま 512px で描いたものを比べました。円の左の縁を横切る1行（50画素）で、青でも白でもない「中間の色」の画素を数えています。中間の色が多いほど、縁がぼやけています。

PNG は拡大すると、1つの画素が8×8に引き伸ばされ、縁がぼやけました。 SVG は 512px の大きさで円を描き直すので、縁の中間の色は、なめらかに見せるための数画素だけでした。画像全体の色の数も、SVG の 512px が 435 色、拡大した PNG が 2,886 色で、ぼかしで色が増えています。

表示する大きさごとのファイルサイズ

同じロゴを、表示する大きさごとに PNG に書き出したときの大きさです。SVG は1つのファイルで全部の大きさに使えます。

ロゴやアイコンのような単純な図形では、SVG のほうがずっと小さくなりました。 高解像度の画面（Retina など）向けに2倍・3倍の PNG を用意する手間も、SVG なら要りません。反対に、写真のような画像では SVG のほうが大きくなります（次の節の「PNG から SVG を作る」）。

WebでSVGを使う4つの方法（img・インライン・CSS背景・object）

この節では、HTML に SVG を置く4つの方法と、色を変えられるか・スクリプトが動くかの違いが分かります。

<!-- 1. img 要素 -->
<img src="icon.svg" alt="アイコン" width="100" height="100">

<!-- 2. インライン（HTML に直接書く） -->
<svg viewBox="0 0 100 100" width="100" height="100" role="img" aria-label="アイコン">
  <circle cx="50" cy="50" r="40" fill="currentColor"/>
</svg>

<!-- 3. CSS の背景 -->
<span class="icon"></span>
<style>.icon { display: inline-block; width: 100px; height: 100px; background: url(icon.svg) no-repeat; background-size: 100px; }</style>

<!-- 4. object 要素 -->
<object type="image/svg+xml" data="icon.svg" width="100" height="100"></object>

次の SVG を4つの方法で同じページに置き、ページの文字色を赤（color:#c00000）、インラインの円にだけ CSS で緑（#inl circle { fill: #008000 }）を指定しました。SVG の中には、文字を書き換えるだけの小さなスクリプトと、外の画像 dot.png を読む <image> を入れています。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
  <circle id="c" cx="50" cy="50" r="40" fill="currentColor"/>
  <image href="dot.png" x="0" y="0" width="10" height="10"/>
  <text id="t" x="50" y="95" font-size="10" text-anchor="middle">before</text>
  <script>document.getElementById('t').textContent = 'script ran';</script>
</svg>

Chromium で開き、円の色・文字・サーバーへの要求を記録した結果です。

インラインで CSS の指定を外すと、円は rgb(192, 0, 0)（ページの文字色の赤）になりました。fill="currentColor" は「親の文字色を使う」という指定で、インラインのときだけページの色に合わせて変わります。

MDN によると、SVG を「画像」として使う場面（img・CSS の background-image など）では、ブラウザが JavaScript を無効にし、外の画像やスタイルシートを読み込まない、などの制限をかけます。この制限は、SVG を直接開いたときや iframe・object・embed で読み込んだときにはかかりません。上の実測は、この説明と同じ結果です。

CSS の ::before・::after で SVG のアイコンを付ける方法は、関連記事「CSS before・afterの使い方｜コピペで使える装飾・アイコン20選」で、img の大きさの指定は関連記事「CSSで画像サイズを指定する方法 縦横比維持・中央寄せ・はみ出し対策」で扱っています。

SVGOでSVGを軽くする

この節では、SVG の余分な情報を消して軽くするツール SVGO の使い方と、どれだけ小さくなるかが分かります。

SVGO は、SVG から見た目に関係ない情報（コメント・メタデータ・余分な桁など）を消して小さくする Node.js のツールです。 npm で入れて、コマンドで使います。

npm install svgo
npx svgo --version            # 4.1.0
npx svgo traced.svg -o traced.min.svg

traced.svg:
Done in 20 ms!
1.861 KiB - 20.9% = 1.473 KiB

ツール（potrace）が書き出した SVG は 20.9%、手で書いた logo.svg は 5.4% 小さくなりました。書き出した SVG の先頭はこう変わりました。

<!-- 前（potrace が書き出したまま） -->
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="256.000000pt" height="256.000000pt" viewBox="0 0 256.000000 256.000000"
 preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.16, written by Peter Selinger 2001-2019
</metadata>

<!-- 後（SVGO 4.1.0） -->
<svg xmlns="http://www.w3.org/2000/svg" width="341.333" height="341.333" viewBox="0 0 256 256"><path d="M44 9.8C26.9 14.3 …

<?xml …?>・<!DOCTYPE>・<metadata> が消え、256.000000 が 256 になり、単位 pt が px に直されました（256pt は 341.333px）。

SVG はテキストなので、gzip でさらに小さくなります。 Web サーバーが gzip などで圧縮して送る設定なら、.svg もその対象にできます。最初から gzip で圧縮したファイルが .svgz です。

SVGO 4 の既定の動き

SVGO の公式ドキュメント（v3 から v4 への移行）によると、v4 では次の2つが既定の処理（preset-default）から外れました。

スクリプトを消す処理は removeScripts（v3 の removeScriptElement から名前が変わった）で、既定には入っていません。設定ファイルで足すと、次のように <script> が消えました。

// svgo.config.mjs
export default { plugins: ['preset-default', 'removeScripts'] };

$ npx svgo --config svgo.config.mjs icon.svg -o -
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle id="c" cx="50" cy="50" r="40" fill="currentColor"/><image width="10" height="10" href="dot.png"/><text id="t" x="50" y="95" font-size="10" text-anchor="middle">before</text></svg>

SVGとPNGの変換（PNGにする・PNGから作る）

この節では、SVG を PNG にする方法と、PNG から SVG を作る方法、そのときに起きることが分かります。

SVG を PNG にする

SVG を PNG にするのは「好きな大きさで描いて保存する」だけなので、きれいに変換できます。 方法ごとに、手元で動かした結果です。

Python では CairoSVG（pip install cairosvg）で、大きさを決めて PNG にできます。PDF にも書き出せ、logo.svg は 4,804 バイトの PDF になりました。

import cairosvg

cairosvg.svg2png(url="logo.svg", write_to="logo_512.png", output_width=512, output_height=512)
cairosvg.svg2pdf(url="logo.svg", write_to="logo.pdf")

ブラウザで描いて保存する方法は、Playwright（ブラウザを操作するライブラリ）で次のように書けます。この記事の PNG はすべてこの方法で作りました。

import asyncio, base64, pathlib
from playwright.async_api import async_playwright

async def main():
    svg = pathlib.Path("logo.svg").read_bytes()
    uri = "data:image/svg+xml;base64," + base64.b64encode(svg).decode()
    async with async_playwright() as p:
        b = await p.chromium.launch()
        for n in (64, 256, 1024):
            pg = await b.new_page(viewport={"width": n, "height": n})
            await pg.set_content(f'<body style="margin:0"><img src="{uri}" width="{n}" height="{n}" style="display:block">')
            await pg.screenshot(path=f"logo_{n}.png", omit_background=True)
        await b.close()

asyncio.run(main())

ImageMagick 6 は、SVG を読むときに別のプログラム rsvg-convert を呼びます。それが入っていない環境では、次のエラーで止まりました。

convert-im6.q16: delegate failed `'rsvg-convert' -o '%o' '%i'' @ error/delegate.c/InvokeDelegate/1997.
convert-im6.q16: no images defined `im_512.png' @ error/convert.c/ConvertImageCommand/3234.

Python の画像ライブラリ Pillow は SVG を読めず、PIL.UnidentifiedImageError: cannot identify image file 'logo.svg' になりました。SVG を描くには、ブラウザや CairoSVG のような「描く仕組み」が要ります。

PNG から SVG を作る（トレース）

PNG から SVG を作るのは「画素の並びから形を推測する」作業（トレース）なので、元の SVG には戻りません。 白黒は potrace、カラーは vtracer で試しました。

# 白黒にしてから potrace で SVG にする
convert logo_256.png -background white -flatten -colorspace gray -threshold 60% icon.pbm
potrace -s icon.pbm -o traced.svg

# カラーのまま vtracer で SVG にする（pip install vtracer）
import vtracer
vtracer.convert_image_to_svg_py("logo_256.png", "logo_traced_color.svg")
vtracer.convert_image_to_svg_py("photo.png", "photo.svg")

Web の変換サービスにファイルをアップロードする方法もあります。社外秘のロゴや画像は、アップロード先の利用規約とデータの扱いを確かめてから使います。

SVGが表示されない・おかしいときの原因と直し方

この節では、SVG が表示されないときに多い原因と、手元で起こしたエラーの原文が分かります。

Content-Type（MIME タイプ）が違うと、ファイルの中身が正しくても表示されません。 手元のサーバーで、同じ icon.svg を text/plain として送るようにしたところ、<img> での幅（naturalWidth）が 0 になり、表示されませんでした。image/svg+xml で送ると幅 100 で表示されました。Ubuntu の nginx の設定ファイル /etc/nginx/mime.types には、最初から次の行があります。

    image/svg+xml                                    svg svgz;

外部のSVGを使うときの注意（スクリプト）

この節では、SVG がテキストの文書であるために気をつけることと、守り方が分かります。

SVG は画像ですが、中に <script> やリンクを書ける文書でもあります。 使い方4通りの節で見たように、インラインや object で読み込むと、SVG の中のスクリプトがページの中で動きました。

• 1作った人が分からない SVG は img で使うimg・CSS 背景ではスクリプトが動かず、外の画像も読まなかった（実測）
• 2インラインにするなら無害化してからDOMPurify や SVGO の removeScripts でスクリプトを消す
• 3利用者のアップロードを受けるサイトは特に注意受け付ける形式を絞る、無害化する、別のドメインから配信するなどを組み合わせる
• 4CSP でスクリプトの実行を制限するページ全体の守りとして、許可したスクリプトだけを動かす

DOMPurify（HTML・SVG から危険な部分を取り除く JavaScript のライブラリ）の README には、SVG だけを許可する設定 USE_PROFILES: { svg: true, svgFilters: true } が載っています。DOMPurify 3.4.17 を Chromium で動かし、先ほどの icon.svg を通した結果です。

const clean = DOMPurify.sanitize(svgText, { USE_PROFILES: { svg: true, svgFilters: true } });

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
  <circle id="c" cx="50" cy="50" r="40" fill="currentColor"></circle>
  <image href="dot.png" x="0" y="0" width="10" height="10"></image>
  <text id="t" x="50" y="95" font-size="10" text-anchor="middle">before</text>

</svg>

<script> の行が消え、図形と文字は残りました。 画面に出す前の無害化の考え方は関連記事「XSS（クロスサイトスクリプティング）対策｜フレームワーク別の注意点」で、ページ全体でスクリプトを制限する方法は関連記事「CSP設定（Content-Security-Policy）｜nginx段階導入」で扱っています。

SVG が XML という書式でできていることは、JSON・YAML などほかのテキスト形式と比べると分かりやすくなります。違いは関連記事「CSV・JSON・XML・YAML・TOMLの違いと使い分け｜同じデータで比較」で扱っています。

よくある質問

Q. SVG の読み方は？ A. 「エスブイジー」です。Scalable Vector Graphics の頭文字で、「大きさを変えられるベクター画像」という意味です。

Q. SVG ファイルは何で開けますか？ A. Chrome・Edge・Safari・Firefox などのブラウザにドラッグすると表示できます。中身を見るならテキストエディタ、編集するなら Inkscape・Figma・Illustrator を使います。

Q. 写真アプリで SVG が開けません。 A. 画像ビューアーによっては SVG に対応していません。ブラウザで開くか、PNG に変換してから使います。ブラウザでもエラーが出るときは、ファイルの書き方の誤り（タグの閉じ忘れ・xmlns が無い）を疑います。

Q. SVG と PNG はどちらを使えばよいですか？ A. ロゴ・アイコン・図は SVG、写真は JPEG か WebP、画面の写しや透過のある絵は PNG が向いています。実測では、ロゴは SVG が 370 バイト、1024px の PNG が 38,880 バイトでした。

Q. SVG は無料で作れますか？ A. 作れます。Inkscape は無料のオープンソースのソフトで、Figma にも無料プランがあります。簡単な図形なら、テキストエディタで手で書けます。

Q. PNG を SVG に変換すると、きれいに拡大できるようになりますか？ A. 元の画素から形を推測するので、元の絵より細部は増えません。ロゴでは文字が図形になり、写真では JPEG の約34倍の大きさになりました。元のデザインデータから書き出すのがいちばんきれいです。

Q. SVG の色を変えるには？ A. テキストエディタで fill の値を書き換えるか、HTML にインラインで書いて CSS の fill を指定します。fill="currentColor" にしておくと、親の文字色に合わせて変わります。img で読み込んだ SVG は、ページの CSS では色が変わりません。

Q. SVGZ とは？ A. SVG を gzip で圧縮したファイルで、拡張子は .svgz です。W3C の SVG 1.1 では「svg.gz の別名」とされています。

Q. SVG は印刷やデザインの入稿に使えますか？ A. ベクター形式なので、大きさを変えても粗くなりません。ただし入稿できる形式は印刷所ごとに決まっているので、その指定に合わせます。CairoSVG では SVG を PDF に変換でき、ロゴは 4,804 バイトの PDF になりました。

Q. SVG は安全ですか？ A. 画像として img で使う場合、Chromium ではスクリプトは動きませんでした。インラインや object では中のスクリプトが動くので、外から受け取った SVG は無害化してから使います。

まとめ

• SVG ファイルとは、図形を座標と命令で書いた XML テキストの画像。読み方はエスブイジー、拡張子は .svg、MIME タイプは image/svg+xml。
• PNG・JPEG は画素の並び、SVG は図形の命令。64px の PNG を 512px に拡大すると縁の中間色が 23 画素、SVG は 3 画素だった。
• ロゴは SVG 370 バイトで全部の大きさに使え、1024px の PNG は約105倍の 38,880 バイト。写真は SVG にすると JPEG の約34倍になった。
• 基本の図形は rect・circle・path・text。大きさを変えて使うなら viewBox を付ける（無いとインラインで伸びなかった）。
• Web では img・インライン・CSS 背景・object の4通り。色を CSS で変えられるのはインラインだけ。スクリプトはインラインと object で動いた。
• 軽くするなら SVGO（書き出した SVG で 20.9% 減）。SVGO 4 は viewBox と title を既定では消さない。
• SVG→PNG はきれいに変換できるが、PNG→SVG は推測なので元には戻らない。外部の SVG は img で使うか、無害化してから使う。

参考・出典

確認日はいずれも 2026年10月23日です。

• W3C「Scalable Vector Graphics (SVG) 1.1 (Second Edition)」：https://www.w3.org/TR/SVG11/
• W3C「SVG 1.1 Appendix P: Media Type Registration for image/svg+xml」：https://www.w3.org/TR/SVG11/mimereg.html
• W3C「Scalable Vector Graphics (SVG) 2」：https://www.w3.org/TR/SVG2/
• MDN「SVG: Scalable Vector Graphics」：https://developer.mozilla.org/ja/docs/Web/SVG
• MDN「SVG as an image」：https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image
• MDN「Paths」：https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Paths
• MDN「viewBox」：https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/viewBox
• Inkscape「About」：https://inkscape.org/about/
• Inkscape Wiki「Using the Command Line」：https://wiki.inkscape.org/wiki/Using_the_Command_Line
• Figma Help Center「Export formats and settings」：https://help.figma.com/hc/en-us/articles/13402894554519-Export-formats-and-settings
• Figma Help Center「Export from Figma」：https://help.figma.com/hc/en-us/articles/360040030374-Export-from-Figma
• Adobe「Illustrator で SVG を書き出す」：https://www.adobe.com/jp/learn/illustrator/web/export-svg
• Adobe「SVGファイル：ファイルを作成、編集、開く方法」：https://www.adobe.com/jp/creativecloud/file-types/image/vector/svg-file.html
• SVGO「preset-default」：https://svgo.dev/docs/preset-default/
• SVGO「Migration from v3 to v4」：https://svgo.dev/docs/migrations/migration-from-v3-to-v4/
• GitHub「cure53/DOMPurify」：https://github.com/cure53/DOMPurify

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。