SVGのトリミングをしたいけどグラフィックソフトが手元にないときに見る記事

## この記事の概要

:::note warn
真面目な語り口ですが、ネタです。
この方法を試してうっかりデータを破損しても責任はとれません :bow:
:::

支給されたsvgデータをトリミングしたくなることはありませんか？
私は、図形が小数点ありの座標に配置されているときなど、ごくたまに整えたくなります。

そんなとき、ベクターグラフィックソフトを持っていなくてもコードを直接いじれば編集が可能です。
やり方を記事にしました。

## 設定

- 以下の画像をsvgで支給された（Qiitaではsvgを直接添付できないので、pngに変換している）
- 周りの余白をなくして、グレーの四角のサイズ=svgのサイズにしたい

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/4c9b9d09-7dd5-fc2c-2aed-d79f756e3be5.png)

## やり方

### 1.svgをエディタで開いて、確認

まずは全体を確認します。

```xml
<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="100" height="100" rx="10" fill="#EEEEEE"/>
  <circle cx="35" cy="35" r="15" fill="#FF0000"/>
  <path d="M35 85C60 85 60 35 85 35" stroke="#00FF00" stroke-width="10"/>
  <path d="M85 70L100 96H70L85 70Z" fill="#0000FF"/>
</svg>
```

- 一番外側の`svg`の`width`と`height`が`120`で、`rect`の`width`と`height`が`100`
    - 上記の2点より、トリミングすべきは上下左右10pxずつと分かる
- `path`が絶対位置指定（MやCが大文字）
    - 相対位置指定に直した方が楽そうと分かる

もし、はじめから`path`が相対位置指定だったら「3.座標を変更する」に進んでください。

### 2.パスを相対位置指定に変換する

特に難しいこともないと思うので、無心で変換します。

```diff_xml
  <svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="10" width="100" height="100" rx="10" fill="#EEEEEE"/>
    <circle cx="35" cy="35" r="15" fill="#FF0000"/>
-   <path d="M35 85C60 85 60 35 85 35" stroke="#00FF00" stroke-width="10"/>
+   <path d="m35 85c25 0 25 -50 50 -50" stroke="#00FF00" stroke-width="10"/>
-   <path d="M85 70L100 96H70L85 70Z" fill="#0000FF"/>
+   <path d="m85 70l15 26h-30l15 -26z" fill="#0000FF"/>
  </svg>
```

絶対と相対って何？という人は次のMDN Docsを読むと分かりやすいと思います。

https://developer.mozilla.org/ja/docs/Web/SVG/Attribute/d

### 3.座標を変更する

あとは、すべての要素の座標を左上に10pxずつずらし、`viewBox`を20小さくすれば完了です。

```diff_xml
- <svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
-   <rect x="10" y="10" width="100" height="100" rx="10" fill="#EEEEEE"/>
+   <rect x="0" y="0" width="100" height="100" rx="10" fill="#EEEEEE"/>
-   <circle cx="35" cy="35" r="15" fill="#FF0000"/>
+   <circle cx="25" cy="25" r="15" fill="#FF0000"/>
-   <path d="m35 85c25 0 25 -50 50 -50" stroke="#00FF00" stroke-width="10"/>
+   <path d="m25 75c25 0 25 -50 50 -50" stroke="#00FF00" stroke-width="10"/>
-   <path d="m85 70l15 26h-30l15 -26z" fill="#0000FF"/>
+   <path d="m75 60l15 26h-30l15 -26z" fill="#0000FF"/>
  </svg>
```

変更箇所が多く見えますが、実態は以下だけです。

- `svg`の`width`と`height`を`120`から`100`に変更
- `svg`の`viewBox`を`0 0 120 120`から`0 0 100 100`に変更
- `rect`の`x`と`y`を`10`から`0`に変更
- `circle`の`cx`と`cy`を`35`から`25`に変更
- 1つ目の`path`の`m35 85`を`m25 75`に変更
- 2つ目の`path`の`m85 70`を`m75 60`に変更

diff表示のない、完成系のコードはこちらです。

```xml
<svg width="100" height="100" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100" height="100" rx="10" fill="#EEEEEE"/>
  <circle cx="25" cy="25" r="15" fill="#FF0000"/>
  <path d="m25 75c25 0 25 -50 50 -50" stroke="#00FF00" stroke-width="10"/>
  <path d="m75 60l15 26h-30l15 -26z" fill="#0000FF"/>
</svg>
```

## 最後に

ベクターグラフィックソフトを持っている人に頼んで修正をする方が、速いし間違いも起きないと思います。
このテクニックを使う日は来るのでしょうか？

---

最後まで読んでくださってありがとうございます！
Twitterでも情報を発信しているので、良かったらフォローお願いします！

https://twitter.com/xrxoxcxox

Devトークでのお話してくださる方も募集中です！

https://jobs.qiita.com/employers/qiita-inc/dev_talks/489