😺

SVGファイルを手軽に編集！X投稿用図解を簡単カスタマイズする方法

2025/03/11に公開

VS Code

 はじめに最近、Claude 3.7 Sonnetなどの大規模言語モデルを使ってSVG形式の図解を簡単に作成できるようになりました。しかし、AIが生成した図解はそのままでは100%満足できないことも多く、色やサイズ、テキストなど細かい部分を調整したいケースがあります。
特にXへの投稿では、視覚的に魅力的な図解が注目を集めるため、SVGファイルを手軽に編集できる環境があると便利です。今回は、プログラミング経験の有無に合わせて、2つの優れたSVG編集ツールを紹介します。

 プログラマー向け：VSCode拡張機能「SVG Preview」プログラミングに慣れている方には、Visual Studio Codeの拡張機能「SVG Preview」がおすすめです。

 SVG Previewの特徴
リアルタイムプレビュー: コードを編集しながら即座に変更を確認できる

ダウンロード数: 117万以上の実績

使いやすさ: VSCodeユーザーなら導入も操作も簡単

 インストール方法VSCodeの拡張機能タブを開く（Ctrl+Shift+X）
検索バーに「SVG Preview」と入力
Simon Siefke作の「SVG Preview」をインストール

 使い方SVGファイルを開く

Ctrl+Alt+Pを押すか、右クリックメニューから「Open Preview to the Side」を選択
左側でコードを編集すると、右側のプレビューがリアルタイムで更新される

 トラブルシューティング：SVGファイルがテキストとして開かない場合もしSVGファイルを開くと毎回画像として表示されてしまう場合は、以下の手順でテキストエディタとして開くように設定しましょう：
SVGファイルを右クリック
「ファイルを開くアプリケーションの選択」を選択
「SVGの既定エディタを構成する」を選択
「テキストエディター」を選択
これで、SVGファイルを開くとテキストエディタとして開かれるようになり、コードを直接編集できます。

 実際の編集例例えば、「こんにち商店」のSVG図解の下部の線を消したい場合：


svgのチョーク箇所を選択し


削除することでリアルタイムで反映

 SVG Previewのメリットコードとプレビューを同時に見られる
拡大・縮小機能で細部を確認できる
カスタムスタイル設定で背景色なども変更可能
VSCodeの他の機能（検索・置換など）と組み合わせて使える

 非プログラマー向け：ブラウザで使える「DRAW-SVG Editor」プログラミングに慣れていない方には、ブラウザベースのSVGエディタ「DRAW-SVG Editor」がおすすめです。

 DRAW-SVG Editorの特徴
ブラウザで動作: インストール不要ですぐに使える

視覚的な操作: コードを直接編集せずに図形やテキストを操作できる

直感的なUI: ドラッグ＆ドロップで簡単に編集可能

 使い方
DRAW-SVG Editorにアクセス
「Open SVG」ボタンからSVGファイルを読み込む
左側のツールパネルを使って図形やテキストを編集
「Save SVG」ボタンで編集したファイルを保存

 実際の編集例先ほどの修正をこちらでも行ってみると
URLからDocumentのopenを選択


Browseから読み込みたいsvg画像を選択
消したい線をクリック


Removeボタンを押下したら完了！

 DRAW-SVG Editorのメリットコードを書かなくても編集できる
視覚的に操作できるので直感的
インストール不要ですぐに使える
基本的な図形の追加や編集も簡単

 その他のSVG編集ツール（参考情報）以下のツールも便利ですが、今回は詳しく紹介しません：

SVG Previewer (VSCode拡張): サイドパネルでのプレビュー表示に特化

Native SVG Preview (VSCode拡張): VSCodeのネイティブスタイルに合わせたプレビュー

SVG-Edit: 機能豊富なブラウザベースのエディタ

Figma: デザインツールとしても人気、SVG編集も可能

 まとめSVGファイルの編集には、プログラミング経験の有無によって最適なツールが異なります：

プログラマーの方: VSCodeの「SVG Preview」拡張機能を使えば、コードを直接編集しながらリアルタイムでプレビューを確認できます。

非プログラマーの方: ブラウザベースの「DRAW-SVG Editor」を使えば、コードを書かずに視覚的に編集できます。
どちらのツールも無料で使えるため、X投稿用のSVG図解を手軽に編集したい方は、ぜひ試してみてください。AIが生成した図解に少しの手を加えるだけで、より魅力的で効果的な投稿が可能になります。
SVGの編集は思ったより簡単です。ぜひ自分の発信をより魅力的にするために、これらのツールを活用してみてください！

 最後に私は2つのプラットフォームで生成AIに関する発信を行なっております。

 生成AIサービスの考察を見たい方へ生成AIサービスの動向やや具体的な内容は、noteで詳しく解説しています。
noteプロフィール: @mizupee

 日々の生成AI分析を追いたい方へ毎日1つの生成AIサービスを分析するTwitter投稿「#100DaysofAI」もぜひフォローください。簡潔なポイント分析とアイデア共有を継続中です。
Twitter: @mizupee