HTML / CSS内でSVGファイルをトリミングする方法
次のHTMLファイル（mypage.html）。 SVGfileが画像として添付されます。
<!doctype html>
<html>
<body>
<!-- Display legend -->
<div>
<center> <img src="circos-table-image-medium.svg" height=3500; width=3500; /> </center>
</div>
</body>
</html>
生成されるページは次のようになります。
円の周りに大きな空白があることに注意してください。 htmlまたはCSS内でそれをトリミングするにはどうすればよいですか？
切り抜き
負のマージンを使用して親要素のサイズを固定することにより、画像をトリミングできます。
しかし、これはIS AN SVG！
Htmlで直接svgを表示できるだけでなく：
<svg viewBox="0 0 100 100" height="150px" width="150px">
<rect x="10" y="10" rx="5" width="80" height="80" fill="pink" stroke="green" stroke-width="5"/>
</svg>ただし、トリミング/サイズ変更とsvgを行うには、svgのviewBox属性を変更するだけです。
viewBox="0 0 100 100"
xおよびyの0および100単位内のすべてを表示します
viewBox="-100 -100 100 100"
-100から100単位のxおよびyを表示します
viewBox="50 50 500 500"
50から500単位のxおよびyを表示します
これらの答え（および複数の類似/重複）のいずれも、これに完全に答えているとは思えず、例を示しています。
ステップバイステップ：SVGコード内で直接「パディング」（空白を囲む）を削除します
パディングなしでsvgの「実際の」サイズを決定します。私にとって、これは（Chrome）インスペクターを使用して、インスペクター内のpath要素にカーソルを合わせると最も簡単でした。ブラウザの実際のsvgの横に幅と高さが表示されます。
- 複数のパス要素がある場合、最後の要素が多くの場合「包含」要素であることがわかりました。
選択したテキスト/コードエディターでsvgコードを直接編集します。 svg要素タグ内のコードのみを変更します。
- 幅と高さの属性を、手順1で決定した「実際の」寸法に変更します。
- ViewBox属性の4次元を変更します。ただし、単位はありません。数字のみです（つまり、10pxではなく10）。
- 3番目と4番目の数値から始めます。これもまた、「実際の」幅と高さです。
- 1番目と2番目の次元は、viewBox内にあるsvgの部分の「原点」のxおよびy座標です。これらはそれぞれ（おそらく0 0であった）から次のように変更されます。half初期幅と高さと実際の幅と高さの差。より単純な（CSS）用語では、左マージンと上マージン。
混乱した？簡単なステップバイステップの例
この例では、非常に簡単になり、すぐ下のsvgを参照として使用します。この正確な例を見てみたい場合は、以下のすべてのコードをHTMLタグでラップしてください<html> svg code </html>そしてブラウザで開きます。
<svg xmlns="http://www.w3.org/2000/svg" width="48"
height="48" viewBox="0 0 48 48">
<path d="M40 4H8C5.79 4 4.02 5.79 4.02 8L4 44l8-8h28c2.21
0 4-1.79 4-4V8c0-2.21-1.79-4-4-4zM12
18h24v4H12v-4zm16 10H12v-4h16v4zm8-12H12v-4h24v4z"/></svg>
+手順1を完了し、パディングなしでsvgの「実際の」寸法を決定できたと仮定します。この例では、実際の寸法は40 x 40です。これを反映するようにsvg属性を変更します。
width="40" height="40"
+初期サイズは48 x 48で、実際のサイズ（パディングなし）は40 x 40です。この差の半分は4 x 4です。それに応じてviewBox属性を変更し、実際の幅と高さを追加します。
viewBox="4 4 40 40"
+開始svgタグはこれらの変更を反映するはずです。
<svg xmlns="http://www.w3.org/2000/svg" width="40"
height="40" viewBox="4 4 40 40">
+ svgの周りのパディングの上下の量が異なる場合、これは問題ではありません。上記の標準的な指示に従ってください。その後、viewBoxプロパティの最初の2つの値をいじって、これらの値がx軸とy軸に沿って画像をシフトする方法を理解してください。
私は今夜、同じ問題に対処しながらこのすべてを学びました。 Iよりもスケーラブルなベクターグラフィックスの操作に精通している人からの提案/編集に完全にオープン
fragment identifiers を使用すると、必要な処理を正確に実行できます。フラグメント識別子を使用すると、imgタグで表示するSVGのセグメントを定義できるだけでなく、画像変換とアスペクト比を制御できます。
#svgView(viewBox(0, 0, 32, 32))をsvg urlの最後に追加すると、表示するsvgの領域が定義されます。最初の2つのパラメーターはビューボックスの左上隅のxおよびy座標であり、2番目の2つのパラメーターはビューボックスの幅と高さです。
この手法を使用すると、imgタグは次のようになります。
<img src="circos-table-image-medium.svg#svgView(viewBox(0, 0, 32, 32))" height=3500; width=3500; />
ビューボックスのサイズが正しくない場合は、ビューボックスのアスペクト比がimgタグのアスペクト比と一致していることを確認することが重要です。アスペクト比をさらに制御する必要がある場合は、常に preserveAspectRatioSpec フラグメント識別子を使用できます。
画像全体のviewBoxを見つけるには、svg URLに直接アクセスし、ページ要素を調べて、最も外側のsvg要素で定義されたviewBoxを見つけます。
その情報を活用して、ビューボックスをニーズに合わせて調整できます。
Inkscape を使用するだけです。
まず、テキストエディター（Notepad ++など）を介したSVG画像の寸法の調整に関するDavid Rebdの投稿を読むことをお勧めします。
次に、Inkscapeでアイテムをクリックするだけで、正確なマウスドラッグを心配することなく、文字通り寸法を設定できます。
ツールバーが見つからない場合は、Viewメニューをクリックしてから、Show/HideおよびTools Control Barを有効にします。
コードで修正する前に、SVGレイアウトを最適化することをお勧めします。 Inspectorに表示される空白は、SVGがアートボードにきちんと設定されていないという事実を暗示しています。 Adobe Illustratorを使用できる場合は、その中でSVGを開きます。次のようなものが表示されるはずです。
白い領域はアートボードで、円はSVGです。やりたいことは、SVGがアートボードと同じサイズであることを確認することです。このボタンを使用すると、アートボードのサイズを変更できます。
それを選択し、白い四角を選択し、エッジを円に触れさせてSVGを保存します。
実際のSVGファイルに対する他の潜在的な修正は、SVGグラフィックのサイズを拡張するクリッピングマスクがあることです。その場合、可能であればこれらのマスクを削除する必要があります。 SVGに影響するクリッピングマスクがあるかどうかを確認するには、円をクリックします。選択したときに周囲のボックスが円の端に触れない場合、画像の境界を押し出しているクリッピングマスクがあります。
画像を見ると、これは非常に複雑になる可能性があり、ベクトル編集に慣れていない場合は、デザイナーに渡すのが速くて簡単かもしれません。
Inkscapeでトリミングするには、 https://designbundles.net/design-school/how-to-crop-an-image-in-inkscape# の手順4、11、および12に従います。
その後、メニューの「編集」で「選択に合わせてページのサイズを変更」を使用します