最終更新日
記事公開日

SVGの周りに余白ができてしまうときの対処法

お客さん

SVGの周りになぜか余白ができてしまうの。

この変なスペースのせいでぴったり配置できない。

どうしたらいい?

隊員1号

解決方法は2つあります。

1つ目は、パスをアウトラン化する方法。

2つ目は、SVGのデータを直接いじって、表示領域を狭める方法です。

①パスのアウトライン化

SVGファイルの周りに大きな余白が出来てしまう原因として、パス化を行わず保存された可能性があります。

Adobe XDからアウトライン化を行わず、そのままSVGとして書き出していませんか?

一度、フォントのアウトライン化を行い、パスデータにしてから保存してみてください。

②SVGデータの改変

svgファイルを右クリックして、メモ帳で開いてみて下さい。

viewBoxの値を変更することで、強制的にサイズ・配置を変えることができます。

試しに、x座標の値を増やしてみてください。

viewbox = [x座標] [y座標] [幅] [高さ]

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 737.21 86.59"><g id="レイヤー_2" data-name="レイヤー 2"><g id="レイヤー_1-2" data-name="レイヤー 1"><path d="M35.8,84.74C11,84.74,0,66.07,0,45.56,0,25.76,10.15,4.94,36.82,4.94,58.16,4.94,67.39,19.1,68.62,31H54C51.08,17.15,39.18,17.15,37.13,17.15c-11.69,0-22.46,9.43-22.46,28.2,0,17.54,9.43,27.29,20.92,27.29A19.49,19.49,0,0,0,49.23,67.1c3.39-3.28,4.11-5.85,4.72-10H68.62C67.29,69.56,57.75,84.74,35.8,84.74Z"/><path d="M108.83,84.74c-12.82,0-31.08-3.49-32.21-24.92H90.47c.62,12,11.59,13.33,17.13,13.33,3.49,0,18.36-.41,18.36-11,0-5.44-3.28-7.49-10-9l-18.06-4C88.21,47,77.75,41.56,77.75,27.3c0-16.1,15.49-22.36,30.16-22.36,6.25,0,15.69,1.13,22.56,7.39,4.31,3.9,5.95,7.48,7.39,16.2H124c-.51-11.28-12.51-11.89-16.31-11.89-2.46,0-16.41.2-16.41,9.94,0,4.31,2.56,7.7,10.56,9.44l19.49,4.31c5.75,1.23,18.77,5.64,18.77,20.31C140.11,74.38,128.63,84.74,108.83,84.74Z"/><path d="M179.09,84.74c-12.82,0-31.07-3.49-32.2-24.92h13.84c.62,12,11.6,13.33,17.13,13.33,3.49,0,18.36-.41,18.36-11,0-5.44-3.28-7.49-10.05-9l-18-4C158.48,47,148,41.56,148,27.3c0-16.1,15.48-22.36,30.15-22.36,6.26,0,15.69,1.13,22.57,7.39,4.3,3.9,5.95,7.48,7.38,16.2H194.27c-.51-11.28-12.51-11.89-16.3-11.89-2.47,0-16.41.2-16.41,9.94,0,4.31,2.56,7.7,10.56,9.44l19.49,4.31c5.74,1.23,18.77,5.64,18.77,20.31C210.38,74.38,198.89,84.74,179.09,84.74Z"/><path d="M270.39,80.74l-7-7.08V5.87L275.62,7.4c.72.11,2.77.41,2.77,1.44,0,.41-.1.62-1,1.44-1.54,1.23-1.64,1.33-1.64,1.74V63.51c4.1-1,12.41-3.08,25.23-11.59a141.43,141.43,0,0,0,24.52-21.13l6.25,11.28C316.24,59.3,292,73.77,270.39,80.74Z"/><path d="M423.12,79.72c-9.33-11.49-16.62-18.88-25-25.65C389.89,63.2,382.3,71,363,80.43l-9-9.33c6.67-2.87,19.69-8.31,32.72-22.16a81.9,81.9,0,0,0,17.44-28H365.07V9h44.2c2,0,3.49-1,5.34-2.25l7.89,8.72A14.18,14.18,0,0,0,417,21.66c-3.49,8.21-5.44,12.92-11.9,23C415,52.12,423.84,60.84,432.25,70Z"/><path d="M504.67,52.33l5.64,31.9-11.9,2.36-5.54-32.72-33.33,4.31L458,47l32.93-4.31-2.26-13.23-24.82,3.28-1.44-10.67L486.93,19,483.75.63,494.52,0c2.25-.1,3.07.2,3.07,1,0,.42-1.74,2.26-1.64,2.77l2.46,13.54,22.36-2.87,1.54,10.67-22,2.87,2.36,13.13,29.85-3.9,1.43,11.28Z"/><path d="M564.68,77.36V68.23h37.54L607,38.38H577.81V28.94H619l-6.36,39.29h19.49v9.13Z"/><path d="M664.28,49.77v-13h72.93v13Z"/></g></g></svg>
この記事のURLをコピー

メールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

関連情報

運営者プロフィール
運営者のプロフィール画像
隊員1号

IT系フリーランスとして10年の経験を持つレスキュー隊。HTML・CSS・JS・PHPなど幅広いスキルを持つ。

詳しいプロフィール