SVG icon created with Inkscape is not properly imported

2

With Inkscape application, I'm trying to create my own custom icons in SVG and then import them into Android Studio. When importing to Android Studio I get the following error message ERROR@ line 29 <defs> is not supported WARNING@ line 51 We don't scale the stroke width! Can you help me with this error or do you know of some tutorial where to teach to create SVG icons to import into Android Studio? Code generated by Android Studio after importing an SVG testing icon:

<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="M12,12m-11.016,0a11.016,11.016 0,1 1,22.032 0a11.016,11.016 0,1 1,-22.032 0"
    android:strokeLineCap="butt"
    android:strokeColor="#00000000"
    android:fillColor="#ff0000"
    android:strokeWidth="1"
    android:strokeLineJoin="miter"
    android:strokeAlpha="1"/>

    
asked by anonymous 11.07.2016 / 15:22

1 answer

2

Android Studio does not support the full SVG specification. But you can create simple graphics without gradients, filters, etc. using only simple figures and paths.

<defs> is an SVG header block, used to declare elements that will be reused. Elements declared in <defs> are not rendered until they are called in another part of the document. For example, you can declare a circle in <defs> :

                

and it will not be drawn unless it is referenced in a <use> :

<svg ...>
    <defs>
      <circle cx="100" cy="100" r="40" fill="blue" id="circulo" />
    </defs>

    <use xlink:href="#circulo" />
    <use xlink:href="#circulo" transform="translate(300,100)" />
<svg>

The above SVG reuses the circle twice, redrawing it in different positions.

If <defs> is not supported, you can often change the SVG so that you do not use it. To work in Android Studio, SVG would have to be rewritten without <defs> like this:

<svg ...>
    <circle cx="100" cy="100" r="40" fill="blue" id="circulo" />
    <circle cx="300" cy="100" r="40" fill="blue" id="circulo" />
<svg>
    
12.07.2016 / 07:33