最近、仕事でWebサイトの設計と称してコーディングをしてるんですが、、
SVGファイルをCSSでで使いたい時がよくあります。SVGコードをbase64でエンコードして、背景とかマスクイメージとか、contentとかに入れるんですが、コードを記述するのが面倒でした。
それで、毎回ググってテキトーなサイトで変換してました。最近引っかかるサイトがどれも使い勝手が悪いので、自分で作ってみました。
SVG base64エンコーダー（Web制作向け）
https://cync.jp/dev/svg-encoder/
Contents:
SVG変換ツールの使い方
- 変換したいSVGソースをコピーします
- SVG SourceフォームにSVGソースをペーストします。
- 中央にある右矢印ボタンを押します
- 右側にbase64エンコードしたソースが表示されたら、クリックしてコピーします
- コードエディタで使いたい箇所にペーストします
今後の展開など
BootstrapではSVGコードをHTMLに直書きしてidを振ってシンボル化し、再利用する方法とかも見かけます。SVGのWebサイトでの使用方法などを踏まえてアップデートしたいと思います。
ちなみに、今回のツール作成はChatGPTに要求を伝えソースコードを書かせてみました。
当然、本記事のサムネイルもDALL·Eによるものです。ここ最近、生成AIの使い方で生産性に差が生じるのを最近実感してます。アシスタントとして上手に使って、思った通りのソースを吐かせたり、情報を整理させたり、変換させたり…なんて作業は、間違いなく自分でやるより早いので、上手く付き合って行きたいですね。
特に自分が経験していないことなどを壁打ち的に相談しながら、一般的な進め方を探ったり、手掛かりを模索するような時にも有効です。