Delphi Programming / Object Pascal
サイトのトップページへ リンクのページへ ロゴマーク
[掲載 2025年08月11日] [更新 2025年09月15日]*　Delphi 一般・その他 [未分類 - OS の操作等]
SVG 画像を PNG 画像に変換するオンラインツール
動作確認等 Windows 10 ビルド 19045 Pro 64 bit
Google Chrome 138, Microsoft Edge 138, Firefox 140
[整理番号 - 1990]






01_SVG 画像を PNG 画像に変換


SVG 画像を、サイズを指定して PNG 形式の画像に変換するために作成したツールですが、他の形式の画像も PNG 形式の画像に変換できます。
PNG 画像のサイズは、幅をピクセル単位で指定します。長さは、元の画像から自動的に計算します。設定可能な範囲は 16 以上、512 以下です。幅サイズを入力して [Enter] キーを押すと確定となります。サイズの入力欄の上の値は、元の画像のサイズ (幅 x 長さ) です。



ファイル名 ( 画像または画像の URL を貼り付け )


サイズ (幅)


[ファイル名] の入力欄に、下表のような操作で画像あるいは画像の URL (アドレス) を貼り付けると、その画像を PNG 画像に変換して表示します。貼り付けは、全て置き換え貼り付けとなります。文字列の途中に挿入する貼り付けはできません。URL がローカルファイルの場合 (file:///... の形式) は処理できません。

Google Chrome と Microsoft Edge であれば、エクスプローラからだけではなく、ウェブブラウザなどで表示中の画像もドラッグ & ドロップして PNG 画像に変換可能です。

変換対象の画像 [ファイル名] 欄の表示
画像の上でマウス右ボタンクリック
[画像をコピー]		 ファイル名のみ表示。編集不可
画像の上でマウス右ボタンクリック
[画像のリンクをコピー] や
[画像アドレスをコピー] など		 リンクの URL。または Base64 等のデータを表示
編集可能。ただし、貼り付けは置き換えになる
画像の URL の文字列をコピー
エクスプローラで画像ファイルをコピー ファイル名のみ表示。編集不可
[参照] ボタンで画像ファイルを選択 ファイル名のみ表示。編集不可
エクスプローラからのドラッグ & ドロップ
上の画像へのドラッグ & ドロップも有効		 ファイル名のみ表示。編集不可


PNG 画像のコピー、保存の方法です。マウスの右ボタンクリックのメニューから [名前を付けて画像を保存] または [画像をコピー] を選択します。


図1
PNG 画像の保存とコピー

下図は Emoji のカラー絵文字です。本ツールでは [Gray Scall] をチェックすると、このようなグレイスケールの画像になります。


図2
グレイスケールの PNG 画像


[参考リンク] の 2 番目の記事は、SVG 要素に描画している内容を PNG 画像にする方法です。SVG 画像ファイルから PNG 画像にする方法ではありません。


[備考 1]
ウェブブラウザで表示している SVG 画像を [画像をコピー] した場合、PNG 画像だったり画像がないことがあります。これは、画像あるいはウェブブラウザによって異なります。

[備考 2]
ウェブブラウザで表示しいてる画像の多くは、エクスプローラにドラッグ & ドロップすれば保存することができます。この場合、ファイル名は、保存してから変更します。

[備考 3]
本ページを表示した時に表示するのは、甲骨文字の「馬」です。




02_文字の SVG 画像があるグリフウィキとウィクショナリー


グリフウィキとウィクショナリーのサイトには、文字の SVG 画像があります。下の右側のボタンをクリックすると、入力欄の最初の文字を、それぞれのサイトで検索します。検索可能な文字はコードポイント (文字コード) が 1 つだけの文字です。つまり、一般的な文字だけです。


検索する文字 (先頭の 1 文字)



グリフウィキで文字を検索して文字のページが表示されたら、文字の画像上でマウスの右ボタンをクリックします。メニューから [リンクをコピー] ([リンクのアドレスをコピー]) を選択します。この URL を本ツールの [ファイル名] 欄に貼り付けると PNG 画像に変換できます。
この URL は以下のようになっています。6771 は、文字「東」のコードポイント (文字コード) です。この値を変更すると、別の文字となります。



https://glyphwiki.org/glyph/u6771.svg

図3
文字「東」の SVG 画像

グリフウィキには以下のような文字の SVG 画像もあります。これらの文字は、略字 (略号) と呼ばれている類の文字です。Unicode にはありません。
グリフウィキのサイトで検索するには、アカウントを登録してログインします。すると、検索文字の入力欄が現れます。


図4
慶・應・慶應 の略字の SVG 画像

ウィクショナリーには、検索文字そのものの SVG 画像はありませんが、下図のような甲骨文字などの SVG 画像があります。これらの文字も Unicode にはありません。


図5

それらの文字の SVG 画像の URL を取得するには、文字の上でマウスの右ボタンをクリックして [新しいタブで開く] を選択します。
該当文字のページが表示されたら、文字の画像上でマウスの右ボタンをクリックします。メニューから [リンクをコピー] ([リンクのアドレスをコピー]) を選択します。この URL を本ツールの [ファイル名] 欄に貼り付けると、任意のサイズの PNG 画像に変換できます。


[備考 1]
SVG 画像の UR が分かれば、その画像をウェブブラウザで保存できます。ウェブブラウザのアドレス欄 (URL 欄) にその画像の URL を入力して画像を表示します。その画像の上でマウスの右ボタンクリックで [名前を付けて保存] を選択します。

[備考 2]
グリフウィキとウィクショナリーの文字の画像には、SVG 画像へのリンクがありますが、表示しているのは PNG 画像です。したがって、画像の保存や画像をコピーは PNG 画像となります。






03_Twemoji Mozilla の SVG 画像


Twemoji Mozill は、X (旧 Twitter) が使用している Emoji 用フォントです。X ではそれらの文字を SVG 画像で表示しています。
文字の上でマウスの右ボタンをクリックして [画像のリンクをコピー] (画像アドレスをコピー)] を選択します。それを本ツールの [ファイル名] 欄に貼り付けると PNG 画像に変換して表示します。画像の URL は、例えば以下のようになります。1f605, 1f43f は絵文字のコードポイント (文字コード) になっています。この値を変更すると別の文字の SVG 画像となります。



