実践的な制作ワークフロー
パスを描き直さずに、SVG ロゴの見切れを直す
店のカップロゴから持ち手が消えても、元のファイルには曲線が残っているかもしれません。見切れた画像を再トレースすると、表示範囲の問題を別の絵に置き換えてしまいます。
架空の陶器店のマークを Ciyo で修正しました。見切れた SVG と修正版をダウンロードし、ソースと表示を比べてからサイトに使いましょう。
見切れたファイルと元データを残す
不完全な表示のスクリーンショットではなく、SVG のソースから始めます。作業用コピーを保存し、元のパスを残してください。例はチャコール色の複合パス一つで、持ち手の穴は透明です。
両方の出力領域は 800×500。意図的に誤った viewBox は 0 0 1024 1024 で、カップの多くが表示枠の外にあります。隣の完全なカップは修正結果で、新しく生成したロゴではありません。
枠を変える前に曲線の範囲を調べる
曲線の折り返し点も含めた実際の範囲を求めます。この例は x≈490.710–1620.830、y≈693.803–1363.685。パスのアンカーだけでは右端と下端を小さく見積もってしまいます。
MDN が説明する viewBox の値は最小 x、最小 y、幅、高さの四つです。古い枠と出力の縦横比は異なるため、数値だけで各辺の見切れを判断せず、実際の表示を確認します。
Ciyo に修正の範囲を明示する
SVG のテキストか、エージェントが読めるソースファイルを渡します。既存の形の報告、別ファイルへの修正、両方のレンダリングとキャンバスへの保存を依頼します。
次の依頼はこのサンプル用です。自分のロゴでは、余白を含む枠を計算してもらってください。この座標を別の形にコピーすると、別の見切れを起こすことがあります。
この SVG を描き直さずに調べ、曲線の実際の範囲を報告してください。このサンプルではすべての d、fill、fill-rule を保ち、width=800、height=500 のまま、viewBox="430 630 1260 790" の別ファイルを保存します。修正前後を透明な 800×500 PNG にしてキャンバスに保存し、カップ全体と持ち手の穴を確認してください。ソースの変更点と限界も説明してください。ソースで変更箇所を確認する
修正版の viewBox は 430 630 1260 790。ダウンロードできる二つの SVG は幅、高さ、d、fill、fill-rule が同一です。枠の変更は見た目の大きさと位置を変えますが、旧表示のピクセル位置までは保持しません。
承認前にファイルを比較します。新しいパス、背景の長方形、埋め込み画像の追加は、この修正の範囲外です。
| 項目 | 修正前 | 修正後 |
|---|---|---|
| 出力領域 | 800×500 | 800×500 |
| viewBox | 0 0 1024 1024 | 430 630 1260 790 |
| 形のデータ | 既存の複合パス一つ | d、fill、fill-rule は同一 |
| 表示結果 | 底と持ち手が見切れる | 全体と透明な穴が見える |
全体の形と透明な穴を確認する
実際の修正 PNG は 800×500。透明な余白は左約39px、右45px、上40px、下35pxです。底と持ち手が枠に収まり、穴も透明なままです。
使用予定の大きさで SVG をブラウザーに表示してください。キャンバス上は PNG のプレビューで、ダウンロードする SVG にパスが残っています。プレビューは確認用で、ベクターの原本ではありません。
形そのものがない場合は別の原因を調べる
この方法は曲線が元データに存在するから使えます。パスの欠落、マスク、クリッピングパス、CSS の overflow は別途調べます。保存されていない形は viewBox を広げても戻りません。
原本と修正版を一緒に保管してください。サンプルではブラウザーの表示枠を確認できますが、物理的なカットや別アプリへの読み込み結果は検証していません。
よくある質問
viewBox を広げれば欠落したパスも戻りますか？
表示できるのは存在する形だけです。パスがない場合はソースを調べてください。
カップを描き直しましたか？
いいえ。二つの SVG の d、fill、fill-rule は同一で、viewBox だけが異なります。
修正版が大きく見えるのはなぜですか？
同じ絵の別の領域を 800×500 の出力に割り当てるためです。形のデータと見た目の大きさは分けて確認します。
既存のロゴに適切な表示枠を
Ciyo で SVG を調べ、修正版をソースと比較してからサイトの画像を差し替えましょう。