inloop / svg2android Goto Github PK

View Code? Open in Web Editor NEW

1.7K 57.0 358.0 721 KB

SVG to Android VectorDrawable XML resource file

Home Page: http://inloop.github.io/svg2android

License: Apache License 2.0

CSS 1.05% JavaScript 92.93% HTML 6.03%

svg2android's Introduction

svg2android

[Deprecated - use official Vector Asset Studio directly from Android Studio]

Convert SVG to Android VectorDrawable XML resource file.

Extracts all parameters of elements and groups that are supported in Android.

Supported: path, line, rect, circle, ellipse, polyline and polygon elements.

Not supported: text element (export manually to path), gradients and patterns, matrix transforms

Example of imported svg (random image from wikipedia):

License

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

svg2android's People

Contributors

Stargazers

Watchers

Forkers

fsiu haikuowuya cthu liang3472 dupengtao morristech jacknm errmalt yunyangandroid liu7yong 0xd34d josejuansanchez 26hmkk kenobyte rabyunghwa autovalue dambrisco aidygo deeptimay azetor wnafee carlpoole sebirdman simekadam elelinux zzn2 prashant31191 mdabbagh88 yltian nolanlawson shyamkumarm olivierroberdet shaharyart matrixy jvmonjo zzhoujay pareshmayani rawnsley ivanovicnosel beartung evilcore leequer liaox jeremydeanlakey synaptek dupengyun crainax mjimdo yuan232007 minthubk lj19851227 edgenit qichanna crandellws supershameless oldium balrampandey19 joegana hanhailong mostafaanter msoftware cooliean vanillaos congwiny niyueming jobssteve alexpereverzev linanxi icrackthecode krmao feifeiq wood2lin tuyc sylarcheng cancit gyoda vajidbwd doitlite tslusk cagkanciloglu graydalf crazyqiang jichinx jiangyinbin luoyiqi sjd753 loresky neowinston polory chanderwoo heart2009 jessezhaordmp xdevs23 evc94 chengxingyao gtechoogle andreakys xixsuse huoshulei jerryokafor

svg2android's Issues

Bug: "null" instead of "@null" ?

using this SVG as an input:

<svg width="476" height="476" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g>
  <title>Layer 1</title>
  <ellipse ry="198.5" rx="198.5" id="svg_3" cy="238" cx="238" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#000000" fill="#f3f3f3"/>
 </g>
</svg>

will create this:

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="476dp"
    android:height="476dp"
    android:viewportWidth="476"
    android:viewportHeight="476">

    <path
        android:fillColor="#f3f3f3"
        android:strokeColor="#000000"
        android:strokeLineJoin="null"
        android:strokeLineCap="null"
        android:pathData="M 238 39.5 C 347.628522841 39.5 436.5 128.371477159 436.5 238 C 436.5 347.628522841 347.628522841 436.5 238 436.5 C 128.371477159 436.5 39.5 347.628522841 39.5 238 C 39.5 128.371477159 128.371477159 39.5 238 39.5 Z" />
</vector>

but Android studio can't handle the nulls.

Use default (or option) black fill color when omitted in SVG

Fix local IRI reference problem

As mentioned in https://blog.stylingandroid.com/vectors-for-all-slight-return/

Ellipses turn into figure eights

See attached .png files.

Converting ellipses into paths and then converting the containing SVG into an XML seems to rotate, duplicate and join the shapes.

2ellipses.svg.txt (Renamed to .txt to circumvent upload restrictions)

wrong color

Color is wrong in the result file.

SVG File：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="24" height="24" viewBox="0 0 48 48">
  <defs>
    <style>
      .cls-1, .cls-2 {
        fill: #fa9f34;
      }

      .cls-1, .cls-3 {
        fill-rule: evenodd;
      }

      .cls-2 {
        stroke: #fff;
        stroke-linejoin: round;
        stroke-width: 3px;
      }

      .cls-3 {
        fill: #fff;
      }
    </style>
  </defs>
  <g>
    <path d="M16.005,16.001 C20.405,16.001 24.005,12.403 24.005,7.999 C24.005,3.598 20.405,-0.003 16.005,-0.003 C11.606,-0.003 8.006,3.598 8.006,7.999 C8.006,12.403 11.606,16.001 16.005,16.001 M16.005,20.001 C10.607,20.001 0.009,22.603 0.009,28.003 L0.009,32.003 L32.001,32.003 L32.001,28.003 C32.001,22.603 21.404,20.001 16.005,20.001 " transform="translate(1.25 4.75)" class="cls-1"/>
    <circle cx="32.25" cy="28.75" r="8" class="cls-2"/>
    <path d="M32.003,22.993 L32.003,19.993 L30.002,19.993 L30.002,22.993 L26.999,22.993 L26.999,24.994 L30.002,24.994 L30.002,27.995 L32.003,27.995 L32.003,24.994 L35.006,24.994 L35.006,22.993 L32.003,22.993 Z" transform="translate(1.25 4.75)" class="cls-3"/>
  </g>
