> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Cytoscape.jsのSVGノード画像：サイズ調整と余白の直し方 > 動く例でCytoscape.jsのノードに独自のSVGを収めます。元画像の余白、containとcoverを比較し、読み込みとラベルの配置を確認します。 Source: https://perfectvector.com/ja/blog/cytoscape-svg-node-artwork Language: ja Author: Irene Kim Published: 2026-10-02T08:00:00+09:00 Updated: 2026-10-02T08:00:00+09:00 ノードの`background-image`スタイルにSVG画像のURLを指定し、見せたいアートワークに合うフィット方法を選びます。エンブレムが読み込まれても小さく見える場合は、グラフのノードを大きくする前に、SVGのビューポート内の余白を調べてください。両端が消える場合は、画像とノードの縦横比を比較し、クリッピングを確認します。 Cytoscape.jsは、`contain`、`cover`、`none`のフィット方法を含む[SVGのノード背景](https://js.cytoscape.org/#style/background-image)を文書化しています。このガイドでは、一つのパスで自作したエンブレムを使い、元画像の範囲とグラフのスタイルを切り分けます。編集可能なアートワークのマスターを、グラフ設定と一緒に保管してください。 ## 元画像とグラフのノードを分ける 確認する四角い範囲は、アートワークの描画範囲、SVG画像のビューポート、ノード本体の三つです。[SVGの`viewBox`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/viewBox)は、ビューポートに対応付ける元の座標領域を定義します。見える図形よりはるかに広い領域を含んでいる場合があります。 余白を抑えた元画像は120 × 60で、コーラル色のエンブレムはx=6からx=114、y=6からy=54までです。中央の開口部も同じパスの一部です。 ```svg ``` 余白付きの版では、外側のSVG寸法と`viewBox`だけを変えます。 ```svg ``` ヘッダー、パス、閉じタグは同じものを使ってください。両ファイルが描くパスの座標は同一です。二つ目はその周囲により多くの余白を持ちます。その余白は画像とともに拡大縮小されるため、背景のフィット方法を変えるだけでは、適切な元画像の範囲を選ぶ代わりにはなりません。ファイルのビューポートと見えるアートワークが合わない場合は、[SVGのバウンディングボックスガイド](https://perfectvector.com/ja/blog/svg-bounding-box)が役立ちます。 ## 四つのケースを持つ例を動かす Cytoscape.js [3.34.3](https://github.com/cytoscape/cytoscape.js/releases/tag/v3.34.3)を、ローカルで配信したバージョン固定の公式ブラウザーバンドルでテストしました。[そのリリースタグのバンドル](https://raw.githubusercontent.com/cytoscape/cytoscape.js/v3.34.3/dist/cytoscape.min.js)を`cytoscape-3.34.3.min.js`として、以下の`example.html`と同じ場所に保存します。たとえば`python3 -m http.server 8000`でフォルダーをローカルHTTP配信し、`http://localhost:8000/example.html`を開きます。 この例は元のSVGをデータURIにエンコードします。[`encodeURIComponent()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent)は、塗りの色に含まれる`#`など、URIの文字をエスケープします。ライブラリーのSVGの案内では、Base64ではなくこのエンコードを使うことと、ここに示すXMLヘッダーを推奨しています。これは外部フォントや画像を使わない、自己完結した一つのエンブレムです。 ```html SVG node fit comparison 
Loading images
``` ステータス欄は、グラフの初期化前に先読みした画像の寸法を報告します。[MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalWidth)の説明のとおり、`naturalWidth`は画像本来の密度補正済みの幅をCSSピクセルで取得します。このテストファイルでは、余白を抑えた画像は120 × 60、余白付き画像は200 × 140と報告されました。これは画像の寸法であり、コーラル色のパスの計測値ではありません。 ## ノードのサイズを固定して違いを比較する モデル上の四つのノードはすべて120 × 80で、ノードのパディングはゼロです。元のテストファイルをChromeで、グラフのズーム1と1.5で確認しました。ノードのスタイルは120 × 80のままで、報告された描画寸法は1.5で180 × 120になりました。これはそのブラウザー内での静的な比較であり、互換性やズーム性能のベンチマークではありません。 | 元画像とフィット | このテストファイルで観察した見た目 | | -------------- | ------------------------------------- | | 余白を抑える、contain | エンブレム全体が見え、尖った両端も見える | | 余白を抑える、cover | エンブレムが大きくなり、左右の先端がノードで切れる | | 余白付き、contain | 小さなエンブレムの周囲に多くの余白がある | | 余白付き、cover | 余白付きcontainより少し大きいが、余白を抑えたケースよりかなり小さい | 余白を抑えた元画像の比率は2:1で、ノードは1.5:1です。120 × 60の画像全体を120 × 80の内側に収めると、縦方向に余白が残ります。そのノードを覆う場合は、クリッピング前に画像を160 × 80に拡大するため、横の両端が本体からはみ出します。 余白付きの元画像では、画像領域に四辺それぞれ40単位の余白が追加されています。containでは、拡大縮小率は120/200ではなく80/140で制限されます。そのため、変わらない幅108単位のエンブレムは、モデル単位で約62を占めます。この数値は宣言した寸法からの計算であり、スクリーンショットのピクセル計測ではありません。 **元画像の範囲とフィット** ![元画像に大きな余白がある小さなエンブレム、ノード枠内に全体が収まる大きなエンブレム、狭い枠で先端が切れたエンブレムのイラスト。](https://perfectvector.com/blog/cytoscape-svg-node-artwork/source-bounds-fit.webp) *模式図：元画像の余白とフィット方法は、それぞれ独立して見えるアートワークを変えます。この概念図はCytoscapeのスクリーンショットや変換結果ではありません。* ## アートワークの範囲を確認してからフィット方法を選ぶ エンブレム全体が重要な場合は、余白を抑えた元画像とcontainから始めます。見せる必要があるストロークや効果のための余白は残してください。ビューポートを詰めすぎると、必要なアートワークまで切れる場合があります。すべての余白を取り除く指示ではありません。 デザイン上、端の切り抜きが許容される場合にcoverを使います。この例では尖った先端を隠してしまうため、その先端がエンブレムの特徴なら不向きです。ノードを横に広げると、フィットの比率が変わって先端が見えるようになる場合がありますが、グラフのレイアウトも変わります。縦横を比例して大きくしても、切り抜き方は変わりません。どの制約を変えるか決めてください。 この比較では、`background-width`と`background-height`を`auto`のままにします。明示的な値は、フィットに使う画像寸法を上書きすることがあります。ノードの`padding`も別の入力です。背景のサイズ計算に含めるか、内側の本体を使うかは、ライブラリーに説明があります。これらの設定を加える前に、[background-imageリファレンス](https://js.cytoscape.org/#style/background-image)を確認してください。パディングなしのこのテストでは、まず元画像の余白だけを切り分けています。 SVG自体のmeet、slice、配置の判断については、[preserveAspectRatioガイド](https://perfectvector.com/ja/blog/svg-preserveaspectratio)に進んでください。SVG内部のフィット方法を変える操作と、Cytoscapeの背景のフィット方法を変える操作は別です。 ## クリッピングより先に読み込みを診断する ステータスに読み込み失敗が表示される場合、次にすることはcontainからcoverへの変更ではありません。画像リソースだけを開き、URLと宣言した寸法を確認してから、上記の自己完結したパスだけのエンブレムまで単純化します。データURIでは、生のマークアップや、エスケープしていない色値を連結せず、SVG文字列全体をエンコードしてください。 画像として使うSVGには、ドキュメントとして開くSVGとは異なる制約があります。[MDNの画像としてのSVGガイド](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image)は、画像のコンテキストでのスクリプトや外部リソースの制約を説明しています。外部スタイルシートやフォントに依存するアートワークファイルには、別の納品テストが必要です。この例はそうした依存を避け、グラフのラベルをSVGの外に置いています。 画像が読み込まれる場合は、明らかに横長の図形でフィットとノードのクリッピングを確認します。その後、アプリケーションが対応するノードサイズとブラウザー環境で、実際のアートワークをテストしてください。Cytoscapeの文書にはブラウザー固有のSVGの注意点があります。このChromeでの観察で、Firefoxやほかのすべてのエンジンの問題まで解決できるわけではありません。 ## ラベルと編集可能なアートワークを分ける この例はグラフのラベルに`label: 'data(label)'`を使い、SVGのテキストは含みません。エンブレムを作り直さずに文言を変えられます。SVGパスは元のマスターに残り、グラフがノードの識別、配置、関係を管理します。 確認したテストファイルはCanvasの描画面に描いていました。そこでSVGの背景が見えても、内部のパスが個別に編集可能なグラフ要素になるわけではありません。開口部、シルエット、色を変える必要がある場合は、マスターを残してください。グラフの書き出しは別の手順で、書き出しツールの選択と納品テストが必要です。このガイドは、書き出したグラフが編集可能なエンブレムのパスを保持すると約束するものではありません。[Graphvizのアートワークガイド](https://perfectvector.com/ja/blog/graphviz-svg-node-images)では、別の図描画ツールでの画像参照の受け渡しを扱っています。 独自のエンブレムがPNGやJPGでしか存在しない場合は、[その元画像をベクターアートワークに変換](https://perfectvector.com/ja/image-to-vector)し、シルエット、開口部、細部を確認してから、SVGの範囲を設定してください。PerfectVectorは編集可能な元の形状を復元する手助けができます。背景のスタイル、ノードのラベル、グラフの書き出しは引き続き別の段階です。すでに適したSVGがある場合は、そのままフィットの確認に進めます。 ## よくある質問 **coverにしてもSVGのノード画像が小さいのはなぜですか？** 元画像のビューポートに、パスの周囲の大きな余白が含まれている場合があります。グラフのレイアウトを変える前に、同じノード寸法で、範囲を詰めたコピーと比較してください。 **独自のエンブレムにはcontainとcoverのどちらを使うべきですか？** エンブレム全体が重要ならcontainを選びます。観察した端の切り抜きがデザイン上許容される場合だけcoverを選び、自分の元画像とノード形状で検証してください。 **SVGのノード背景は編集可能なグラフのパスを作りますか？** テストしたCanvasの例は、SVGを画像として描画します。パスを編集するためにアートワークのマスターを保管してください。この例では内部の輪郭は、グラフの別のノードやエッジにはなりません。 **ラベルをSVG内に入れられますか？** この例はラベルをグラフデータに保持し、アートワークにはパスだけを使います。SVGのテキスト、フォント、画像コンテキストの依存関係には、それぞれブラウザーと納品先での確認が必要です。 ## 出典 1. [Cytoscape.js — 背景画像](https://js.cytoscape.org/#style/background-image) — 画像URLのスタイル指定、フィット、サイズの上書き、パディングの参照、SVGの注意点。 2. [Cytoscape.js — リリースv3.34.3](https://github.com/cytoscape/cytoscape.js/releases/tag/v3.34.3) — 元のテストファイルで使った固定バージョン。 3. [Cytoscape.js — v3.34.3ブラウザーバンドル](https://raw.githubusercontent.com/cytoscape/cytoscape.js/v3.34.3/dist/cytoscape.min.js) — ブラウザーテスト用にローカル配信した、公式のタグ付き実装。 4. [MDN — viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/viewBox) — 元の座標領域とビューポートへのマッピング。 5. [MDN — encodeURIComponent](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) — SVGのデータURI部分のエスケープ。 6. [MDN — naturalWidth](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalWidth) — パスの範囲とは異なる、読み込んだ画像の寸法。 7. [MDN — 画像としてのSVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image) — 画像コンテキストの制約と依存関係の確認。 エンブレムの元がラスター画像なら、[編集可能なSVGマスターを作り](https://perfectvector.com/ja/image-to-vector)、輪郭と元画像の範囲を確認してから、自分のノードレイアウトでcontainとcoverを比較してください。 ## Explore - [Read the HTML article](https://perfectvector.com/ja/blog/cytoscape-svg-node-artwork) - [LeafletのSVGマーカー：iconAnchorで先端を合わせる](https://perfectvector.com/ja/blog/leaflet-svg-marker-anchor.md) - [縮尺を混同せずにSVGパスの長さを測る](https://perfectvector.com/ja/blog/measure-svg-path-length.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)