web関連

【コマンドプロンプト】画像をbase64に変更する方法

2021/05/04

svg画像をbase64にエンコードしてHTMLやCSSとして埋め込みたかったときの備忘録

コマンドプロンプトを使ってSVG→base64にエンコード

コマンドプロンプトを開いて、画像ファイルのある階層までcdコマンドで移動し以下のコマンド

certutil -encode [画像ファイル名] [テキストファル名]

例:certutil -encode icon-arrow.svg base64.txt

base64.txtが生成されその中にエンコードされたコードが入ってる
※既にbase64.txtが存在しているとリネームする必要あり

HTMLやCSSで使う方法

エンコードされたコードをソースコードに貼り付けても表示されないので以下の記述とセットで使う

data:image/svg+xml;base64,[エンコードされたコード]

例:↓

<img src="data:image/svg+xml;base64,PCEtLT94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPy0tPgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+Cgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9Il94MzJfIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJ3aWR0aDogMjU2cHg7IGhlaWdodDogMjU2cHg7IG9wYWNpdHk6IDE7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojNEI0QjRCO30KPC9zdHlsZT4KPGc+Cgk8cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjE2My45MTYsMCA5Mi4wODQsNzEuODIyIDI3Ni4yNTgsMjU1Ljk5NiA5Mi4wODQsNDQwLjE3OCAxNjMuOTE2LDUxMiA0MTkuOTE2LDI1NS45OTYgCSIgc3R5bGU9ImZpbGw6IHJnYig3NSwgNzUsIDc1KTsiPjwvcG9seWdvbj4KPC9nPgo8L3N2Zz4K">

上のコードみたいなやつインラインイメージっていうみたいだわ
以前調べてた

jpg画像とかだとコード量が多くなるのでアイコンみたいなシンプルなものに対して使う

Leave a Comment

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。