Android Studio vector assets are distorted

user_3753104 0
Viewed 398

When i import a vector svg file on the editor the icon looks normal, but when i debug icon gets distorted, no transformation are used in the svg !!! I am using the latest Android Studio 4.0 Canary 9, since i am using Ryzen 5 processor.

enter image description here

Here is the original svg file, that i imported in Android Studio.

<svg id="brush" 
    xmlns="http://www.w3.org/2000/svg" width="27.17" height="27.17" viewBox="0 0 27.17 27.17">
    <defs>
        <style>.cls-1{fill:#2ca0d4;}</style>
    </defs>
    <path id="Path_4" data-name="Path 4" class="cls-1" d="M9.58,18.19a4.87,4.87,0,0,0-5.3-1,4.87,4.87,0,0,0-2.86,4.39,10.27,10.27,0,0,1-.72,4.36L0,27l1.31.09c.32,0,.66,0,1,0,2.56,0,5.68-.64,7.36-2.19A4.94,4.94,0,0,0,9.58,18.19Z" />
    <path id="Path_5" data-name="Path 5" class="cls-1" d="M13,14.81A9.32,9.32,0,0,0,10.38,13c-.8.83-1.59,1.67-2.35,2.51a6.08,6.08,0,0,1,2.68,1.57,6.26,6.26,0,0,1,1.6,2.75c.83-.75,1.66-1.52,2.5-2.33A8.46,8.46,0,0,0,13,14.81Z" />
    <path id="Path_6" data-name="Path 6" class="cls-1" d="M26.82.35c-.6-.6-1.58-.87-6.34,2.83a109.1,109.1,0,0,0-8.86,8.52l-.06.06h0l0,0a11,11,0,0,1,2.55,1.89A10,10,0,0,1,16,16.32l0,0h0l.09-.09A97.7,97.7,0,0,0,24,6.7C27.69,1.93,27.41,1,26.82.35Z" />
</svg>

Even if i use wrap_content for the second side, it is still distorted

android:layout_width="500dp"
android:layout_height="wrap_content"

When i import icon from the Clip Art, that are pre-made in Android Studio there is no problem with the icon. What is the problem with the svg file, that i imported?
enter image description here

vector icons svg android
1 Answers

I manage to fix it using different Vector(SVG) editing tool. In my case I used the FREE program Microsoft Expression Design.

So the problem is that some more advance programs like Illustrator, Adobe XD shortens the exported data using new methods that are supported in SVG 2.0 or later versions. So the solution is to use some tools like Expression Design, that will convert the file to SVG 1.1, which is always properly imported in Android Studio.

Here is the code for the SVG file, but exported through Expression Design.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="36.1963" height="36.095" viewBox="0 0 36.20 36.10" enable-background="new 0 0 36.20 36.10" xml:space="preserve">
    <path fill="#2CA0D4" fill-opacity="1" stroke-width="1.33333" stroke-linejoin="miter" d="M 12.7734,24.2283C 10.9014,22.4009 8.11572,21.8754 5.70673,22.895C 3.40485,23.9378 1.91718,26.2214 1.89331,28.7483C 1.99896,30.7327 1.67139,32.7165 0.93335,34.5616L 0,35.9749L 1.74664,36.095C 2.17334,36.095 2.62665,36.095 3.08002,36.095C 6.49335,36.095 10.6533,35.2416 12.8933,33.175C 15.1959,30.619 15.1436,26.7216 12.7734,24.2283 Z "/>
    <path fill="#2CA0D4" fill-opacity="1" stroke-width="1.33333" stroke-linejoin="miter" d="M 17.3333,19.7216C 16.316,18.7227 15.1343,17.9064 13.84,17.3083C 12.7734,18.415 11.72,19.535 10.7067,20.655C 12.0589,21.0316 13.2902,21.753 14.28,22.7483C 15.2951,23.7664 16.0298,25.0294 16.4133,26.415C 17.52,25.415 18.6266,24.3883 19.7466,23.3083C 19.1809,21.9683 18.3615,20.7504 17.3333,19.7216 Z "/>
    <path fill="#2CA0D4" fill-opacity="1" stroke-width="1.33333" stroke-linejoin="miter" d="M 35.76,0.441589C 34.96,-0.358398 33.6533,-0.718384 27.3066,4.21497C 23.1585,7.77655 19.2145,11.5693 15.4933,15.575L 15.4133,15.655L 15.4133,15.655C 16.6625,16.3262 17.8077,17.175 18.8133,18.175C 19.8431,19.2152 20.6944,20.418 21.3333,21.7349L 21.4534,21.6149C 25.2341,17.6067 28.7567,13.3627 32,8.90826C 36.92,2.54828 36.5466,1.30829 35.76,0.441589 Z "/>
</svg>
user_37531040
Related