</svg>

Convert Result：

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="48dp"
    android:height="48dp"
    android:viewportWidth="48"
    android:viewportHeight="48">

    <group>
        <path
            android:fillColor="#000000"
            android:pathData="M17.255,20.752 C21.655,20.752,25.255,17.153,25.255,12.749
C25.255,8.348,21.655,4.747,17.255,4.747 C12.856,4.747,9.256,8.348,9.256,12.749
C9.256,17.153,12.856,20.752,17.255,20.752 M17.255,24.751
C11.857,24.751,1.259,27.353,1.259,32.753 L1.259,36.753 L33.251,36.753
L33.251,32.753 C33.251,27.353,22.654,24.751,17.255,24.751" />
        <path
            android:fillColor="#000000"
            android:strokeColor="#fff"
            android:strokeWidth="3"
            android:strokeLineJoin="round"
            android:pathData="M32.25,20.75 C36.6683,20.75,40.25,24.3317,40.25,28.75
C40.25,33.1683,36.6683,36.75,32.25,36.75
C27.8317,36.75,24.25,33.1683,24.25,28.75
C24.25,24.3317,27.8317,20.75,32.25,20.75 Z" />
        <path
            android:fillColor="#fff"
            android:pathData="M33.253,27.743 L33.253,24.743 L31.252,24.743 L31.252,27.743 L28.249,27.743
L28.249,29.745 L31.252,29.745 L31.252,32.745 L33.253,32.745 L33.253,29.745
L36.256,29.745 L36.256,27.743 L33.253,27.743 Z" />
    </group>
</vector>

Add support for fill-rule "evenodd"

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule
https://code.google.com/p/android/issues/detail?id=198931
https://github.com/a-student/SvgToVectorDrawableConverter#manual-editing

not supported in Android, not easy to implement conversion
add warnings at least

<New feature request > We need reverse convert xml2svg sometimes.

Does it possible to do the reverse work？

Error: 1:app:mergeDebugResources FAILED

I haven't had any luck using any SVGs produced from this app in an Android project. These include those supplied on the google material icons page.

Android Studio to 2.1
compileSdkVersion 23
buildToolsVersion "23.0.2"
minSdkVersion 14
targetSdkVersion 23

"Bake transforms" - too long decimal numbers

No shape elements found in svg

i use Inkscape to convert png to svg ,and then to get VectorDrawable,but it says No shape elements found in svg

Why white color in SVG was converted to black color in VectorDrawable?

Sorry, if I ask this question in wrong place.

Incorrect output

It seems the vector drawable output of this file seems incorrect. I am sorry that the file is big and I attached it in the zip ( ~ 400 KB )

buildings-x414.svg.zip

And the output is

Error:String types not allowed (at 'fillColor' with value 'url(#linearGradient4114-2-6)').

svg file download url:http://download.easyicon.net/svg/1173806/473/

thx

Converted but getting build error within android studio

Attached file
icon_security.svg.zip

No rounded corners after transform

Here is my svg


<svg width="24px" height="24px" viewBox="305 12 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 -->
    <desc>Created with Sketch.</desc>
    <defs>
        <rect id="path-1" x="0" y="0" width="20" height="14" rx="2"></rect>
        <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="20" height="14" fill="white">
            <use xlink:href="#path-1"></use>
        </mask>
    </defs>
    <g id="1Railcard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(305.000000, 12.000000)">
        <g id="Railcard" transform="translate(2.000000, 5.000000)" stroke="#21314D">
            <use id="Rectangle-1057" mask="url(#mask-2)" stroke-width="4" xlink:href="#path-1"></use>
            <path d="M1,9 L18,9" id="Line-2" stroke-width="2" stroke-linecap="square"></path>
        </g>
    </g>
</svg>

wrong color

When I convert this SVG https://dl.dropboxusercontent.com/u/4926106/logo.svg the yellow background behind the E becomes black :-(

Extra (incorrect) vertical paths at the end

Like #41, there seems to be extra vertical lines at the end. The input is
alerts.svg.zip

And the output

Thanks for the awesome tool!

Could not upload svg file

I could not upload some kind fo svg-files and nothing is shown to detect the reason.

Update: when I changed browser from Mozilla to Chromium the issue with upload is fixed.
But then I've got an issue with colours, inappropriate colour transfers.

Resource: yin-yang.svg

<!--?xml version="1.0" standalone="no"?-->

