[{"data":1,"prerenderedAt":140},["ShallowReactive",2],{"blog-post-/blog/ja-jp/how-to-view-recolor-and-optimize-svg-online":3,"related-posts-/blog/ja-jp/how-to-view-recolor-and-optimize-svg-online":128},{"id":4,"title":5,"author":6,"body":7,"category":109,"date":110,"description":111,"extension":112,"featured":113,"image":114,"meta":115,"navigation":116,"path":117,"readingTime":118,"seo":119,"stem":120,"tags":121,"tools":126,"__hash__":127},"content/blog/ja-JP/how-to-view-recolor-and-optimize-svg-online.md","SVG コードをオンラインでプレビュー・色変更・軽量化する方法","Anything Tools Editorial",{"type":8,"value":9,"toc":102},"minimark",[10,14,23,28,44,47,54,74,78],[11,12,5],"h1",{"id":13},"svg-コードをオンラインでプレビュー色変更軽量化する方法",[15,16,17,18,22],"p",{},"Claude や ChatGPT で生成した ",[19,20,21],"code",{},"\u003Csvg>"," コードや、SVGRepo・Figma から書き出したベクターアイコンは、テキストエディタだけでは細部の見た目や余白を確認しづらいものです。ブラウザ上でプレビュー・色調整・軽量化・画像書き出しまでを一括で行えるワークフローを活用しましょう。",[24,25,27],"h2",{"id":26},"透過グリッド明暗背景でリアルタイム確認","透過グリッド・明暗背景でリアルタイム確認",[15,29,30,35,36,39,40,43],{},[31,32,34],"a",{"href":33},"/dev/svg-viewer","SVG ビューアー＆最適化ツール","にコードを貼り付けるか ",[19,37,38],{},".svg"," ファイルをドロップすると、",[19,41,42],{},"viewBox"," からサイズを自動判定して即座に描画されます。グリッド・ライト・ダークの背景を切り替えることで、白背景で見えなくなる線や透過漏れをすぐに発見できます。",[24,45,46],{"id":46},"コードを書き換えずにドラッグ操作でリアルタイム色変更",[15,48,49,50,53],{},"複数の ",[19,51,52],{},"\u003Cpath>"," に散らばった色コードを手作業で置換する必要はありません。",[55,56,57,63,66],"ol",{},[58,59,60,62],"li",{},[31,61,34],{"href":33},"のプレビュー下部に、検出された HEX カラーが一覧表示されます。",[58,64,65],{},"カラースウォッチをクリックしてカーソルを動かすと、図形内の該当カラーがリアルタイムに変化します。",[58,67,68,69,73],{},"配色設計から始めたい場合は",[31,70,72],{"href":71},"/design/color-picker","カラーピッカー","も併用できます。",[24,75,77],{"id":76},"xml-の軽量化と-2x-4x-png-出力","XML の軽量化と 2x / 4x PNG 出力",[15,79,80,84,85,88,89,92,93,96,97,101],{},[81,82,83],"strong",{},"軽量化","ボタンをクリックすると不要なコメントやメタデータ、空白が削除され、CSS にそのまま貼れる ",[19,86,87],{},"Data URI"," もワンクリックでコピーできます。スライド資料向けに画像化する際は、",[19,90,91],{},"2x"," または ",[19,94,95],{},"4x"," 倍率を選んで高解像度 PNG・WebP として書き出せます。別形式への一括変換には",[31,98,100],{"href":99},"/image/converter","画像変換ツール","が便利です。",{"title":103,"searchDepth":104,"depth":104,"links":105},"",2,[106,107,108],{"id":26,"depth":104,"text":27},{"id":46,"depth":104,"text":46},{"id":76,"depth":104,"text":77},"Developer Tools","2026-10-27T00:00:00.000Z","ブラウザ上で SVG コードをリアルタイム表示し、カラーピッカーでの動的色変更、XML の圧縮、2x/4x 高解像度 PNG 書き出しを行う実践ガイド。","md",false,"/blog/how-to-view-recolor-and-optimize-svg-online.png",{},true,"/blog/ja-jp/how-to-view-recolor-and-optimize-svg-online",5,{"title":5,"description":111},"blog/ja-JP/how-to-view-recolor-and-optimize-svg-online",[122,123,124,125],"SVG viewer","SVG optimizer","SVG to PNG","developer tools",[33,99,71],"dLWRnM3IoPFXUzX4SztD9aMPyfS2mbxVxFFYeD924UE",[129,135],{"path":130,"title":131,"description":132,"date":133,"image":134,"category":109,"readingTime":118},"/blog/ja-jp/convert-image-to-base64-guide","画像を Base64 に変換するメリットとデメリット","プロトタイプ、メール、小さなアセットで Base64 画像文字列が役立つ場面と、通常の画像ファイルを使うべき場面を解説します。","2026-08-14T00:00:00.000Z","/blog/convert-image-to-base64-guide.png",{"path":136,"title":137,"description":138,"date":110,"image":139,"category":109,"readingTime":118},"/blog/ja-jp/how-to-convert-chatgpt-session-json-safely","ブラウザ上で ChatGPT Session JSON を安全に変換する方法","ChatGPT の auth session JSON を Sub2API、CPA、Cockpit、9Router、Codex、AxonHub 形式へブラウザ内完結で一括変換し、トークンの漏洩を防ぎます。","/blog/how-to-convert-chatgpt-session-json-safely.png",1793175862365]