将棋AI「将棋神やねうら王（MyShogi）」の局面図や、ブラウザからしか保存できないSVG画像を高品質なPNG/JPG画像に変換するPythonスクリプトを作ったので、ここで紹介します。
🧩 なぜ作ったか？
将棋神やねうら王を使って研究していると、「局面図を画像として保存したい」というニーズがある。しかし――
- 出力は SVG形式のみ
- SNSやブログでは JPG/PNGしか使えない
- 手作業で変換するのはめんどくさい
- ネットのSVG→PNG変換ツールは 精度がバラバラで信用できない
……という状況。
自分用に、高精度・完全自動・信頼性重視の変換スクリプトを作ったらかなり便利だったので、これは誰かの役に立つかもと思い公開することにしました。
オンライン変換ツールとの違い
多くのSVG→画像変換ツールはWebサービスとして提供されていますが、以下のような不安や不満があります：
- ❌ サービスが突然終了する可能性がある（実例多数）
- ❌ 広告だらけで重かったり、変換精度が低い
- ❌ オンライン接続が必要で出先では使いづらい
- ❌ ファイルを外部にアップロードするためセキュリティ的に不安
- ❌ 思った通りのレンダリング結果にならないことも多い
svg2img はこれらの問題をすべて解決します：
- ✅ 完全ローカル動作（アップロード不要）
- ✅ Playwright + ブラウザ描画により高精度な画像出力
- ✅ オフラインでも再現可能
- ✅ Pythonスクリプトなので中身が透明で、自由にカスタマイズ可
安心・高品質・ローカル完結の変換環境が手に入ります。
🧩 オンラインの変換サービスは「便利」だけど「永続性」はない
過去にも将棋局面図を作成できるWebサービスがいくつか閉鎖されており、「使ってたのに急に消えて困った」という声は実際に存在します。
svg2imgは、ローカルで完結するPythonスクリプトです。ネット環境や外部サービスの運営状況に左右されることなく、10年後でも確実に動作する信頼性の高い変換ツールを目指して設計されています。
💡 ちょっと画像にしたいだけなのに…
「ちょっとSVGを画像にしたいだけなのに…」
そんなとき、わざわざAdobe製品や有料ソフトを使う必要はありません。
svg2imgは Pythonだけで完結。
特殊なアプリのインストールやサブスクリプション契約も不要で、pipコマンドだけで簡単に導入できます。
環境構築もシンプルで、導入ハードルが非常に低いのが魅力です。
🖼️ スクリーンショットではダメなのか？
もちろん、画面に表示されたSVGをスクリーンショットで切り取るという方法もあります。ただ、それだと……
- 微妙にズレたり、余白が入ったりして毎回調整が必要になる
- 解像度が画面依存なので、拡大しても画質が粗くなる
- 同じ画像をもう一度取り直したいときに、完全再現が難しい
といった問題がつきまといます。
svg2imgなら、コマンドひとつで正確・高品質にPNG/JPGを出力できるので、手間も精度も段違いです。
🧩 ブラウザ拡張機能ではダメなのか？
SVGをPNGやJPGに変換できる ブラウザの拡張機能 も存在します。
ワンクリックで変換できる手軽さは魅力ですが、以下のような懸念もあります。
- どの拡張機能を使えばいいか、選定に迷う
- 変換結果が期待通りにならないことがある（余白、サイズ、背景など）
- 処理内容がブラックボックスで、細かい調整や再現が難しい
- そもそも、拡張機能をインストールできない環境もある（企業PCなど）
そうはいっても、「じゃあPythonスクリプトは怪しくないのか？」と思われるかもしれません。
この svg2img.py は、Python製の Playwright を使って、ブラウザ上で SVG を正確に描画し、PNG や JPG 形式で出力 しています。
ブラウザで表示されたとおりの見た目を、ズレや余白なしでそのまま画像に変換できるのが特徴です。
さらに、ソースコードはすべて公開されており、動作内容は明確かつシンプル。
拡張機能のように「何をしてるかわからない」といった不安がなく、自分で処理を確認・調整できる透明性と柔軟性があります。
🔧 どうやって変換するのか？
svg2imgは、以下の技術を組み合わせています：
-
HTML +
<img src="data URI">+ JavaScript でSVGを埋め込み表示 <canvas>に描画 → PNG/JPGとしてエクスポート- Playwright を使ってブラウザを自動操作し、保存処理を実行
- 最後に 一時HTMLファイルを自動でゴミ箱へ移動
PNGとJPGはそれぞれ異なる背景処理をしており：
- PNG → 透明背景をそのまま維持
- JPG → 白背景に塗りつぶし
画像の品質は、ブラウザ描画そのままなので、フォントや線のアンチエイリアスも非常に自然です。
💡 なぜブラウザを使うのか？
SVGはWeb技術の一部として設計されており、**最も正確に描画できるのは現代のWebブラウザ（Chromeなど）**です。
PythonライブラリやCLIツールでは、CSSや一部のスタイルが無視されたり、画像やフォントの描画が不完全だったりするため、
svg2imgでは Playwright + ブラウザ描画を利用して、人間が見ている通りにレンダリングしています。
人がブラウザで見ているのと同じ画像を、正確に保存するためのアプローチです。
実際に描画崩れや環境依存の問題が起きやすいため、ブラウザでの描画結果をそのまま画像にする方法がもっとも現実的で確実です。
🚀 使い方
必要なもの：
- Python 3.8以上
- Google Chrome または Chromium
- 以下のライブラリをインストール：
pip install playwright send2trash
python -m playwright install
実行コマンドはこれだけ：
python svg2img.py 001.svg
→ 001.png と 001.jpg が同じフォルダに自動生成されます。
📦 どこで入手できるの？
GitHubにて公開しています：
🔗 https://github.com/yahoike/svg2img
MITライセンスなので、自由に使ってもらって構いません。
StarやIssue、PRなども歓迎です。
✨ どんな人におすすめ？
- MyShogiの局面図をSNSで共有したい
- SVG形式しか保存できないツールを使っている
- Webサービスに画像をアップしたいが、SVGは非対応
- ネットの変換サイトに頼りたくない or 信用できない
「画像が美しいことを保証しつつ、自動で変換してくれる」そんなツールを探していた人にはピッタリだと思います。
💡 実装面での工夫
- Base64によるSVG埋め込みでローカルファイルを安定して扱えるように
- Playwrightで全自動化：ユーザー操作不要
- JPGは背景を塗りつぶす処理を入れて白背景化
- ダウンロード処理には expect_download() を使用して確実に取得
- 不要になったHTMLファイルは ゴミ箱に自動移動（Windows対応）
とにかく「ラクに確実に変換できること」に全振りした設計です。
👋 最後に
SVGから画像への変換って地味に面倒で、しかも精度もまちまち。
でも、こうして一度仕組みを作ってしまえば、一発でキレイな画像が出力できて快適です。
作ってよかった。
そして、同じ悩みを持つ誰かの役に立てばもっと嬉しい。
以上、svg2imgの紹介でした。
ぜひ使ってみてください！
この記事が役に立ったら、いいね・フォロー・GitHubスターもらえると嬉しいです！
👉 GitHubはこちら： https://github.com/yahoike/svg2img