https://abs-0.twimg.com/emoji/v2/svg/1f605.svg
https://abs-0.twimg.com/emoji/v2/svg/1f43f.svg


以下のリンクのページで [Code] をクリックして ZIP 書庫をダウンロードして解凍・展開すると、[assets] フォルダ内に [svg] というフォルダがあります。そこに SVG 画像が収録されています。[assets] の [72x72] フォルダには、72 x 72 サイズの PNG 画像が収録されています。


それらの SVG 画像の例です。これらの SVG 画像は、Google Chrome 138、Microsoft Edge 138 では [画像をコピー] を選択しても、SVG 画像を取得することはできません


図6
1f605.svg の画
図7
1f43f.svg の画像
  • この文字のコードポイントは 1f43f + fe0f
    fe0f は「異体字セレクタ」と呼ばれている値

下図は、コードポイント (文字コード) が 1f43f の文字の画像 (PNG 画像) です。このように「絵」のような文字を「絵文字」と言います。一方、上の画像は、コードポイントが 1f43f + fe0f の Emoji の文字、つまり、Emoji の絵文字です。Emoji の絵文字を単に「Emoji」と言うこともあります。

異体字セレクタの fe0f がない文字は、通常は下図の絵文字となりますが、Emoji 用のフォントを指定して描画すると、Emoji の絵文字となります。


図8
Emoji の絵文字ではない絵文字
  • この文字のコードポイントは 1f43f
  • Emoji 用のフォントを使用すれば Emoji の絵文字になる