<svg xmlns="http://www.w3.org/2000/svg" width="300.000000pt" height="300.000000pt" viewBox="0 0 300.000000 300.000000" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,300.000000) scale(0.100000,-0.100000)" fill="#040504" stroke="none">
<path style="position: relative;" class="node" id="node1" d="M1325 2979 c-27 -5 -79 -14 -115 -20 -93 -16 -261 -73 -360 -121
-453 -222 -754 -641 -824 -1148 -27 -192 -16 -372 35 -565 136 -517 547 -928
1064 -1065 102 -26 278 -50 377 -50 100 0 268 25 388 57 456 122 803 433 998
893 68 161 110 420 99 612 -27 488 -279 922 -682 1178 -39 25 -80 51 -90 58
-11 6 -31 17 -45 23 -14 5 -38 17 -55 25 -49 25 -175 70 -245 87 -162 41 -423
57 -545 36z m385 -51 c248 -64 440 -274 500 -546 24 -106 25 -187 5 -284 -42
-201 -154 -367 -318 -471 -132 -83 -205 -106 -372 -117 -135 -8 -230 -27 -302
-61 -24 -10 -46 -19 -49 -19 -22 0 -154 -103 -213 -167 -178 -190 -237 -427
-172 -693 20 -81 102 -228 165 -297 60 -65 187 -163 213 -163 7 0 13 -4 13
-10 0 -51 -379 111 -538 230 -181 136 -331 314 -429 510 -75 149 -78 156 -107
259 -81 288 -76 585 15 855 31 90 113 264 152 321 251 365 562 577 952 650
195 37 352 38 485 3z m-123 -2003 c37 -15 77 -74 87 -125 10 -54 -17 -132 -59
-168 -45 -40 -126 -52 -179 -27 -75 36 -122 119 -106 189 28 125 138 181 257
131z"></path>
<path style="position: relative;" class="node" id="node2" d="M1430 2409 c-32 -13 -78 -56 -96 -91 -8 -15 -14 -50 -14 -78 0 -177
200 -254 321 -123 36 38 53 94 44 149 -16 107 -152 184 -255 143z"></path>
</g>
<g transform="translate(0.000000,300.000000) scale(0.100000,-0.100000)" fill="#A2A2A2" stroke="none">

<path style="position: relative;" class="node" id="node4" d="M1400 2950 c-478 -42 -840 -259 -1127 -675 -39 -57 -121 -231 -152
-321 -91 -270 -96 -567 -15 -855 29 -103 32 -110 107 -259 98 -196 248 -374
429 -510 159 -119 538 -281 538 -230 0 6 -6 10 -13 10 -8 0 -45 22 -84 49
-214 151 -337 407 -318 660 14 177 75 316 196 444 59 64 191 167 213 167 3 0
25 9 49 19 72 34 167 53 302 61 167 11 240 34 372 117 201 127 334 369 333
606 -1 138 -63 325 -148 439 -154 209 -386 303 -682 278z m179 -549 c114 -59
144 -196 62 -284 -121 -131 -321 -54 -321 123 0 28 6 63 14 78 18 35 64 78 96
91 41 16 108 12 149 -8z"></path>
<path style="position: relative;" class="node" id="node5" d="M1455 937 c-54 -21 -73 -36 -95 -72 -47 -76 -44 -147 11 -209 45 -51
91 -69 156 -61 72 9 117 48 138 118 18 61 12 107 -22 160 -36 57 -128 88 -188
64z"></path>
</g>
</svg>

Vector:

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="300.000000dp"
    android:height="300.000000dp"
    android:viewportWidth="300.000000"
    android:viewportHeight="300.000000">

    <group
            android:translateY="300.000000"
            android:scaleX="0.100000"
            android:scaleY="-0.100000">
        <path
            android:fillColor="#000000"
            android:pathData="M1325 2979 c-27 -5 -79 -14 -115 -20 -93 -16 -261 -73 -360 -121 -453 -222 -754
-641 -824 -1148 -27 -192 -16 -372 35 -565 136 -517 547 -928 1064 -1065 102 -26
278 -50 377 -50 100 0 268 25 388 57 456 122 803 433 998 893 68 161 110 420 99
612 -27 488 -279 922 -682 1178 -39 25 -80 51 -90 58 -11 6 -31 17 -45 23 -14 5
-38 17 -55 25 -49 25 -175 70 -245 87 -162 41 -423 57 -545 36z m385 -51 c248 -64
440 -274 500 -546 24 -106 25 -187 5 -284 -42 -201 -154 -367 -318 -471 -132 -83
-205 -106 -372 -117 -135 -8 -230 -27 -302 -61 -24 -10 -46 -19 -49 -19 -22 0 -154
-103 -213 -167 -178 -190 -237 -427 -172 -693 20 -81 102 -228 165 -297 60 -65 187
-163 213 -163 7 0 13 -4 13 -10 0 -51 -379 111 -538 230 -181 136 -331 314 -429
510 -75 149 -78 156 -107 259 -81 288 -76 585 15 855 31 90 113 264 152 321 251
365 562 577 952 650 195 37 352 38 485 3z m-123 -2003 c37 -15 77 -74 87 -125 10
-54 -17 -132 -59 -168 -45 -40 -126 -52 -179 -27 -75 36 -122 119 -106 189 28 125
138 181 257 131z" />
        <path
            android:fillColor="#000000"
            android:pathData="M1430 2409 c-32 -13 -78 -56 -96 -91 -8 -15 -14 -50 -14 -78 0 -177 200 -254 321
