この記事の概要
真面目な語り口ですが、ネタです。
この方法を試してうっかりデータを破損しても責任はとれません 
支給されたsvgデータをトリミングしたくなることはありませんか？
私は、図形が小数点ありの座標に配置されているときなど、ごくたまに整えたくなります。
そんなとき、ベクターグラフィックソフトを持っていなくてもコードを直接いじれば編集が可能です。
やり方を記事にしました。
設定
- 以下の画像をsvgで支給された（Qiitaではsvgを直接添付できないので、pngに変換している）
- 周りの余白をなくして、グレーの四角のサイズ=svgのサイズにしたい
やり方
1.svgをエディタで開いて、確認
まずは全体を確認します。
<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.パスを相対位置指定に変換する
特に難しいこともないと思うので、無心で変換します。
<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を読むと分かりやすいと思います。
3.座標を変更する
あとは、すべての要素の座標を左上に10pxずつずらし、viewBoxを20小さくすれば完了です。
- <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表示のない、完成系のコードはこちらです。
<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でも情報を発信しているので、良かったらフォローお願いします！
Devトークでのお話してくださる方も募集中です！