はじめに
Xcode 12 から SVG が使えるようになりましたね
今やってる案件も Android とリソースが共有できるということで SVG を使おう！という話になったのですがなぜか下記のように iOS 側だけ画像が切れてしまうということがありました。
| iOS | Android |
|---|---|
 |
 |
Android ではちゃんと表示されているので Xcode の設定の問題では？と思いわりとハマってしまいました
原因
原因は SVG のこれでした transform="translate(.5 1)"。おそらく translate で右に 5 下に 1 よってしまっている！
SVG はこんな感じ。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28" viewBox="0 0 28 28">
<g fill="none" fill-rule="evenodd" transform="translate(.5 1)">
<path d="M14,7 L28,14.5 14,22 14,7" fill="#34C759"/>
</g>
</svg>
SVGの導入
Xcode
Xcode で SVG を使う場合は下記のようにします。
- xcassets に Image 追加
- Resizing の Preserve Vector Data にチェック
- Scales を Single Scale に設定
Android Studio
Android Studio で SVG を使う場合は drawable に Vector Asset を追加するだけです。
このとき生成される XML は下記です。
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="28dp"
android:height="28dp"
android:viewportWidth="28"
android:viewportHeight="28">
<path
android:pathData="M14.5,8L28.5,15.5 14.5,23 14.5,8"
android:fillColor="#34C759"
android:fillType="evenOdd"/>
</vector>
Android で切れずに表示されるのは transform 属性が削ぎ落とされているためだと思います
おわりに
はじめての SVG 導入ということもありわりとハマってしまいました
そもそも SVG がなんなのかよくわかっておらず何をみればいいのかもわかりませんでした。。。
Xcode 側の設定でどうにかなるよなどあれば教えていただけると幸いです