-123 36 38 53 94 44 149 -16 107 -152 184 -255 143z" />
        <path
            android:fillColor="#000000"
            android:pathData="M1400 2950 c-478 -42 -840 -259 -1127 -675 -39 -57 -121 -231 -152 -321 -91 -270
-96 -567 -15 -855 29 -103 32 -110 107 -259 98 -196 248 -374 429 -510 159 -119
538 -281 538 -230 0 6 -6 10 -13 10 -8 0 -45 22 -84 49 -214 151 -337 407 -318 660
14 177 75 316 196 444 59 64 191 167 213 167 3 0 25 9 49 19 72 34 167 53 302 61
167 11 240 34 372 117 201 127 334 369 333 606 -1 138 -63 325 -148 439 -154 209
-386 303 -682 278z m179 -549 c114 -59 144 -196 62 -284 -121 -131 -321 -54 -321
123 0 28 6 63 14 78 18 35 64 78 96 91 41 16 108 12 149 -8z" />
        <path
            android:fillColor="#000000"
            android:pathData="M1455 937 c-54 -21 -73 -36 -95 -72 -47 -76 -44 -147 11 -209 45 -51 91 -69 156
-61 72 9 117 48 138 118 18 61 12 107 -22 160 -36 57 -128 88 -188 64z" />
    </group>