顔の絵文字のコードポイント (文字コード) は 1f43f です。このコードポイント (の文字) は Unicode Standard にも Unicode Emoji にも登録されています。下図は、この文字を Segoe UI Symbol フォントを使用して描画した結果です。Emoji 用のフォントを使用して描画すれば Emoji の絵文字となります。


図9
コードポイントが 1f605 の文字
  • Emoji 用のフォントを使用すれば Emoji の絵文字になる




04_Twemoji Mozilla の絵文字の SVG 画像を取得するツール


Twemoji Mozilla の絵文字の SVG 画像を取得するツールです。
取得するのは twimg.com の SVG 画像ではなく、CDN の jsdelivr.net にある SVG 画像です。Twemoji の API を利用しています。
[表示サイズ] は、本ページにおける表示のサイズです。この SVG 画像のサイズは 300 x 300 の正方サイズです。この値は変わりません。設定可能な範囲は 16 以上、512 以下です。サイズを入力して [Enter] キーを押すと確定となります。



SVG 画像を取得する絵文字 ( 先頭の 1 文字 )


　表示サイズ


取得した SVG 画像の保存方法です。マウスの右ボタンクリックのメニューから [名前を付けて画像を保存] を選択します。 [画像をコピー] を選択した場合、Google Chrome 138、Microsoft Edge 138 では、何もコピーされません。Firefox 140 でば SVG 画像のコピーとなります。
[画像のリンクをコピー] ([画像のアドレスをコピー]) を選択して、本ページの最初のツールの [ファイル名] 欄に貼り付けると、任意のサイズの PNG 画像に変換できます。



図10
Twemoji Mozilla の SVG 画像の保存

[備考]
(入力欄の) 絵文字の字形が同じでも、その絵文字を構成するコードポイントが異なる場合があります。したがって、正常な SVG 画像が取得できない絵文字があります。また、分解表示される絵文字であっても、正常な SVG 画像が取得できる場合もあります。




05_Fluent Emoji の SVG 画像と PNG 画像


Fluent Emoji は、2022年8月に Microsoft が公開した Windows 11 に標準でインストールされている Segoe UI Emoji の画像集です。以下のリンクからダウンロードできます。2 番目の ZIP 書庫には、コードポイントかファイル名となっている Segoe UI Emoji の画像ファイル集です。画像は 256 x 256 の PNG 画像と、Color, Flat, High Contrast の 3 種類の SVG 画像があります。


Flat の SVG 画像は GitHub にあります。例えば文字の名前が Smiling face with sunglasses の SVG 画像の URL は以下のようになっています。




https://raw.githubusercontent.com/microsoft/fluentui-emoji/main/assets/Smiling face with sunglasses/Flat/smiling_face_with_sunglasses_flat.svg


下図は、文字名が Chipmunk の文字の画像です。SVG 画像で [画像をコピー] すると、Google Chrome 138、Microsoft Edge 138 では 32 x 32 の PNG 画像の取得となります。


図11
grinning_face_with_sweat_3d.png と
chipmunk_3d.png の画像
  • 画像サイズは 256 x 256
    これは 150 x 150 の縮小表示
図12
grinning_face_with_sweat_color.svg と
chipmunk_color.svg の画像
図13
grinning_face_with_sweat_flat.svg と
chipmunk_flat.svg の画像
図14
grinning_face_with_sweat_high_contrast.svg と
chipmunk_high_contrast.svg の画像

[備考 1]
Windows 11 の Segoe UI Emoji に収録されているのは、Unicode Emoji 12.0 相当の絵文字ですが、Unicode Emoji 13.0 で追加された絵文字も一部含まれています。2025年8月現在、Unicode Emoji のバージョンは 17.02 です。

[備考 2]
Windows 10 / 11 の Segoe UI Emoji フォントには国旗の絵文字は収録されていません。したがって、Fluent Emoji にも国旗の画像はありません。




06_Fluent Emoji の SVG 画像を.Wikimedia Commons で検索


