Icon SVG created with Inkscape is not properly imported

Asked

Viewed 157 times

2

With Inkscape app, I’m trying to create my own custom SVG icons and then import them to Android Studio. On import 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 about some tutorial where you teach how to create SVG icons to import to Android Studio? Code generated by Android Studio after importing a test SVG 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"/>

inserir a descrição da imagem aqui

  • Have you ever tried to convert them to PNG?

  • I didn’t try, because I want Icon in SVG...

  • Could show the code that is generated? so helps to identify the error! It seems that it is using something that Android Studio does not understand!

  • @Thiago Luiz Domacoski, I edited my question and added the code generated by Android Studio after importing the SVG file.

  • error while creating? or when Voce runs the application? Here no error occurred! Steps: 1. I created one. any xml in the drawable folder; 2. I pasted the contents above! Ran smoothly !

  • The error occurs when creating. I edited my question and added a new code and print screen of the Android Studio error.

Show 1 more comment

2 answers

2

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

<defs> is a SVG header block, used to declare elements that will be reused. The elements declared in <defs> are not rendered until called elsewhere in 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, redesigning it at different positions.

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

<svg ...>
    <circle cx="100" cy="100" r="40" fill="blue" id="circulo" />
    <circle cx="300" cy="100" r="40" fill="blue" id="circulo" />
<svg>
  • Helderdarocha, thank you for your reply. I created the following test example to import to Android Studio but it still doesn’t work: <?xml version="1.0" encoding="UTF-8" standalone="no"? > <svg height="24" width="24"> <Circle Cx="100" Cy="100" r="40" Fill="blue" id="circle" /> </svg>. I get the error: Numberformatexception: For input string: ""

  • ""? The only place this string appears is in fill="blue". If Android Studio does not support this attribute, alternatives are "style="Fill: blue" or applying the style via CSS (<style> circle {fill: blue} </style>).

  • 1

    You can also try a library such as svg-android: https://github.com/BigBadaboom/androidsvg. which claims to offer full support for all graphics components. The repository has been updated frequently.

  • Helderdarocha, thanks again. I will study the library you recommended.

0

In case someone has difficulty with this, install this extension for Icelandic:
Androidvector
Here with me it worked right

"This extension adds a new type for Android vector images in "Save As".
After installed, select Save As... or Save a Copy and you’ll see a guy named
Android Vectordrawable (* . xml) on the suspended list.

Installation

Copy the androidvector.py and androidvector.imx files to the extensions directory.
On a Mac with High Sierra is on ~/.config/inkscape/extensions.
On a mac with Mojave or Catalina, stay in ~/Library/Application Support/org.inkscape.Inkscape/config/inkscape/extensions.

  • Reload Inkscape and new type of rescue should be available.

Use and limitations

Currently, this extension works only with "paths" and "groups".

All other objects will need to be converted into paths before saving the document; otherwise, they will not be represented in the vector image.

Android vectors do not support gradients. The extension will attempt to use one of the gradient colors.

Android vectors have slightly different opacity implementations.

Inkscape has three values of opacity for paths: tracing, filling and general.

Android has no general opacity; therefore, this is combined with the dash and fill opacities.

Android Studio has a function to reformat the code. If you need to modify an attribute in Android Studio, you can reformat XML to make things easier."

I hope it helps

Browser other questions tagged

You are not signed in. Login or sign up in order to post.