</vector>```

Add batch (multi-svg) capabilities

I'm working with large amounts of SVGs and would love to be able to drag a set of files and download them all at once. I think it'd be optimal for this option to automatically download the resulting files and not display the output as it would normally.

Let me add that I've found this tool to be invaluable to my work and I'm quite thankful that you've made this available. Cheers!

creates app:vc_* formats for vector_compat library, even if not needed anymore

When android studio 1.4+ imports the files manually, it creates clean XML VectorDrawables, but this tool is generating duplicate settings with the app:vc_ notation. This causes compile-time errors, because the mentioned attributes don't exist, nor are they useful (if compiling with latest toolsets anyways.)

Can we get a checkbox to enable/disable including this?

can't set bakeTransforms back to false on baketransforms errors

Using Firefox 44.
Steps to reproduce:

add an SVG that generate a baketransforms error (attaching one)
riddle.svg.zip
check the baketransforms checkbox
watch how you can never go back to unchecking that box.

(ps : none of my svgs could bake tranforms)
(had to go to console and type localStorage.removeItem("bakeTransforms");)

Add material design padding to vector images

Will be great feature to add padding to vector images according to material design spec:
https://stackoverflow.com/questions/33652834/android-vector-asset-studio-gives-extra-padding-to-some-vector-images

Add support for MrVector (backport of VectorDrawable)

duplicate all attributes (auto)
add checkbox in output to switch between compatibility (MrVector) and lollipop xml

Convert svg's "opacity" field into "strokeAlpha" and "fillAlpha" on Android

Was really pleased at how easy and functional this tool is, the only thing that came out wrong is the opacity for a shine effect, the opacity data seems to have been discarded.

Thanks!

Feature: scale viewport size (e.g. from 512dp to 24dp)

I'd like to use icons from https://github.com/driftyco/ionicons/

Their source files typically are scaled like this:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
     width="512px" height="512px" viewBox="0 0 512 512">

Would it be possible to generate vectors with 24dp x 24dp out of this?

If not, is there an easy way to manipulate the src SVG files (e.g. via XSLT) to transform them to the input I need?

Byte order mark being prepended to xml

When inputting the below xml a "< feff >" is prepended to the output file, which then will not render in Android studio. U+FEFF is the code point for a byte order mark. This might be from a dodgey conversion between iso-8859 and utf8. http://stackoverflow.com/questions/1972362/why-is-my-bash-script-adding-feff-to-the-beginning-of-files

SVG: https://gist.github.com/Danm72/9c87a303d0bd4b3245da

"Problem during parsing svg (flatten failed)" all times

I've been unable to use this tool for some days since Chrome 48 update, it always reports "Error: problem during parsing svg (flatten failed)." for each file i use, even those i've already used with this tool. With firefox I don't have this issue.

Doesn't support viewBoxes with a non-zero left or top

If you have an SVG with a non-zero left/top viewBox:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="420 0 1080 1080"

The viewBox is interpreted the same as viewBox="0 0 1080 1080" so the final asset will be offset within it's viewport. (viewBox coordinates are x y width height, so the 1080 is still the correct width and height, we're just offset)

As Android's VectorDrawable doesn't support an offset, svg2android should either offset the path data appropriately or display a warning so the user knows they need to adjust the viewbox and upload again.

Remove extra empty new lines in xml pathData

Better support for SVG transforms

Androids <path> tag does not support any of transforms operations like translate, scale, rotate. There are two possible solutions:

Recalculate pathData using given transform - much complicated
Wrap path to group tag which supports transforms like translate, scale, rotation (skew is not supported)

Also matrix transform must be decomposed.

Fix spacing between floats

https://code.google.com/p/android/issues/detail?id=202670

Image being rotated by 90 degres after conversion

Hi, i can't figure out why my SVG is rotated after the conversion.
Here my SVG :
<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" viewBox="0 0 205.99126 255.61626" height="255.61626" width="205.99126" xml:space="preserve" version="1.1" id="svg2"> <metadata id="metadata8"> <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> </cc:Work> </rdf:RDF> </metadata> <defs id="defs6"> <clipPath id="clipPath16" clipPathUnits="userSpaceOnUse"> <path id="path18" d="m 0,204.493 164.793,0 L 164.793,0 0,0 0,204.493 Z" /> </clipPath> <clipPath id="clipPath28" clipPathUnits="userSpaceOnUse"> <path id="path30" d="m 19.2131,188.26 126.3599,0 0,-126.36 -126.3599,0 0,126.36 z" /> </clipPath> </defs> <g transform="matrix(1.25,0,0,-1.25,0,255.61625)" id="g10"> <g id="g12"> <g clip-path="url(#clipPath16)" id="g14"> <g transform="translate(82.3966,196.6886)" id="g20"> <path id="path22" style="fill:#2532c4;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c -39.573,0 -71.609,-32.036 -71.609,-71.609 0,-33.92 23.556,-62.187 55.12,-69.725 L 0,-188.681 l 16.489,47.347 c 31.565,7.538 55.12,35.805 55.12,69.725 C 71.609,-32.036 39.573,0 0,0" /> </g> <g id="g24"> <g id="g26" /> <g id="g32"> <g id="g34" clip-path="url(#clipPath28)"> <g id="g36" transform="translate(82.3931,188.26)"> <path id="path38" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c 34.91,0 63.18,-28.28 63.18,-63.18 0,-34.9 -28.27,-63.18 -63.18,-63.18 -34.9,0 -63.18,28.28 -63.18,63.18 C -63.18,-28.28 -34.9,0 0,0" /> </g> </g> </g> </g> <g transform="translate(119.6754,103.0849)" id="g40"> <path id="path42" style="fill:#2532c4;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 -36.752,0 -36.752,0 c -1.475,0 -3.791,0.211 -3.686,2.317 0.105,2.001 1.895,3.264 1.895,3.264 L -36.752,27.906 1.685,5.581 c 0,0 1.79,-1.263 2.001,-3.264 C 3.791,0.316 1.474,0 0,0 M 8.635,6.95 C 5.897,9.688 -33.909,33.066 -34.33,33.277 l -0.211,0.105 0,4.002 0.106,0.105 c 0.526,0.527 1.158,0.948 1.79,1.475 2.843,2.316 6.318,5.16 6.318,10.425 0,6.424 -5.16,11.584 -11.584,11.584 -6.634,0 -11.583,-4.739 -11.583,-11.057 0,-0.948 0.316,-1.791 0.737,-2.422 0.632,-0.843 1.579,-1.159 2.948,-1.054 2.001,0.211 2.317,2.107 2.317,4.107 l 0,0.527 c 0.105,1.58 2.528,4.002 5.581,4.002 3.16,0 5.792,-2.528 5.792,-5.687 0,-3.054 -0.632,-4.318 -4.844,-6.424 -2.001,-0.947 -3.054,-2.001 -3.054,-4.528 l 0.106,-5.055 -0.316,-0.105 C -40.649,33.066 -80.455,9.688 -83.193,6.95 c -1.474,-1.474 -2.106,-5.476 -0.737,-8.74 0.843,-2.001 2.633,-4.318 6.74,-4.318 l 79.823,0 c 4.107,0 5.897,2.317 6.739,4.318 1.369,3.264 0.737,7.266 -0.737,8.74" /> </g> </g> </g> </g> </svg>

And here the file after conversion :
<?xml version="1.0" encoding="utf-8"?> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="205.99126dp" android:height="255.61626dp" android:viewportWidth="205.99126" android:viewportHeight="255.61626"> <path android:fillColor="#2532c4" android:pathData="M102.996,9.75551 C53.5295,9.75551,13.4845,49.8005,13.4845,99.2668 C13.4845,141.667,42.9295,177.001,82.3845,186.423 L102.996,245.607 L123.607,186.423 C163.063,177.001,192.507,141.667,192.507,99.2668 C192.507,49.8005,152.462,9.75551,102.996,9.75551" /> <path android:fillColor="#ffffff" android:pathData="M102.991,20.2913 C146.629,20.2913,181.966,55.6413,181.966,99.2663 C181.966,142.891,146.629,178.241,102.991,178.241 C59.3664,178.241,24.0164,142.891,24.0164,99.2663 C24.0164,55.6413,59.3664,20.2913,102.991,20.2913" /> <path android:fillColor="#2532c4" android:pathData="M149.594,126.76 L103.654,126.76 L57.7143,126.76 C55.8705,126.76,52.9755,126.496,53.1067,123.864 C53.238,121.363,55.4755,119.784,55.4755,119.784 L103.654,91.8776 L151.701,119.784 C151.701,119.784,153.938,121.363,154.202,123.864 C154.333,126.365,151.437,126.76,149.594,126.76 M160.388,118.073 C156.965,114.65,107.208,85.4276,106.682,85.1639 L106.418,85.0326 L106.418,80.0301 L106.55,79.8989 C107.208,79.2401,107.998,78.7139,108.788,78.0551 C112.342,75.1601,116.686,71.6051,116.686,65.0239 C116.686,56.9939,110.236,50.5439,102.205,50.5439 C93.913,50.5439,87.7268,56.4676,87.7268,64.3651 C87.7268,65.5501,88.1217,66.6039,88.648,67.3926 C89.438,68.4464,90.6217,68.8414,92.333,68.7101 C94.8343,68.4464,95.2292,66.0764,95.2292,63.5764 L95.2292,62.9176 C95.3605,60.9426,98.3893,57.9151,102.205,57.9151 C106.156,57.9151,109.446,61.0751,109.446,65.0239 C109.446,68.8414,108.656,70.4214,103.39,73.0539 C100.889,74.2376,99.573,75.5551,99.573,78.7139 L99.7055,85.0326 L99.3105,85.1639 C98.783,85.4276,49.0255,114.65,45.603,118.073 C43.7605,119.915,42.9705,124.918,44.6817,128.998 C45.7355,131.499,47.973,134.395,53.1067,134.395 L152.885,134.395 C158.019,134.395,160.257,131.499,161.309,128.998 C163.02,124.918,162.23,119.915,160.388,118.073" /> </vector>

To be clear the output on my application looks like that :

Do you have any ideas to fix this behaviour ?

Thanks in advance !

Line 1: PI must not start with xml (position:unknown @1:5)

If I leave at the top of the file I get the exception listed in the description. I am using sdk 21

Handle CSS class based colors

Sometimes Tools like Adobe Illustrator, when exporting to SVG, they use a CSS block at the beginning of the generated SVG file to define the colors ass CSS classes like:

<style type="text/css">
    .st0{fill:#FFDC15;}
    .st2{fill:#FFD21A;}
    .st3{fill:#FFD11A;}
</style>

and later on just uses these to style the paths

<path class="st2" d="M96.6,116.9l18.6-14.8h21.1l4.2,35c-7.3,8.3-10.1,9.7-20.5,15.1l-2.7-24.9l-20.8,16.7L76.4,129l-2.7,23.3
            c-10-4.9-13.6-7-21.1-15.3l4.3-35h21.2L96.6,116.9L96.6,116.9L96.6,116.9z"/>
<path class="st2" d="M96.6,143.9L76.4,129l-2.7,23.3c-10-4.9-13.6-7-21.1-15.3l4.3-35h21.2l18.5,14.8l0,0l0,0l18.6-14.8h21.1
            l4.2,35c-7.3,8.3-10.1,9.7-20.5,15.1l-2.7-24.9L96.6,143.9z"/>

right now, the tool just adds a black fill color and ignores the css class colors

Start and end of path are lost

I have this SVG:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   id="svg2"
   viewBox="0 0 128 64.000001"
   height="64"
   width="128">
  <defs
     id="defs4" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     id="layer1">
    <path
       d="m 22.378382,27.039998 5.12,-1.473214 c 8.018572,33.10671 -29.3494695,2.567066 -5.12,1.473214 z m 4.003929,1.276786 -5.369286,0 c -5.376919,5.360965 -3.786394,12.504725 5.28,5.32 z"
       style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:medium;line-height:125%;font-family:'Mono Sans';-inkscape-font-specification:'Dyson Sans Heavy';letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       id="path3341" />
  </g>
</svg>

It looks like this:

And this tool creates this vector drawable from it:

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="128dp"
    android:height="64.000001dp"
    android:viewportWidth="128"
    android:viewportHeight="64.000001">

    <path
        android:fillColor="#000000"
        android:strokeWidth="1"
        android:pathData="M 22.378382,27.039998 l 5.12,-1.473214 c 8.018572,33.10671 -29.3494695,2.567066
-5.12,1.473214 z m 4.003929,1.276786 -5.369286,0 c -5.376919,5.360965
-3.786394,12.504725 5.28,5.32 z" />
</vector>

Which looks like this:

You can see one of the nodes is missing. I'm not sure if this is a problem with Android's SVG rendering, or something with this tool not fudging something that Android doesn't support. Either way it is clearly broken!

Converted SVG has wrong "M/m and Z/z" rel/abs positioning

causes vectordrawable to be rendered wrong (only some svgs)

Add support for basic shapes (rect, circle, line, polygon etc.)

Add support for clipPath

1. Non-correct converting color format (text or rgb to hex-format) 2. After manual color-issue fix it couldn`t be displayed in imageview

