VectorDrawable rendering issue

Question

Sto riscontrando problemi con VectorDrawables introdotto dalla libreria di supporto.

Guardandomi intorno, ho letto di problemi simili relativi a ridimensionamento errato o anteprima errata in Android Studio. Bene, il mio problema è sfortunatamente diverso.

PROBLEMA:

Infatti, la mia VectorDrawable rende perfettamente nell'anteprima di Studio Android, ma ottiene incasinato in fase di esecuzione sul dispositivo (v Android 5.1.1 e 6.0.).

ESPORTAZIONE:

A partire da un file in formato SVG (con un solo percorso aggravata), ho importato con lo strumento Studio Android (ma ho provato anche molti altri strumenti per convertirlo). Il file è stato creato nello stesso modo di un gruppo di altri, sebbene solo alcuni rendano male.

ciò che già provato:

ho cercato di metterlo in un imageview con app: srcCompat (anche con src :). Ho provato a utilizzarlo in un menu (impostando direttamente l'icona o utilizzando un selettore ).

CODICE

SVG: CODICE

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 626.96 610.53"><title>PATHOLOGIES</title><path d="M5766.55,588.54a54.73,54.73,0,0,0-4.23-3.81,248.33,248.33,0,0,0,31.34-121.54c-0.23-138.68-114.72-251.15-253.38-249-134.71,2.07-243.52,110.91-245.54,245.64a249.48,249.48,0,0,0,390.59,209.52l0.21,0.22,155.12,155.12,81-81Zm-222.36,64.92c-104.85,0-189.85-85-189.85-189.85s85-189.85,189.85-189.85S5734,358.76,5734,463.61,5649,653.46,5544.19,653.46ZM5452,347.1l7.72-22.08a161.29,161.29,0,0,1,52.5-20.55l-19.84,56.75A19.25,19.25,0,0,1,5467.83,373l-4-1.41A19.25,19.25,0,0,1,5452,347.1Zm20.13,82.62L5430,502.57a19.25,19.25,0,0,1-26.29,7l-3.71-2.14a19.25,19.25,0,0,1-7-26.29L5435,408.33a19.25,19.25,0,0,1,26.29-7l3.71,2.14A19.25,19.25,0,0,1,5472.1,429.72Zm-82.73-14.9A161.59,161.59,0,0,1,5408.85,374l9.06,9.06a19.25,19.25,0,0,1,0,27.22l-3,3A19.24,19.24,0,0,1,5389.37,414.82Zm151.76-54A19.25,19.25,0,0,1,5552,335.85l55.51-21.72a162.36,162.36,0,0,1,43.87,27.64A19.17,19.17,0,0,1,5646,345l-78.34,30.65a19.25,19.25,0,0,1-24.94-10.91Zm-13.43,29.12,66.74,51.21a19.25,19.25,0,0,1,3.55,27l-2.61,3.4a19.25,19.25,0,0,1-27,3.55l-66.74-51.21a19.25,19.25,0,0,1-3.55-27l2.61-3.4A19.25,19.25,0,0,1,5527.69,389.91Zm83.57,191.47-2.82,3.23a19.25,19.25,0,0,1-27.15,1.86l-63.41-55.28A19.25,19.25,0,0,1,5516,504l2.82-3.23a19.25,19.25,0,0,1,27.16-1.86l63.41,55.28A19.25,19.25,0,0,1,5611.26,581.38Zm60.09-191.15,4,1.59a19.25,19.25,0,0,1,10.71,25l-31.28,78.09a19.25,19.25,0,0,1-25,10.71l-4-1.59A19.25,19.25,0,0,1,5615,479l31.28-78.09A19.25,19.25,0,0,1,5671.34,390.24ZM5504.73,604.39a19.19,19.19,0,0,1-4.85,15.4,161.36,161.36,0,0,1-38.43-16.53l-9.92-76.83a19.25,19.25,0,0,1,16.62-21.55l4.25-.55A19.25,19.25,0,0,1,5494,521ZM5686.4,538L5685,544.4a163.11,163.11,0,0,1-56.5,57.93l16.12-73.51a19.25,19.25,0,0,1,22.92-14.68l4.19,0.92A19.25,19.25,0,0,1,5686.4,538Z" transform="translate(-5294.72 -214.14)"/></svg> 

VECTORDRAWABLE:

<vector android:height="24dp" android:viewportHeight="610.53" 
android:viewportWidth="626.96" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android"> 
<path android:fillColor="#FF000000" android:pathData="M471.8,374.4a54.7,54.7 0,0 0,-4.2 -3.8,248.3 248.3,0 0,0 31.3, 
-121.5c-0.2,-138.7 -114.7,-251.1 -253.4,-249 -134.7,2.1 -243.5,110.9 -245.5,245.6a249.5,249.5 0,0 0,390.6 209.5l0.2, 
0.2 155.1,155.1 81,-81ZM249.5,439.3c-104.8,0 -189.9,-85 -189.9,-189.9s85,-189.9 189.9,-189.9S439.3,144.6 439.3, 
249.5 354.3,439.3 249.5,439.3ZM157.3,133l7.7,-22.1a161.3,161.3 0,0 1,52.5 -20.5l-19.8,56.8A19.3,19.3 0,0 1, 
173.1 158.9l-4,-1.4A19.3,19.3 0,0 1,157.3 133ZM177.4,215.6L135.3,288.4a19.3,19.3 0,0 1,-26.3 7l-3.7,-2.1a19.3, 
19.3 0,0 1,-7 -26.3L140.3,194.2a19.3,19.3 0,0 1,26.3 -7l3.7,2.1A19.3,19.3 0,0 1,177.4 215.6ZM94.7,200.7A161.6, 
161.6 0,0 1,114.1 159.9l9.1,9.1a19.3,19.3 0,0 1,0 27.2l-3,3A19.2,19.2 0,0 1,94.6 200.7ZM246.4,146.7A19.3,19.3 0, 
0 1,257.3 121.7l55.5,-21.7a162.4,162.4 0,0 1,43.9 27.6A19.2,19.2 0,0 1,351.3 130.9l-78.3,30.6a19.3,19.3 0,0 1, 
-24.9 -10.9ZM233,175.8 L299.7,227a19.3,19.3 0,0 1,3.5 27l-2.6,3.4a19.3,19.3 0,0 1,-27 3.5l-66.7,-51.2a19.3,19.3 0, 
0 1,-3.5 -27l2.6,-3.4A19.3,19.3 0,0 1,233 175.8ZM316.6,367.3 L313.8,370.5a19.3,19.3 0,0 1,-27.1 1.9l-63.4,-55.3A19.3, 
19.3 0,0 1,221.3 289.9l2.8,-3.2a19.3,19.3 0,0 1,27.2 -1.9l63.4,55.3A19.3,19.3 0,0 1,316.5 367.2ZM376.7,176.1 L380.7, 
177.7a19.3,19.3 0,0 1,10.7 25l-31.3,78.1a19.3,19.3 0,0 1,-25 10.7l-4,-1.6A19.3,19.3 0,0 1,320.3 264.9l31.3,-78.1A19.3, 
19.3 0,0 1,376.6 176.1ZM210,390.3a19.2,19.2 0,0 1,-4.8 15.4,161.4 161.4,0 0,1 -38.4,-16.5l-9.9,-76.8a19.3,19.3 0,0 1, 
16.6 -21.5l4.3,-0.6A19.3,19.3 0,0 1,199.3 306.9ZM391.7,323.9L390.3,330.3a163.1,163.1 0,0 1,-56.5 57.9l16.1,-73.5a19.3, 
19.3 0,0 1,22.9 -14.7l4.2,0.9A19.3,19.3 0,0 1,391.7 323.9Z"/> 

Come reso su Android Studio:

Come reso su dispositivo (dopo Android Studio import):

Non posso davvero capire che cosa sta causando il cattivo rendering. Sono abbastanza sicuro che non sia un problema di svg (correggimi se sbaglio, per favore) dato che gli altri drawable sono visualizzati correttamente. Non vorrei nemmeno chiamare un bug della biblioteca, dato che sono l'unico a sperimentare il problema. Che cosa sto facendo di sbagliato?

Grazie per l'aiuto

Answer 1

Soluzione

Dopo alcuni ulteriori tentativi (e l'aiuto di persone), ho trovato il problema. Il problema era con la regola di riempimento come altri già sperimentati, ma nel modo opposto!

In effetti, per quanto ne so, VectorDrawable utilizza la regola di riempimento diversa da zero e presenta problemi di rendering con SVG esportati con la regola di evenodd. Ecco perché ho sempre usato la regola diversa da zero. Risulta che usare l'evenodd risolve il mio problema.

Non so perché ea questo punto ho troppa paura di chiedere.

Answer 2

Ho il sospetto che a che fare con il comando percorso di analisi. Se guardiamo la prima sottotracciato del percorso (che è quella di non essere disegnare correttamente), esso appare come il seguente:

M 471.8, 374.4 
a 54.7, 54.7 0, 0 0, -4.2 -3.8, 
    248.3 248.3, 0 0, 0 31.3,-121.5 
c -0.2, -138.7 -114.7, -251.1 -253.4, -249 
    -134.7, 2.1 -243.5, 110.9 -245.5, 245.6 
a 249.5, 249.5 0, 0 0, 390.6 209.5 
l 0.2, 0.2 
    155.1, 155.1 
    81, -81Z 

ho rotto verso il basso per facilitarne la lettura.

È possibile notare che sta utilizzando una delle funzionalità delle stringhe di comando dei percorsi SVG, dove se viene ripetuto un comando di percorso, è possibile saltarlo e fornire solo le coordinate. Lo fa qui per i comandi a (arco), c (curva) e l (riga).

Mentre i segmenti di linea (che formano la maniglia) sembrano essere ok, sospetto che il renderer VectorDrawable non stia analizzando correttamente l'arco e/oi segmenti della curva. Tuttavia non ho guardato il codice di base Android per confermare il bug.

Ti suggerisco di provare a rimettere i caratteri del comando di salto nel percorso, per vedere se funziona meglio. Ad esempio:

M 471.8, 374.4 
a 54.7, 54.7 0, 0 0, -4.2 -3.8 
a 248.3 248.3, 0 0, 0 31.3,-121.5 
c -0.2, -138.7 -114.7, -251.1 -253.4, -249 
c -134.7, 2.1 -243.5, 110.9 -245.5, 245.6 
a 249.5, 249.5 0, 0 0, 390.6 209.5 
l 0.2, 0.2 
    155.1, 155.1 
    81, -81Z 

C'è un'altra sottopercorso nella stringa (corrispondente ad uno dei "pillole"), che utilizza anche il collegamento coords ripetuta. Se modifichiamo che anche il conseguente VectorDrawable assomiglia:

<vector android:height="24dp" android:viewportHeight="610.53" 
android:viewportWidth="626.96" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android"> 
<path android:fillColor="#FF000000" android:pathData="M471.8,374.4a54.7,54.7 0,0 0,-4.2 -3.8a248.3 248.3,0 0,0 31.3, 
-121.5c-0.2,-138.7 -114.7,-251.1 -253.4,-249c-134.7,2.1 -243.5,110.9 -245.5,245.6a249.5,249.5 0,0 0,390.6 209.5l0.2, 
0.2 155.1,155.1 81,-81ZM249.5,439.3c-104.8,0 -189.9,-85 -189.9,-189.9s85,-189.9 189.9,-189.9S439.3,144.6 439.3, 
249.5 354.3,439.3 249.5,439.3ZM157.3,133l7.7,-22.1a161.3,161.3 0,0 1,52.5 -20.5l-19.8,56.8A19.3,19.3 0,0 1, 
173.1 158.9l-4,-1.4A19.3,19.3 0,0 1,157.3 133ZM177.4,215.6L135.3,288.4a19.3,19.3 0,0 1,-26.3 7l-3.7,-2.1a19.3, 
19.3 0,0 1,-7 -26.3L140.3,194.2a19.3,19.3 0,0 1,26.3 -7l3.7,2.1A19.3,19.3 0,0 1,177.4 215.6ZM94.7,200.7A161.6, 
161.6 0,0 1,114.1 159.9l9.1,9.1a19.3,19.3 0,0 1,0 27.2l-3,3A19.2,19.2 0,0 1,94.6 200.7ZM246.4,146.7A19.3,19.3 0, 
0 1,257.3 121.7l55.5,-21.7a162.4,162.4 0,0 1,43.9 27.6A19.2,19.2 0,0 1,351.3 130.9l-78.3,30.6a19.3,19.3 0,0 1, 
-24.9 -10.9ZM233,175.8 L299.7,227a19.3,19.3 0,0 1,3.5 27l-2.6,3.4a19.3,19.3 0,0 1,-27 3.5l-66.7,-51.2a19.3,19.3 0, 
0 1,-3.5 -27l2.6,-3.4A19.3,19.3 0,0 1,233 175.8ZM316.6,367.3 L313.8,370.5a19.3,19.3 0,0 1,-27.1 1.9l-63.4,-55.3A19.3, 
19.3 0,0 1,221.3 289.9l2.8,-3.2a19.3,19.3 0,0 1,27.2 -1.9l63.4,55.3A19.3,19.3 0,0 1,316.5 367.2ZM376.7,176.1 L380.7, 
177.7a19.3,19.3 0,0 1,10.7 25l-31.3,78.1a19.3,19.3 0,0 1,-25 10.7l-4,-1.6A19.3,19.3 0,0 1,320.3 264.9l31.3,-78.1A19.3, 
19.3 0,0 1,376.6 176.1ZM210,390.3a19.2,19.2 0,0 1,-4.8 15.4a161.4 161.4,0 0,1 -38.4,-16.5l-9.9,-76.8a19.3,19.3 0,0 1, 
16.6 -21.5l4.3,-0.6A19.3,19.3 0,0 1,199.3 306.9ZM391.7,323.9L390.3,330.3a163.1,163.1 0,0 1,-56.5 57.9l16.1,-73.5a19.3, 
19.3 0,0 1,22.9 -14.7l4.2,0.9A19.3,19.3 0,0 1,391.7 323.9Z"/> 

Provate questo e vedere se funziona meglio.

Answer 3

Nel mio caso non serviva a niente fino a quando ho sostituito tutti i comandi arco ellittico (Un) con comandi curva di Bézier cubica (C). Ogni arco può essere rappresentato con una o più curve di Bézier. L'intera ellisse può essere sostituita con quattro curve di Bézier.

Inkscape tende a convertire gli archi in curve di Bézier quando si inizia a modificare il percorso in SVG, quindi è possibile utilizzare Inkscape per la conversione. Sembra che il renderer vettoriale Android abbia seri problemi nell'elaborazione dei comandi A/a, non importa se sono relativi o assoluti. Quindi, prova a convertire A/a =>C/c.

Si noti che non è sufficiente modificare la lettera di comando, è necessario impostare i punti di controllo in modo appropriato.