画像をSVGにトレースするためのガイド
画像をSVGにする方法、設定の選び方、Webサイトやアプリ用のアイコン作りについての実践的な記事。各ガイドには出典と日付を記載しています。
ロゴ・アイコン・ステッカーをきれいなSVGにする説明の書き方
2026-10-10描くものは具体的に、ロゴ1つにアイデア1つ、アイコン1つにモノ1つ。スタイルは短くわかりやすい言葉で一度だけ書き、色は3色までにします。文字にしたい言葉は引用符で囲んで短く。グラデーション、写真のような光、細かい質感、小さすぎる細部など、ベクターで表せないものは書かないこと。こうして書いた説明からは、そろったセットと、少数のきれいなパスにトレースできるファイ…
記事を読む写真をトレースするとポスターのようになる理由
2026-10-10写真には微妙に異なる何百万もの色があり、はっきりした輪郭がありません。トレースの最初のステップでは画像を最大24色の平坦な色に減らすため、なめらかな色の移り変わりはすべて2つの帯の境界になります。これがポスタリゼーション（ポスター調）です。色数を増やしても、帯が細かく増えるだけで、写真のような仕上がりにはなりません。トレースはロゴ、アイコン、イラスト向けです…
記事を読むSVGはベクターファイル？パスとピクセルの違い
2026-10-10たいていはそうですが、いつもではありません。SVGは、絵をパスで描いていればベクターファイルですが、PNGを<image>要素で包んでいるだけなら、見た目だけのラスター画像で、拡大するとぼやけます。本当のPNGからSVGへの変換では、絵を塗り色付きの閉じたパスとして作り直すので、ぼやけずに拡大でき、図形ごとに編集できます。png2svg.artが出力するのは…
記事を読むPNGをSVGにしても透明な背景は残る？
2026-10-10はい、PNGやWebPの透明な部分は、トレースしたSVGでも透明のままです。トレースツールは半分以上不透明なピクセルだけを輪郭化するので、切り抜かれたロゴは切り抜かれたベクターになります。図形の中の白い細部は背景を削除しても残ります。背景の削除は画像の端から内側に向かって進み、囲まれた部分には触れないからです。注意が必要なのは、白い背景の上の白いアートワーク…
記事を読むfaviconの形式の違い：SVG・PNG・ICOの使い分け
2026-10-10複数サイズ入りのfavicon.ico、ロゴが本物のベクターならSVGのfavicon、180pxのApple touchアイコン、Webマニフェストをリンクしましょう。SVGのfaviconは最新のChrome、Edge、Firefox、Operaで使え、Safariはバージョン26からです。サイズ別のPNG…
記事を読むXcodeの画像アセットはSVGとPNGのどちらにする？
2026-10-10拡大縮小したいシンプルなSVGのアートワークにはベクターのimagesetを、ラスター画像や対応する描画効果を使う場合はPNGのバリエーションを使います。Xcode用アセットの書き出しツールは、画像ファイルとContents.jsonをまとめて書き出します。PNGの幅はポイントで指定し、64ポイントの画像は1x・2x・3xで64、128、192ピクセルになり…
記事を読むSVGをAndroidのXML（VectorDrawable）に変換する方法
2026-10-10AndroidのVectorDrawableは描画パスを含むXMLで、拡張子を変えただけのSVGではありません。シンプルなSVGの形状を変換し、XMLをres/drawableに保存して、アプリからリソースとして参照します。このエクスポーターは単色の塗り、互換性のある線、塗りのルールを保ち、対応していないアートワークはお知らせします。出力はAndroid…
記事を読むPNGをSVGに変換してCricut・シルエットで使う方法
活用例 · 2026-10-10PNGやJPGからCricutやシルエット用のSVGを作るには、「Cricut／カッティング」プリセットでトレースします。4色から始まり、背景を削除し、細すぎてカットできない図形やすき間をまとめます。無料の透かし入りプレビューを確認し、透かしなしのSVGのロックを解除して（{{catalog:unlock_price}}、アカウントなら{{catalog:w…
記事を読むTelegram・WhatsApp用のステッカーセットを作る方法
2026-10-10キャラクターを説明するかモノを並べ、スタイルとフチを選ぶと、ステッカーメーカーがセットを描き、各ステッカーを切り抜いてベクターにトレースします。ダウンロードは使い道ごとに用意されます。Telegram用には512pxのPNGとWebP、WhatsApp用にはトレイアイコン付きの100KB未満の512px…
記事を読む手描きのラフや参考画像からロゴを作る方法
2026-10-10ラフがそのままロゴになるなら、トレースしましょう。真上から平らに撮影し、「線画／ステンシル」で変換します。きちんと描き直す必要があるアイデアなら、説明と一緒にAIロゴ作成に添付します。ラフで構図を、説明でスタイルと色を決められます。同じ画像で、アイコンセットの見た目、ステッカーのキャラクター、バッジセットの雰囲気を決めることもできます。
記事を読む画像の背景を削除する方法：透過PNGまたはSVGに
2026-10-10画像を背景削除ツールにアップロードして、モードを選びます。「フラット」は単色の背景を端から内側に向かってぴったり削除し、白い目や文字の穴のように囲まれた部分は残します。「被写体（AI）」は、写真やごちゃごちゃした場面から主な被写体を見つけます。結果はフルサイズの透過PNG、またはトレースしたSVGでダウンロードでき、お支払いの前に無料でプレビューできます。
記事を読むブラウザでSVGの色を変える方法：レイヤーごとに色変更
2026-10-10SVGをエディターで開きます。「レイヤー」タブの各行に色が表示されているので、クリックすると、そのレイヤー、グループ、図形の色を1回の操作（元に戻すのも1回）で変えられます。図全体で1つの色を変えるには、「色」タブのパレットで「すべてを次の色に変更」を使います。変更はその場でプレビューでき、Escで元の色に戻せます。結果はSVGで保存するか、PNGで書き出せ…
記事を読むPWAのmaskableアイコン：セーフゾーンと設定方法
2026-10-10ランチャーはアプリアイコンを独自の形に切り抜きます。maskableアイコンは正方形全体を背景で埋め、重要なものはすべて、半径がアイコンのサイズの40%の中央の円の中に収めます。透明なpurpose anyのアイコンとは別に、purpose maskableのファイルとして用意し、両方をマニフェストに記載して、公開前にChrome…
記事を読むAIロゴからアプリアイコン、favicon、ブランドキットまで
2026-10-10ロゴを説明し、4つのアイデアから1つ選んで、言葉で手直しします。それをSVGにベクター化したら、その1つのファイルからアプリアイコン、faviconのパッケージ、PWAアイコンを作ります。まとめてブランドキットにすることもできます。favicon、アプリアイコン、XcodeとAndroid用のアセット、最大2,048pxのPNG、最適化したSVGが、すべて同…
記事を読むロゴタイプ、エンブレム、マスコット、バッジ：ロゴのスタイルの選び方
2026-10-10ロゴタイプは名前そのものをロゴとして描いたもの、エンブレムやシンボルは文字のないマーク、モノラインは均一な1本の線で描いたマーク、マスコットはキャラクター、バッジは形の中に名前を収めたもの、ステッカーロゴは切り抜きの輪郭が付いた太いマークです。ロゴを使う場所で選びましょう。小さなアプリアイコンやfaviconにはシンプルなシンボルが向いていて、看板やパッケー…
記事を読む画像をベクター化：PNG・JPG・WebPをベクターに変換
活用例 · 2026-10-10画像をベクターにするには、トレースツールがピクセルを少数の平坦な色にまとめ、各色を閉じたパスとして輪郭化します。png2svg.artはPNG、JPG、WebPファイルをこの方法で変換し、オブジェクトごとにグループ化されたSVGを返します。図形はそれぞれ塗りつぶされた独立したパスで、色数は2〜24色、透明な部分は透明のまま残ります。ロゴ、アイコン、線画、フラ…
記事を読むPNGをSVGに変換する方法：手順をわかりやすく解説
2026-10-10PNGをSVGに変換するには、トレースします。トレースツールが画像の色をベクターパスとして輪郭化し、SVGとして保存します。png2svg.artでは、PNGをアップロードしてプリセットと色数を選び、無料の透かし入りプレビューを確認してから、透かしなしのSVGのロックを解除します（{{catalog:unlock_price}}）。Inkscape（パス…
記事を読むHEICをSVGに変換：iPhoneの写真や画像をベクター化
2026-10-10HEICはそのままアップロードしてください。変換ツールはファイルのメイン画像を読み込み、回転を適用し、広色域やHDRの色を標準の色に変換し、透過を保ったまま、SVGのパスにトレースします。無地の背景で撮った絵、ロゴ、看板はきれいに変換できます。ごちゃごちゃした写真は平坦な色の領域になります。先にJPGで保存し直しても、圧縮ノイズが増えるだけです。
記事を読むフラットなロゴをきれいにトレースするおすすめ設定
2026-10-10フラットなロゴなら、まず「標準」プリセットを選び、色数は実際に見える色の数に背景の1色を足した数にし、「なめらかな曲線」はオンのまま、「背景を削除」は消したい単色の背景の上にロゴがある場合だけオンにします。ロック解除の前に、プレビューで角といちばん小さい文字を確認してください。
記事を読むトレース後にSVGのパスを編集する方法
2026-10-10ロックを解除したトレース結果は内蔵のエディターで開け、各オブジェクトがレイヤーに、その中の図形がそれぞれ独立したパスになっていて、どれがどれを囲むかに従って入れ子になっています。どの図形も色を変えたり、移動・拡大縮小・回転したり、ポイントやカーブハンドルを1つずつドラッグしたりできます。図形の整列や等間隔配置、合体・型抜き・交差、グリッドへのスナップ、オブジ…
記事を読む低解像度・JPEGのロゴをトレース前にきれいにする方法
2026-10-10トレースしても解像度は上がりません。200ピクセルのロゴは、どんな設定でトレースしても、曲線を推測した200ピクセルのデザインのままです。直せるのはノイズ、つまりJPEGのブロック、色の点々、ぼやけた輪郭です。そのためには、より大きくきれいな元画像と少ない色数でトレースします。png2svg.artはすべてのカラートレースでパレットの整理を行うため、圧縮ノイ…
記事を読むトレースしたSVGは何色にすればいい？色数の決め方
2026-10-10名前を挙げられる色の数に、不透明な背景があれば1色を足した数にしてください。色数は2〜24の上限です。トレースはその数までの平坦な色を選んでそれぞれの輪郭を描くので、フラットなアートワークなら実際にある色数で止まり、大きめの数にしてもほとんど損はありません。一方、見えている色より少ない数にすると、隣り合う塗りがまとまってしまいます。
記事を読む1枚の画像からAndroid・iOSのアプリアイコンを作る
2026-10-101枚の画像で両方のプラットフォームに対応できますが、リソースパッケージの中身は異なります。Androidには画面密度ごとのバリエーションとアダプティブアイコンのレイヤーが必要で、このツールはモノクロのシルエットも作ります。iOSには、Xcodeのシングルサイズ方式に合わせ、AppIconアセットカタログに入った1,024pxの不透明な画像が用意されます。透過…
記事を読むAI画像をSVGに変換：ChatGPT、Midjourney、Gemini
活用例 · 2026-10-10ChatGPT、Midjourney、GeminiなどのAI画像生成ツールが作るのはラスター画像、つまりピクセルでできたPNG、JPG、WebPファイルで、SVGではありません。SVGにするには画像をトレースします。png2svg.artは平坦な色ごとに輪郭をベクターパスにします（最大24色）。色の少ないフラットなスタイルはきれいにトレースでき、写真のように…
記事を読むAIで統一感のあるアイコンセットをSVGで作る方法
2026-10-10必要なアイコンを並べ、ライン、塗りつぶし、フラットカラー、または自分の画像の雰囲気を選び、スタイルを短い言葉で説明します。すべてのアイコンを1枚のシートに描くので、線の太さや角がそろいます。その後、各アイコンが24×24のグリッド上で個別のSVGにトレースされます。ラウンドで1つずつやり直したり追加したりして、SVG、16〜512pxのPNG、スプライトをダ…
記事を読むアプリ・ゲームの実績バッジを作る：獲得済み・ロック中・ランク
2026-10-10バッジメーカーに実績のリストと、「レベル1、2、3」のような下段のルールを渡すと、各バッジにあなたの言葉を入れたそろいのセットを描きます。バッジはすべてベクターにトレースされ、ロック中、シークレット、ブロンズからプラチナまでのバージョンはそこから作られるので、2回描く必要はありません。ダウンロードは各プラットフォームのルールに合わせてあります。アプリ用にはS…
記事を読む自分の画像で試す
トレースで作品がどうなるかを知るいちばんの近道は、実際に試すことです。プレビューは無料で、クレジットを使う前に結果全体を確認できます。画像を変換するか、サービスでできること・できないことは概要ページをご覧ください。