SVG file:

<!--?xml version="1.0" standalone="no"?-->

<svg xmlns="http://www.w3.org/2000/svg" width="300.000000pt" height="300.000000pt" viewBox="0 0 300.000000 300.000000" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,300.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">

</g>
<g transform="translate(0.000000,300.000000) scale(0.100000,-0.100000)" fill="#CC59EC" stroke="none">
<path style="position: relative; fill: red;" class="node" id="node2" d="M1430 2384 c-14 -2 -56 -9 -95 -15 -162 -27 -315 -108 -447 -237 -38
-37 -68 -71 -68 -76 0 -5 44 -86 97 -180 53 -94 105 -187 115 -206 77 -143 98
-167 98 -111 0 79 83 211 168 269 101 68 129 72 585 72 l409 0 -27 48 c-48 82
-134 181 -213 244 -96 76 -254 154 -353 173 -81 15 -230 26 -269 19z"></path>
<path fill="#5eec59" style="position: relative; fill: rgb(94, 236, 89);" class="node" id="node3" d="M723 1913 c-52 -100 -80 -195 -92 -310 -36 -348 123 -668 420 -848
88 -53 255 -115 311 -115 l37 0 87 148 c48 81 113 191 146 244 32 54 58 102
58 107 0 6 -19 3 -42 -6 -58 -22 -207 -22 -268 1 -65 24 -130 71 -171 125 -19
25 -93 147 -164 271 -203 355 -265 460 -273 460 -5 0 -26 -35 -49 -77z"></path>
<path fill="#597bec" style="position: relative; fill: rgb(89, 123, 236);" class="node" id="node4" d="M1402 1818 c-78 -29 -148 -88 -187 -159 -27 -49 -30 -62 -30 -149 0
-115 21 -167 102 -247 64 -63 137 -93 227 -93 96 0 153 21 223 84 85 77 108
132 108 256 0 87 -3 100 -29 148 -82 147 -260 216 -414 160z"></path>
<path fill="#ffe414" style="position: relative; fill: rgb(255, 228, 20);" class="node" id="node5" d="M1782 1788 c109 -105 153 -261 111 -393 -11 -33 -77 -159 -148 -280
-253 -436 -275 -474 -275 -481 0 -14 197 6 270 27 149 43 257 105 368 213 112
107 190 232 235 371 51 156 49 371 -4 533 l-21 62 -295 0 -296 0 55 -52z"></path>
</g>
</svg>

