|
Delphi Programming / Object Pascal
  
[掲載 2025年08月11日] [更新 2025年08月11日] Delphi 一般・その他 [未分類 - OS の操作等] |
| SVG 画像を PNG 画像に変換するオンラインツール |
| 動作確認等 |
Windows 10 ビルド 19045 Pro 64 bit
Google Chrome 138, Microsoft Edge 138, Firefox 140 |
|
SVG 画像を，サイズを指定して PNG 形式の画に変換するために作成したツールですが，他の形式の画像も PNG 形式の画像に変換できます．
PNG 画像のサイズは，幅をピクセル単位で指定します．長さは，元の画像から自動的に計算します．設定可能な範囲は 16 以上，512 以下です．幅サイズを入力して [Enter] キーを押すと確定となります．サイズの入力欄の上の値は，元の画像のサイズ (幅 x 長さ) です． |
|
[ファイル名] の入力欄に，下表のような操作で画像あるいは画像の URL (アドレス) を貼り付けると，その画像を PNG 画像に変換して表示します．貼り付けは，全て置き換え貼り付けとなります．文字列の途中に挿入する貼り付けはできません．URL がローカルファイルの場合 (file:///... の形式) は処理できません． |
| >変換対象の画像 |
[ファイル名] 欄の表示 |
画像の上でマウス右ボタンクリック
[画像をコピー] |
フィル名のみ表示．編集不可 |
画像の上でマウス右ボタンクリック
[画像のリンクをコピー] や
[画像アドレスをコピー] など |
リンクの URL．または Base64 等のデータを表示
編集可能 |
| 画像の URL の文字列をコピー |
| エクスプローラで画像ファイルをコピー |
フィル名のみ表示．編集不可 |
| [参照] ボタンで画像ファイルを選択 |
フィル名のみ表示．編集不可 |
| PNG 画像のコピー，保存の方法です．マウスの右ボタンクリックのメニューから [名前を付けて画像を保存] または [画像をコピー] を選択します． |
 |
図1
PNG 画像の保存とコピー |
[備考 1]
ウェブブラウザで表示している SVG 画像を [画像をコピー] した場合，PNG 画像だったり画像がないことがあります．これは，画像あるいはウェブブラウザによって異なります． |
[備考 2]
本ページに掲載している画像は，ツール本体の画像以外は全て当サイト内に置いている画像ファイルを表示しています． |
[備考 3]
本ページを表示した時に表示するのは，甲骨文字の「馬」です． |
| 02_文字の SVG 画像があるグリフウィキとウィクショナリー |
| グリフウィキとウィクショナリーのサイトには，文字の SVG 画像があります下の．右側のボタンをクリックすると，入力欄の最初の文字を，それぞれのサイトで検索します．検索可能な文字はコードポイント (文字コード) が 1 つだけの文字です．つまり，一般的な文字だけです． |
| グリフウィキで文字「東」の SVG 画像の URL を調べると以下のようになります．この URL を本ツールの [ファイル名] 欄に貼り付けると PNG 画像に変換できます．6771 が文字「東」のコードポイント (文字コード) です．この値を変更すると別の文字になります．コードポイントの値は 16 進数の 4 桁または 5 桁の値で，小文字を使用します． |
https://glyphwiki.org/glyph/u6771.svg
|
 |
図2
文字「東」の SVG 画像 |
グリフウィキには以下のような文字の SVG 画像もあります．これらの文字は，略字 (略号) と呼ばれている類の文字です．Unicode にはありません．
グリフウィキのサイトで検索するには，アカウントを登録してログインします．すると，検索文字の入力欄が現れます． |
| ウィクショナリーには，検索文字そのものの SVG 画像はありませんが，下図のような甲骨文字などの SVG 画像があります．これらの文字も Unicode にはありません． |
 |
図4
|
| それらの文字の SVG 画像の URL を取得するには，文字の上でマウスの三五ボタンをクリックして [新しいタブで開く] を選択します．
該当文字のページが表示されたら，文字の下の方にある [コモンズのファイル説明ページ] をクリックします．表示されたページに SVG 画像のリンクがあります．[元のファイル (SVG ファイル．．．] という箇所です．また，[このファイルを利用 ウェブで] をクリックすると [ファイルURL: ] の項目にその画像ファイルの URL が表示されます．
この [ファイルURL: ] の値をコピーして本ツールの [ファイル名] 欄に貼り付けます． |
| 03_Twemoji Mozilla の SVG 画像 |
| Twemoji Mozill は，X (旧 Twitter) が使用している Emoji 用フォントです．X ではそれらの文字を SVG 画像で表示しています．
文字の上でマウスの右ボタンをクリックして [画像のリンクをコピー] (画像アドレスをコピー)] を選択します．それを本ツールの [ファイル名] 欄に貼り付けると PNG 画像に変換して表示します．画像の URL は，例えば以下のようになります．1f605, 1f43f はほぼ絵文字のコードポイント (文字コード) ににっています．この値を変更すると別の文字の SVG 画像となります．
Google Chrome 138, Microsoft Edge 138 では [画像をコピー] を選択しても，SVG 画像を取得することはできません． |
https://abs-0.twimg.com/emoji/v2/svg/1f605.svg
https://abs-0.twimg.com/emoji/v2/svg/1f43f.svg
|
 |
図5
1f605.svg の画像 |
 |
図6
1f43f.svg の画像
- この文字のコードポイントは 1f43f + fe0f
|
| 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 画像の取得となります． |
 |
図7
chipmunk_3d.png の画像
|
 |
図8
chipmunk_color.svg の画像 |
 |
図9
chipmunk_flat.svg の画像 |
 |
図10
chipmunk_high_contrast.svg の画像 |
[備考]
Windows 11 の Segoe UI Emoji に収録されているのは，Unicode Emoji 12.0 相当の絵文字ですが，Unicode Emoji 13.0 で追加された絵文字も一部含まれています．2025年8月現在，Unicode Emoji のバージョンは 17.02 です． |
| 05_Noto Color Emoji の SVG 画像 |
| 以下のリンクからダウンロードした ZIP 書庫には，Noto Color Emoji の PNG 画像と SVG 画像があります．PNG 画像は 32 x 32, 72 x 72, 128 x 128, 512 x 512 の 4 種類あります．
下図は，上の図と同じコードポイントの文字の SVG 画像です． |
 |
図7
emoji_u1f43f.svg の画像 |
|
