アプリの再設計を行っている最中で、一部のアイコンを Android Studio で正しく描画するのに問題があります。私はすべてのデザイン作業に Sketch を使用しています。
私は解決策を見つけようとオンラインでかなり調べましたが、検索用語で問題を説明するのが非常に難しいので、スクリーンショットを投稿し、Sketch ファイルを提供して、StackOverflow コミュニティが役立つかどうかを確認してみようと思いました.
問題は、Sketch でのベクター パスの構築、特にそれらが互いに重なり合う方法に関係していると思います。私が取り組んでいるアイコンの例を次に示します。
ご覧のとおり、Sketch でアイコンを作成するのに問題はありません。ただし、アイコンを SVG ファイルにエクスポートして Android Studio にインポートすると、次のように描画されます。
形状がより複雑になり、互いに重なり始めたときにのみ、この問題に遭遇します。これまで、ほとんどのアイコンをシンプルに保つことができましたが、解決策を見つける必要があるところまで来ています。
Sketch ファイルへのリンクを Dropbox に投稿するつもりでしたが、そのためにはさらに評判ポイントが必要です。必要に応じて、返信でそのリンクを誰かに提供できることを願っています。
どんな助けでも大歓迎です。これが重複した質問である場合は、お詫び申し上げます。私の検索のすべてにおいて、私は良い結果を得るためにそのような方法で問題を表現していなかったかもしれません.
@Paul LeBeau、返信ありがとうございます。以下は、Sketch からエクスポートされた SVG コードです。
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
<title>globe</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="globe" fill="#368EFA">
<g id="test" transform="translate(2.000000, 2.000000)">
<path d="M1.76297407,13 L5.00480805,13 C4.73881764,12.1144772 4.55303608,11.1138143 4.50968627,10 L1.02773406,10 C1.01839018,9.83680058 1.01365419,9.67236691 1.01365419,9.5068271 C1.01365419,9.33666963 1.01865808,9.16768089 1.02852674,9 L4.50968627,9 C4.55303608,7.88618573 4.73881764,6.8855228 5.00480805,6 L1.76915759,6 C1.92639337,5.65361668 2.10620446,5.31965722 2.30671248,5 L5.35559719,5 C6.20744032,2.88601313 7.45296691,1.59423095 7.91693127,1.16221702 C8.43195688,1.06468547 8.96343249,1.01365419 9.5068271,1.01365419 C10.0442032,1.01365419 10.569923,1.06356132 11.0796041,1.15899346 C11.5408038,1.58777803 12.7904304,2.88072886 13.6444028,5 L16.7069417,5 C16.9074497,5.31965722 17.0872608,5.65361668 17.2444966,6 L13.9951919,6 C14.2611824,6.8855228 14.4469639,7.88618573 14.4903137,9 L17.9851275,9 C17.9949961,9.16768089 18,9.33666963 18,9.5068271 C18,9.67236691 17.995264,9.83680058 17.9859201,10 L14.4903137,10 C14.4469639,11.1138143 14.2611824,12.1144772 13.9951919,13 L17.2506801,13 C17.0942093,13.3463294 16.915188,13.6802868 16.7154884,14 L13.6444028,14 C12.7787643,16.1482222 11.506588,17.4473934 11.0611474,17.8580954 C10.5572344,17.95129 10.0377192,18 9.5068271,18 C8.96992723,18 8.44466314,17.9501813 7.93540532,17.8549144 C7.4868821,17.4407166 6.21901315,16.1427067 5.35559719,14 L2.29816579,14 C2.09846621,13.6802868 1.9194449,13.3463294 1.76297407,13 Z M6.02760136,13 L9,13 L9,10 L5.51031179,10 C5.55606369,11.1058076 5.7507371,12.108186 6.02760136,13 Z M6.38814497,14 L9,14 L9,17.9088258 C8.62776002,17.558389 7.2971495,16.2062617 6.38814497,14 Z M9,1.09117415 L9,5 L6.38814497,5 C7.2971495,2.79373835 8.62776002,1.44161098 9,1.09117415 Z M6.02760136,6 L9,6 L9,9 L5.51031179,9 C5.55606369,7.8941924 5.7507371,6.89181397 6.02760136,6 Z M10,13 L12.9723986,13 C13.2492629,12.108186 13.4439363,11.1058076 13.4896882,10 L10,10 L10,13 Z M10,14 L12.611855,14 C11.7028505,16.2062617 10.37224,17.558389 10,17.9088258 L10,14 Z M10,1.09117415 C10.37224,1.44161098 11.7028505,2.79373835 12.611855,5 L10,5 L10,1.09117415 Z M10,6 L12.9723986,6 C13.2492629,6.89181397 13.4439363,7.8941924 13.4896882,9 L10,9 L10,6 Z" id="earth"></path>
<path d="M9.5,18 L9.5,18 C14.1944204,18 18,14.1944204 18,9.5 C18,4.80557963 14.1944204,1 9.5,1 C4.80557963,1 1,4.80557963 1,9.5 C1,14.1944204 4.80557963,18 9.5,18 L9.5,18 Z M9.5,19 L9.5,19 C4.25329488,19 0,14.7467051 0,9.5 C0,4.25329488 4.25329488,0 9.5,0 C14.7467051,0 19,4.25329488 19,9.5 C19,14.7467051 14.7467051,19 9.5,19 L9.5,19 Z" id="border"></path>
</g>
</g>
</g>
</svg>
SVG ファイルを Android Studio に直接インポートした後のコードを次に示します。
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:pathData="M3.763,15L7.005,15C6.739,14.114 6.553,13.114 6.51,12L3.028,12C3.018,11.837 3.014,11.672 3.014,11.507C3.014,11.337 3.019,11.168 3.029,11L6.51,11C6.553,9.886 6.739,8.886 7.005,8L3.769,8C3.926,7.654 4.106,7.32 4.307,7L7.356,7C8.207,4.886 9.453,3.594 9.917,3.162C10.432,3.065 10.963,3.014 11.507,3.014C12.044,3.014 12.57,3.064 13.08,3.159C13.541,3.588 14.79,4.881 15.644,7L18.707,7C18.907,7.32 19.087,7.654 19.244,8L15.995,8C16.261,8.886 16.447,9.886 16.49,11L19.985,11C19.995,11.168 20,11.337 20,11.507C20,11.672 19.995,11.837 19.986,12L16.49,12C16.447,13.114 16.261,14.114 15.995,15L19.251,15C19.094,15.346 18.915,15.68 18.715,16L15.644,16C14.779,18.148 13.507,19.447 13.061,19.858C12.557,19.951 12.038,20 11.507,20C10.97,20 10.445,19.95 9.935,19.855C9.487,19.441 8.219,18.143 7.356,16L4.298,16C4.098,15.68 3.919,15.346 3.763,15ZM8.028,15L11,15L11,12L7.51,12C7.556,13.106 7.751,14.108 8.028,15ZM8.388,16L11,16L11,19.909C10.628,19.558 9.297,18.206 8.388,16ZM11,3.091L11,7L8.388,7C9.297,4.794 10.628,3.442 11,3.091ZM8.028,8L11,8L11,11L7.51,11C7.556,9.894 7.751,8.892 8.028,8ZM12,15L14.972,15C15.249,14.108 15.444,13.106 15.49,12L12,12L12,15ZM12,16L14.612,16C13.703,18.206 12.372,19.558 12,19.909L12,16ZM12,3.091C12.372,3.442 13.703,4.794 14.612,7L12,7L12,3.091ZM12,8L14.972,8C15.249,8.892 15.444,9.894 15.49,11L12,11L12,8Z"
android:strokeWidth="1"
android:fillColor="#368EFA"
android:strokeColor="#00000000"/>
<path
android:pathData="M11.5,20L11.5,20C16.194,20 20,16.194 20,11.5C20,6.806 16.194,3 11.5,3C6.806,3 3,6.806 3,11.5C3,16.194 6.806,20 11.5,20L11.5,20ZM11.5,21L11.5,21C6.253,21 2,16.747 2,11.5C2,6.253 6.253,2 11.5,2C16.747,2 21,6.253 21,11.5C21,16.747 16.747,21 11.5,21L11.5,21Z"
android:strokeWidth="1"
android:fillColor="#368EFA"
android:strokeColor="#00000000"/>