Vector drawable:

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="300.000000dp"
    android:height="300.000000dp"
    android:viewportWidth="300.000000"
    android:viewportHeight="300.000000">

    <group
            android:translateY="300.000000">
        <path
            android:fillColor="red"
            android:pathData="M1430 2384 c-14 -2 -56 -9 -95 -15 -162 -27 -315 -108 -447 -237 -38 -37 -68 -71
-68 -76 0 -5 44 -86 97 -180 53 -94 105 -187 115 -206 77 -143 98 -167 98 -111 0
79 83 211 168 269 101 68 129 72 585 72 l409 0 -27 48 c-48 82 -134 181 -213 244
-96 76 -254 154 -353 173 -81 15 -230 26 -269 19z" />
        <path
            android:fillColor="rgb(94, 236, 89)"
            android:pathData="M723 1913 c-52 -100 -80 -195 -92 -310 -36 -348 123 -668 420 -848 88 -53 255 -115
311 -115 l37 0 87 148 c48 81 113 191 146 244 32 54 58 102 58 107 0 6 -19 3 -42
-6 -58 -22 -207 -22 -268 1 -65 24 -130 71 -171 125 -19 25 -93 147 -164 271 -203
355 -265 460 -273 460 -5 0 -26 -35 -49 -77z" />
        <path
            android:fillColor="rgb(89, 123, 236)"
            android:pathData="M1402 1818 c-78 -29 -148 -88 -187 -159 -27 -49 -30 -62 -30 -149 0 -115 21 -167
102 -247 64 -63 137 -93 227 -93 96 0 153 21 223 84 85 77 108 132 108 256 0 87 -3
100 -29 148 -82 147 -260 216 -414 160z" />
        <path
            android:fillColor="rgb(255, 228, 20)"
            android:pathData="M1782 1788 c109 -105 153 -261 111 -393 -11 -33 -77 -159 -148 -280 -253 -436 -275