commons.wikimedia.org にある Fluent Emoji の SVG 画像を検索するツールてす。
ボタンをクリックすると、入力欄の先頭の、ラジオボタンで選択した種類の絵文字の SVG 画像のへーじを表示します。入力欄の絵文字は、Windows 11 の Segoe UI Emoji の絵文字です。本ページを表示した時に入力されている先頭と最後 (国連の旗) の SVG 画像は、Fluent Emoji にはありません。


SVG 画像を検索する絵文字 ( 先頭の 1 文字 )


　 　

SVG 画像のページで SVG 画像を保存する方法です。画像の上でマウスの右ボタンクリックをクリックします。 [名前を付けてリンク先を保存] を選択します。画像のサイズは 320 x 320 です。
[リンクをコピー] ([リンクのアドレスをコピー]) を選択して、本ページの最初のツールの [ファイル名] 欄に貼り付けると、任意のサイズの PNG 画像に変換できます。



図15
Fluent Emoji の SVG 画像の保存
  • 画像のページに表示されているのは PNG 画像 (640 x640)
  • その画像に SVG 画像ファイルへのリンクがある

[備考]
(入力欄の) 絵文字の字形が同じでも、その絵文字を構成するコードポイントが異なる場合があります。したがって、正常な SVG 画像が取得できない絵文字があります。また、分解表示される絵文字であっても、正常な SVG 画像が取得できる場合もあります。
egoe UI Emoji にも Fluent Emoji にも国旗の SVG 画像はありません。また、Segoe UI Emoji の絵文字の全てが Fluent Emoji にあるわけではありません。



上の参考リンクの最後のリンクのページに Emoji の絵文字が表示されています。これらは独立した画像です。ネット上でよく見かけるような、複数の絵文字を 1 つにした画像ではありません。マウスの右ボタンクリックのメニューで [リンクを新しいタブで表示] を選択すると、その画像のページが表示されます。そのページから SVG 画像を取得することができます。




07_Noto Color Emoji の SVG 画像と PNG 画像


以下のリンクからダウンロードした ZIP 書庫には、Noto Color Emoji の PNG 画像と SVG 画像があります。PNG 画像は 32 x 32, 72 x 72, 128 x 128, 512 x 512 の 4 種類あります。
下図は、上の図と同じコードポイントの文字の SVG 画像です。


図16
emoji_u1f605.svg の画像
図17
emoji_u1f43f.svg の画像




08_Noto Color Emoji の絵文字の SVG 画像を取得するツール


Noto Color Emoji の絵文字の SVG 画像を取得するツールです。前項の [参考リンク] の ZIP 書庫内の SVG 画像を当サイトに置いています。それを取得して表示します。
[表示サイズ] は、本ページにおける表示のサイズです。この SVG 画像のサイズは 300 x 300 の正方サイズです。この値は変わりません。設定可能な範囲は 16 以上、512 以下です。サイズを入力して [Enter] キーを押すと確定となります。



SVG 画像を取得する絵文字 ( 先頭の 1 文字 )


　表示サイズ


取得した SVG 画像の保存方法です。マウスの右ボタンクリックのメニューから [名前を付けて画像を保存] を選択します。 [画像をコピー] を選択した場合、Google Chrome 138、Microsoft Edge 138 では、何もコピーされません。Firefox 140 では SVG 画像のコピーとなります。
[画像のリンクをコピー] ([画像のアドレスをコピー]) を選択して、本ページの最初のツールの [ファイル名] 欄に貼り付けると、任意のサイズの PNG 画像に変換できます。



図18
Noto Color Emoji の SVG 画像の保存

[備考]
(入力欄の) 絵文字の字形が同じでも、その絵文字を構成するコードポイントが異なる場合があります。したがって、正常な SVG 画像が取得できない絵文字があります。また、分解表示される絵文字であっても、正常な SVG 画像が取得できる場合もあります。
本ツールで取得する SVG 画像には、国旗関係の画像はありません。




