SVGベクター画像
画像XMLで図形・文字などを記述するベクター画像です。拡大しても図形の輪郭を描き直せますが、埋め込み写真はラスター画像のままです。スクリプトや外部参照を含む場合もあります。
- 主な用途
- 拡大できる図形・アイコン・図表
- 中身の種類
- テキスト
目次・よくある質問・根拠資料を見る
内容の最終確認： · 編集：Kai
まず確認：目的に合う開き方
SVGは図形や文字を記述するベクター画像です。ブラウザーで見る、Inkscapeなどで編集する、PNGで提出する目的を分けます。画像が含まれていても外部ファイル参照ならSVG単体では完結しません。スクリプトやリンクの扱いにも注意します。
開き方・操作手順
使っている環境や目的の項目を開いて、手順を確認してください。
操作名・対応状況はアプリ・OS・版によって異なります。変更する前に原本を残してください。
開けないとき：症状から確認
- 文字の形や位置が違う場合はフォント未導入や描画実装の違いを確認。外部画像の相対パスが切れていると画像が欠けます。
- 構文エラーでは、閉じタグや引用符を作成元で確認。SVGを写真として保存したデータを名前変更してもXMLにはなりません。
- 文字だけ違う：フォントの有無、文字情報とアウトラインの違いを確認します。編集可能な原本を残して必要な出力を作ります。
- 端が切れる：viewBoxやページ・出力範囲、クリッピングを確認します。
- 画像がない：相対参照した画像の所在と共有フォルダー構造を確認。外部画像の参照と埋め込みを区別します。
SVG → PNG
- InkscapeでSVGを開き、「ファイル→エクスポート」（旧版では「PNG画像にエクスポート」）を選びます。
- ページ・描画・選択の範囲と画像寸法を指定してPNGを書き出し、フォント・透過・切り抜き範囲を確認します。
- 出力範囲、ピクセル寸法、文字、外部画像、透過を確認します。
PNGでは拡大時のベクター再描画や図形ごとの編集ができません。表示されなかった外部画像やフォントは変換で修復されません。
PNG化するときの寸法
SVGの図形は拡大して描画できますが、PNGへ出すと固定した画素数になります。使用先に必要なピクセル寸法と出力範囲を先に決めます。
外部の小さな写真を使うSVGでは、図形がベクターでも写真の細部は増えません。出力後の文字・輪郭・透過を100%で確認します。
この手順の根拠：Inkscape · Exporting a PNG File
SVG単体で渡せるか確認する
参照画像、フォント、CSSなどの依存を確認します。別PCで表示できるかコピーを試し、必要な素材は権利とライセンスに従って渡します。
SVGは単なる写真の形式とは異なり、スクリプト等を含む場合があります。信頼できない入力は更新済みの適切な環境で扱います。
関連形式との違い
| 形式・選択肢 | 役割と残せる情報 |
|---|---|
| SVG | 図形・文字の記述。外部素材やフォントに依存する場合があります。 |
| PNG | 固定画素の配布コピー。図形の再編集情報は残りません。 |
| 配布・印刷候補。フォントや効果の出力結果を確認。 |
取り扱いと安全性
不明なSVGをWebページへ直接埋め込まないでください。スクリプト・イベント属性・外部参照を扱える形式なので、入手元と利用方法を確認します。
よくある質問
SVGは写真の画質を上げる？
埋め込んだ写真の情報は増えません。輪郭が滑らかなのはベクター図形です。
SVGをメモ帳で開いてよい？
XMLテキストとして確認できます。編集はコピーで行い、タグ構造を壊さないようにします。
ロゴの文字が変わるのは？
指定フォントがない場合に置換されることがあります。作成元の出力設定を確認します。
SVGなら写真も無限に拡大できますか？
写真の画素数は増えません。ベクター図形と参照画像を区別します。
PNG化すると文字を編集できますか？
画像の画素になるため、SVGの文字としては再編集できません。元SVGを残します。
形式の基本情報：正式名称・MIME type・管理団体
- 名称
- Scalable Vector Graphics
- 管理・仕様
- W3C
- MIME type
- image/svg+xml
公式・一次情報
- 標準仕様Scalable Vector Graphics (SVG) 2
XMLで記述する図形の仕様です。公開状態もリンク先で確認してください。
W3C · リンク確認： - プロジェクト公式Exporting a PNG File
InkscapeでSVGをPNGへ書き出す範囲と画像寸法の指定手順です。メニュー名は版で異なります。
Inkscape · リンク確認：