-474 -275 -481 0 -14 197 6 270 27 149 43 257 105 368 213 112 107 190 232 235 371
51 156 49 371 -4 533 l-21 62 -295 0 -296 0 55 -52z" />
    </group>
</vector>

Svg becomes blank after conversion

Here's my original SVG exported via Sketch

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 3.8.2 (29753) - http://www.bohemiancoding.com/sketch -->
    <title>vector/icn-list-09f</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Asset" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="vector/icn-list-09f">
            <g id="icon" transform="translate(24.000000, 24.000000) scale(-1, 1) translate(-24.000000, -24.000000) ">
                <polygon id="background" points="0 0 48 0 48 48 0 48"></polygon>
                <path d="M6,28 L14,28 L14,20 L6,20 L6,28 L6,28 Z M6,38 L14,38 L14,30 L6,30 L6,38 L6,38 Z M6,18 L14,18 L14,10 L6,10 L6,18 L6,18 Z M16,28 L42,28 L42,20 L16,20 L16,28 L16,28 Z M16,38 L42,38 L42,30 L16,30 L16,38 L16,38 Z M16,10 L16,18 L42,18 L42,10 L16,10 L16,10 Z" id="Shape" fill="#0099FF"></path>
            </g>
        </g>
    </g>
</svg>

This is the XML after conversion

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="48dp"
        android:height="48dp"
        android:viewportWidth="48"
        android:viewportHeight="48">

    <group>
        <group>
            <group
                android:translateX="-24.000000"
                android:translateY="-24.000000"
                android:scaleX="-1">
                <path
                    android:strokeWidth="1"
                    android:pathData="M 0 0 L 48 0 L 48 48 L 0 48 Z" />
                <path
                    android:fillColor="#0099FF"
                    android:strokeWidth="1"
                    android:pathData="M6,28 L14,28 L14,20 L6,20 L6,28 L6,28 Z M6,38 L14,38 L14,30 L6,30 L6,38 L6,38 Z
M6,18 L14,18 L14,10 L6,10 L6,18 L6,18 Z M16,28 L42,28 L42,20 L16,20 L16,28
L16,28 Z M16,38 L42,38 L42,30 L16,30 L16,38 L16,38 Z M16,10 L16,18 L42,18 L42,10
L16,10 L16,10 Z" />
            </group>
        </group>
    </group>
</vector>

However, the generated asset becomes a blank image

converted files are truncated

I tried to convert some files, but they failed to be converted well.
It wrote to me :

Warning: transforms on path are not supported, use option Bake transforms into path

I tried to enable it, but then it didn't convert at all.

Attached a sample SVG file.

google_plus.zip

What can I do to fix it? Is there anything I should tell the designer about what to do on Illustrator ?

No shape elements found in svg.

Trying to convert my svg file into xml drawable but getting this error. Already tried with build in android studio converter but got "premature end of file" error. Could there be something wrong with my svg file?

android:strokeWidth="1" missing in all paths

It seems no matter what SVG I try and convert, it misses out this one key tag:

android:strokeWidth="1"

And due to this, the produced SVG is extremely 'thin'. Not sure if it's the SVG or the tool, but either way it should perhaps put this into each path automatically perhaps? I've uploaded a sample file.

taskCheckmarkNormal.svg.zip

Add support for <use> tag

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use

Incorrect Output of Hollow Path

Have a look at this simple SVG:

?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   id="svg2367"
   height="745"
   width="745"
   version="1.0">
  <path
     id="path96"
     d="M 355.21871,93.556599 C 752.92565,85.659375 747.15567,748.84406 452.37064,739.7049 4.6716594,741.05072 4.3263198,102.72878 355.21871,93.556599 Z M 189.41544,361.6496 c 96.89558,-9.6305 273.82424,-24.26663 370.54595,-35.511 L 432.78971,606.03793"
     style="fill:#ec1b2d;fill-rule:evenodd;stroke:none" />
</svg>

When transforming this, into an Android VectorDrawable, the white triangle in the middle is lost.

Is this a bug in your awesome tool or a limitation of VectorDrawables?

Add NodeJS support

automate svg2android from CLI

Android's PathParser does not like mathematical notations

I noticed some crashes when using this tool to convert SVGs to vector drawables, usually this:
android.util.PathParser$PathDataNode.addCommand - java.lang.ArrayIndexOutOfBoundsException: length=2; index=2

According to this article Android Vector Drawable crash Androids pathparser doesn't like the e-

And i found a lot of occasions of this symbol in my generated vector drawables

NumberFormatException: Invalid float for certain SVGs

Some SVGs remove spaces between floating point numbers that start with a "." (eg "1.11.89" is two floats, 1.11 and .89). Android does not handle this. It can be fixed by adding spaces (eg "1.11 .89").

Example https://github.com/google/material-design-icons/blob/master/av/svg/production/ic_play_shopping_bag_24px.svg

See https://stackoverflow.com/questions/27561170/vectordrawable-causes-numberformatexception