09_ウェブページでの SVG 画像表示とコンテキストメニュー


本ページの最初の方で、ブラウザで表示している画像は、エクスプローラにドラッグ & ドロップすれば保存できると述べましたが、できない場合もあります。以下はその確認用の画像と説明です。
以下は全て同じ SVG 画像を表示していますが、表示の方法が異なっています。また、コンテキストメニュー (マウスの右ボタンクリックで現れるメニュー) も異なる場合があります。

本項で使用している画像は、Noto Color Emoji の絵文字の SVG 画像ですが、[画像を新しいタブで開く] ([新しいタブで画像を開く]) 時の表示方法と、SVG 画像のサイズを 640 x 640 に、筆者が変更しています。


図19
img 要素で表示
  • ドラッグ & ドロップ可能
  • 画像のリンク (のアドレス) のコピー可能

  • SVG 画像の場合、Google Chrome、Microsoft Edge では
    [画像をコピー] は機能しない
図20
svg 要素で表示
  • ドラッグ & ドロップ不可
  • 画像のリンク (のアドレス) のコピー可能

  • SVG 画像の場合、Google Chrome、Microsoft Edge では
    [画像をコピー] は機能しない
図21
object 要素で表示
  • ドラッグ & ドロップ不可
  • 画像に関する項目はメニューにない

下図は PNG 画像ですが、commons.wikimedia.org と同じ表示方法です。この画像には SVG 画像へのリンクがあります。コンテキストメニューには、リンク先に対する操作と表示画像に対する操作の項目があります。
PNG 画像の場合は、ウェブブラウザに関係なく画像をコピーできます。


図22
PNG 画像を img 要素で表示
  • これは PNG 画像
  • SVG 画像へのリンクあり
  • ドラッグ & ドロップ可能




10_SVG 画像と PNG 画像の拡大表示


ベクタ形である SVG 画像と、ラスタ形式である PNG 画像を拡大表示した時の状態を確認するテストです。左側が SVG 画像、右側が PNG 画像です。画像サイズはどちらも 32 x 32 です。



図23
画像の拡大表示
  • 左:SVG 画像
  • 右:PNG 画像




11_SVG 画像の実体


SVG 画像の実体は XML という形式のテキストファイルです。メモ帳などのテキストエディタを起動してそこに SVG 画像ファイルをドラッグ & ドロップするとそのデータを見ることができます。ウェブブラウザは、SVG 画像ファイルを読み込むと、そのテキストデータに従って座標と座標との間に直線や曲線を描いたり、楕円や矩形を描画して指定した色と手順で塗り潰しをしたりします。

例えば、以下のコードをコピーしてメモ帳に貼り付けて保存します。今回は exsample-en.svg という名前で保存しています。保存した SVG 画像ファイルを、ウェブブラウザにドラッグ & ドロップすると、下図のような画像 (図形) が描画されます。作成した SVG 画像のサイズは 400 x 400, PNG 画像のサイズは 256 x 256 ですが、どちらも 150 x 150 に縮小表示しています。

 


<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
  <circle cx="200" cy="200" r="180" stroke="black" stroke-width="7" fill="#4cbaff"></circle>
</svg>


図24
左 : 保存した SVG 画像
右 : 本ページのツールで変換した PNG 画像

フォントファイルにも、収録している各々の文字のこのようなデータがあります。下図は、あるフォントの「東」という文字の例です。
文字の SVG 画像を作成すると言うことは、このフォントデータを SVG のデータに変換することです。フォントとフォントデータのフォーマットにはいくつかの種類がありますから、具体的な処理はフォーマットによって異なります。



図25
文字のフォントデータの例
  • 点と点の間を直線や曲線で結んで、
    その内部を塗り潰すと文字になる

PNG 画像のようなラスタ形式の画像は基本的に、1 つ 1 つの画素 (ピクセル) が色情報を持っている画像です。ベクタ画像のような、描画に関する情報はありません。