更新済み 2026年8月27日

SVGを3Dロゴに変換する方法

SVGは出発点として最適なファイルです：3DLogo.ioはそのパスを直接読み取り、指定した深さまで押し出し、マテリアルを適用します。つまり、完成した3Dロゴはベクターファイルとまったく同じ輪郭になります。エディタにSVGをアップロードし、クロム、ゴールド、ガラスなどの仕上げを選び、PNG、GLB、またはループMP4として書き出します。

メカニズムは重要です。なぜなら、品質の違いを説明するからです。SVG はすでにブランドを数学的な曲線として表しています。エディタはその曲線をメッシュに変換し、深さの軸に沿って押し出すので、どのサイズでもエッジは鮮明に保たれ、きれいなベベルを彫ることができます。推測は一切ありません。PNG や JPEG は、まず曲線に変換するためにトレースする必要があり、エッジの位置を推定することになります。

エディターを開いてSVGをアップロードしてください3Dロゴとは
三角形の形をした白いフラットなベクターマークと、同じマークを押し出して作ったメッキの3Dロゴ

SVG に含めるべきもの

要件理由と、何をするか
トレース、テキストではありませんSVG のライブテキストには押し出す輪郭がありません。エクスポートする前にテキストを輪郭に変換してください（Illustrator: テキスト > アウトラインを作成; Figma: Flatten; Inkscape: パス > オブジェクトをパスに）。ファイルに描画可能な形状がない場合、エディターは形状が見つからなかったことを通知します。
1 MB 未満SVG のアップロードには 1 MB の上限があります。ロゴはほとんどの場合これを超えません。このサイズのファイルには埋め込まれたラスター画像や、自動ベクター化した写真の数千のパス点が含まれていることが多いです。
埋め込みスクリプトや外部参照はなしSVGはブラウザで解析されるため、コードを実行したりリモートリソースを要求したりする可能性のあるものはすべて書き換えられるのではなく拒否されます：script、foreignObject、XMLエンティティ、インラインイベントハンドラー、javascript: URL、iframe、object、embed、meta、link、外部href値、@importやリモートurl()スタイル。単純なSVGをエクスポートしてください、トレースだけで。
トレースは50個以下トレースの数がメッシュのサイズを決定します。5つ以下が最適で、20までならパフォーマンスは良好、21から50では古い電話では遅くなる可能性があり、50を超えるとメッシュがブラウザをブロックするためエディタがファイルを拒否します。重なった形を統合し、隠れたレイヤーを削除して数を減らしてください。
実際のviewBoxブランドは viewBox からキャンバスに合わせられます。4000ピクセル以上でエクスポートされたファイルや viewBox がないファイルは、変なスケールで表示されることがあります。エクスポートする前に作業用ボードをブランドに合わせて調整してください。

SVG を正常にエクスポートする方法

  • Illustrator: イラストを選択し、テキスト > アウトラインを作成 (Type > Create Outlines) を実行した後、オブジェクト > パス > クリーンアップ (Object > Path > Clean Up) で余分なポイントを削除します。次に、ファイル > 書き出し > 書き出し形式 > SVG、スタイルをプレゼンテーション属性 (Presentation Attributes) にし、適応 (Responsive) をオフにして viewBox が書き込まれるようにします。
  • Figma: フレームを選択し、ライブテキストが残っている場合は右クリック > Flatten を実行してから、エクスポート > SVG、「id 属性を含む」をオフにし、「テキストをアウトライン」にチェックを入れてください。
  • Inkscape: 選択範囲全体に対してパス > オブジェクトをパス (Path > Object to Path) を実行し、その後ファイル > 名前を付けて保存 > プレーン SVG (Plain SVG) として保存します。Inkscape の SVG は使用しないでください。これはエディタの追加メタデータを含んでいます。
  • どのツールでも: マークに穴や反型（「O」や「A」の空洞）がある場合、穴が押し出しの際に塗りつぶされないように、複合パスとして保持してください。

3DLogo.ioでの作り方

  1. エディターを開きます。始めるのにアカウントは必要ありません。
  2. SVG をアップロードパネルにドラッグするか、アップロードボタンを使用してください。
  3. 素材のプリセットを選択します：クロム、ゴールド、ガラス、ホログラフィック、ヘアラインメタル、またはグラデーション。
  4. 深さとベベルを調整し、環境と背景を選択します。ロゴが動く場合は動きを追加します。
  5. 静止画像用には PNG を、3D モデルを保持する場合は GLB または glTF を、デスクトップツールや印刷用には OBJ または STL を、ループには MP4 をエクスポートしてください。

条件と制限

SVGのアップロードが生成するのは単色の押し出しです。元のファイルの各パスの色は別々のマテリアルとして引き継がれません。ブランド全体が選択したプリセットを使います。SVGのグラデーション、ブレンドモード、フィルター、クリッピングマスクは無視されるので、事前に形に統合するか、平面のアウトラインを受け入れてください。無料エクスポートには小さな3dlogo.ioマークがあり、画像は1024p、動画は480pに制限されます。

ファイルが拒否されたり、結果が間違っているように見える場合は、 トラブルシューティングページ は、エディタが表示できるすべてのメッセージとそれぞれの修正方法を一覧にしています。

質問

SVGは3Dロゴに変換できますか?
1 MB未満で、ライブテキストではなく描画可能なパスを含み、スクリプトや外部参照がなく、おおよそ50パス以下に収まるSVGであれば、ほとんどすべてのエクスポートされたマークはこの4つの条件を満たします。一般的な例外は、自動でベクトル化された何千ものパスを持つ写真です。
なぜ私のSVGはアップロードできるのに何も表示されないのですか？
よくある原因は、ライブテキストがアウトラインに変換されていないことで、ファイル自体は正しく解析されるものの押し出す形状が存在しません。次の原因は、イラストがviewBoxの外に配置されていることです。テキストをアウトラインに変換し、アートボードをマークに合わせてトリミングし、再度エクスポートしてください。
文字の隙間は3Dでも開いたままですか？
はい、カウンターフォームが正しい塗り規則を持つ複合パスの一部である場合、それはデザインツールがデフォルトで書き出す動作です。穴が塗りつぶされる場合、カウンターフォームは別の重ねられた形として書き出されます；両方を選択して、書き出す前に複合パスを作成してください。
3DロゴにはSVGとPNGのどちらが良いですか？
はい、選べる場合に限ります。SVGのパスは正確なアウトラインで押し出されるため、書き出しサイズがどんな場合でもエッジやベベルがシャープに保たれます。PNGは最初にトレースする必要があり、エッジが概算され、コントラストに依存します。ベクターファイルがない場合にのみPNGを使用してください。
料金はかかりますか？
いいえ。エディター、すべてのマテリアルプリセット、およびPNG、GLB、OBJ、STL、USDZ、MP4での480pへのエクスポートは無料で、アカウント不要です。無料エクスポートには小さな3dlogo.ioのウォーターマークが付きます。Proはウォーターマークを削除し、2Kおよび4Kの画像と720pまたは1080pのビデオを追加します。

関連