LoginSignup
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@yu_ku(Yu Ku)in株式会社ジョイワークス

SVGの不要な空白をトリミングしたい

Last updated at Posted at 2021-11-11

はじめに

今回は下記のようなロゴの周りに空白が残っているSVGファイルをトリミングしていきます。
ツールはFigmaを使用します。https://www.figma.com
スクリーンショット 2021-11-11 10.17.54.png

さっそくトリミングする

①使用したいロゴの部分だけ範囲選択する
②右クリックから「Frame selection」を押下する
これでトリミングは終わりです。
スクリーンショット 2021-11-11 10.18.25.png

トリミングした画像をSVGで出力する

①対象の画像(ロゴの部分)を選択して右メニューのExportでSVGを選択する
②「Export Frame名」ボタンを押下する
これでSVGファイルがダウンロードされます。
スクリーンショット 2021-11-11 10.19.16.png

確認すると...

ダウンロードしたファイルを確認すると、画像のように不要な空白がなくなっていることがわかります。
スクリーンショット 2021-11-11 10.30.54.png

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?