a-student / svgtovectordrawableconverter Goto Github PK
View Code? Open in Web Editor NEWBatch converter of SVG images to Android vector drawable XML resource files. Online version of the converter is here:
Home Page: https://svg2vector.com
Batch converter of SVG images to Android vector drawable XML resource files. Online version of the converter is here:
Home Page: https://svg2vector.com
Checking for the latest converter version (specify --no-update-check to disable)... Error :(
It still converts the svg to xml though. Is the error false alarm?
I used your tool for converting a svg file (attached) and it converts incorrectly. Do you know what could be the cause?
I don't really know how to code as I am using this tool as a designer to handle this kind of files but I wanna ask it would be nice if we could have a reverse conversion feature back to SVG, and ability to do it by bulk.
And also ability to detect automatically what Android version or type of vector drawable would be nice so other that don't know how to mess with it don't have to worry about that
I'm pretty sure this feature is a no brainer to implement. Thanks
<svg width="108" height="108" viewBox="0 0 108 108" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>music-track-lp</title>
<desc>Created using Figma</desc>
<g id="Canvas" transform="translate(4462 -1120)">
<g id="music-track-lp">
<use xlink:href="#path0_fill" transform="translate(-4462 1120)" fill="url(#paint0_angular)"/>
</g>
</g>
<defs>
<radialGradient id="paint0_angular" cx="0.5" cy="0.5" r="0.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(6.61309e-15 108 -108 6.61309e-15 108 -6.61309e-15)">
<stop offset="0.704607"/>
<stop offset="0.816262" stop-color="#292929"/>
</radialGradient>
<path id="path0_fill" d="M 108 54C 108 83.8234 83.8234 108 54 108C 24.1766 108 0 83.8234 0 54C 0 24.1766 24.1766 0 54 0C 83.8234 0 108 24.1766 108 54Z"/>
</defs>
</svg>
Hello, converter doen't work with this svg file
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="#0B1F35" d="M1.843 8.207L7.5 13.864a4 4 0 0 0 5.657-5.657L6.793 1.843A3 3 0 0 0 2.55 6.086l4.95 4.95a2 2 0 0 0 2.828-2.829L7.5 5.379l-.707.707 2.828 2.828a1 1 0 0 1-1.414 1.414l-4.95-4.95A2 2 0 0 1 6.086 2.55l6.364 6.364a3 3 0 0 1-4.243 4.243L2.55 7.5l-.707.707z"/></svg>
Hi,
On some Android versions, the app crashes when trying to load an xml which contains scientific notations. (e-)
See https://code.google.com/p/android/issues/detail?id=78162
Would it possible to convert like this : 5e-4 to 0.0005 in the generated xml ??
Here is a svg file to test :
test.svg.zip
while upload a svg file it is showing network error
I have a simple SVG created with Inkscape that contains some text.
Android Studio is not able to convert such SVGs to VD, because text is not supported. This tool however nearly did work. Only the text is not correctly aligned in the resulting image (in my SVG I have the text on a different layer. Maybe the layer itself is translated a litte).
It works well when converting the text to a path in Inkscape before running SVG2VD. So for now the workaround is to convert text in Inkscape to plain paths.
So possible fixes are:
(1) Convert text to plain paths as some pre-processing step.
(2) Correctly set the position of the text elements in VD format. Note that in SVG groups and layers can have offsets. Maybe this can be handled by first reducing all layers to only one and ungrouping of elements.
In some Android version (es 5.0.2) scientific notation inside the xml crashes the app (maybe the locale of the app can be involved, the app were tested in italian)
My testers signaled a lot of crashes, I've found a lot of this exceptions inside Crashlytics
Fatal Exception: java.lang.ArrayIndexOutOfBoundsException: length=17; index=17 at android.util.PathParser$PathDataNode.addCommand(PathParser.java:370) at android.util.PathParser$PathDataNode.nodesToPath(PathParser.java:260) at android.graphics.drawable.VectorDrawable$VPath.toPath(VectorDrawable.java:1265) at android.graphics.drawable.VectorDrawable$VPathRenderer.drawPath(VectorDrawable.java:950) at android.graphics.drawable.VectorDrawable$VPathRenderer.drawGroupTree(VectorDrawable.java:931) at android.graphics.drawable.VectorDrawable$VPathRenderer.draw(VectorDrawable.java:938) at android.graphics.drawable.VectorDrawable$VectorDrawableState.updateCachedBitmap(VectorDrawable.java:705) at android.graphics.drawable.VectorDrawable.draw(VectorDrawable.java:280) at android.widget.ImageView.onDraw(ImageView.java:1166)
the generated XML contains some values expressed in scientific notation (eg. -5e-4 ). replacing them with stanard notation the app works perfectly
reference:
https://code.google.com/p/android/issues/detail?id=78162
http://stackoverflow.com/questions/33737192/android-vector-drawable-crash
I have installed inkscape on Mac OS X via home-brew. apt-get was not an option for me. Inkscape is definitely installed, but when I run
mono ~/Desktop/SvgToVectorDrawableConverter_v1/svg2vd.exe --fix-fill-type -i \*
I get
Inkscape app was not found in the path '/usr/bin/inkscape'. Please download it from https://inkscape.org/en/download and install it on your system.
inkscape is in /usr/local/bin
not /usr/bin
I have to modify the project SvgToVectorDrawableConverter to create a custom output layout xml file:
can anyone help me to do this?
thanks!!!
Hello,
Initially I was unable to import vectors directly to Android Studio, however after seeing your plugin, I was able to use vectors. Thanks for that. However, recently the images I converted, weren't being displayed properly in AS. the XML files within "car type" are not working, however the XML files within check are working. Any idea why this is happening? Any help would be appreciated.
car type.zip
check.zip
I've been trying to convert the emojis from the Noto font and some conversions are missing some details. For instance this one is missing the two eyes. Another one is emoji_u1f383.svg at the same site: the green stem is missing. I am not sure why; all the paths seem correctly converted.
It would be nice for batch converting to have an additional command line parameter (or parameters) that will set in generated vector drawable android:width
and android:height
values (currently it is tied to the svg viewport height and width)
Hello i have this code
<g id="RBOOTLID"> <path class="st0" d="M539.7,594.7l-193.2-69.5l1.9,747.7l181-68.2C529.5,1204.6,456.4,846.5,539.7,594.7"/> </g>
But after convert to vector drawable is does not comes with that "id" param. so this is missing.
Please reply me for solution of this.
Thank you.
Hello,
First, thanks for your great webtool, I can use it a lot and converted a lot of images to android drawable. However, for this case, I think the result is wrong, I have no idea but could you check this?
I was trying to convert this image.
<?xml version="1.0" ?><svg height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><title/><g data-name="2" id="_2"><path d="M28,24a2,2,0,0,1-2-2V13a10,10,0,0,0-9-9.95V1H15V3.05A10,10,0,0,0,6,13v9a2,2,0,0,1-2,2H3.5v2h9.68a3,3,0,1,0,5.64,0H28.5V24ZM8,22V13a8,8,0,0,1,16,0v9a3.91,3.91,0,0,0,.56,2H7.44A3.91,3.91,0,0,0,8,22Zm9,5a1,1,0,1,1-1-1A1,1,0,0,1,17,27Z" id="bell_ring_notification_alarm"/></g></svg>
What I received
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:viewportWidth="32"
android:viewportHeight="32"
android:width="32dp"
android:height="32dp">
<path
android:pathData="M28 24"
android:fillColor="#000000" />
</vector>
Bellow is the screenshot on my browser
Thank you
http://a-student.github.io/SvgToVectorDrawableConverter.Web/ doesn't convert opacity if it declared in group sometimes. See attached example.
I may be missing something simple here, but I am trying to install on Linux - Fedora 28 and the source file does not contain a makefile, exe, or any build instructions.
What am I missing here that I need to do to get this app running? I have a lot of SVG files to convert and would rather use this over the web version or Android Studio.
The svg to vector conversion looks fine in preview, but on loading on device same issues, full icon got colored black
When converting the SVG to XML the font changes during the the conversion process. I have opened up the exported SVG in another application (Illustrator) and the image looks fine. After the conversion I place the image in my layout and the it is displayed with a different font. The original was created using Roboto Regular.
Converting the font to outline fixes this, but that is not an ideal option for the number of elements that need to be converted.
The flag of Micronesia, taken from https://github.com/maxyz/iso-country-flags-svg-collection/blob/master/svg/country-4x3/fm.svg?short_path=4c61732, gives an incorrect result:
It should look like here: the rightmost star is miss-aligned.
The tool, which I run with --fix-fill-type
(though it doesn't seem to matter for this SVG), does not report any warnings or errors.
Software versions:
$ inkscape --version
Inkscape 0.92.0 r15299
$ mono --version
Mono JIT compiler version 4.6.2 (Stable 4.6.2.16/ac9e222 Tue Jan 3 11:48:26 UTC 2017)
Copyright (C) 2002-2014 Novell, Inc, Xamarin Inc and Contributors. www.mono-project.com
TLS: __thread
SIGSEGV: altstack
Notifications: epoll
Architecture: amd64
Disabled: none
Misc: softdebug
LLVM: supported, not enabled.
GC: sgen
Thanks for the great tool, I was pleasantly surprised to find that things like the flag of Mexico are converted perfectly.
I did some more testing and found that these flags also have some issues (which do not get warnings):
--fix-fill-type
(over 15 minutes) (technically not a bug and perhaps not fixable?)I am trying to convert the image from svg to vector drawable I am getting network error.
I was trying to convert the logo of the superpowered sdk (animation2.svg, available here) but it failed with the message stated in the title.
Is it even possible to convert svg animations to android drawables?
Greetings,
vat
Export the svg asset from Sketch via Export and choosing "SVG" type. Then run converter from the command line:
$ ls
asset.svg svg2vd.exe*
$ mono svg2vd.exe -i ./asset.svg
.
[Error] asset.svg: Could not find file "/Users/Yury/Downloads/svg-assets/BlankVectorDrawable.xml".
Online converter converts the same file fine.
Mono version:
$ mono --version
Mono JIT compiler version 4.0.4 ((detached/d481017 Mon Sep 28 17:32:19 EDT 2015)
Copyright (C) 2002-2014 Novell, Inc, Xamarin Inc and Contributors. www.mono-project.com
TLS: normal
SIGSEGV: altstack
Notification: kqueue
Architecture: x86
Disabled: none
Misc: softdebug
LLVM: yes(3.6.0svn-mono-(detached/a173357)
GC: sgen
OS - OS X Yosemite 10.10.5
SVG file is attached (SVG is not supported for attaching so had to rename it to PNG)
I think thatbrew install caskformula/caskformula/inkscape
is the recommended way of installing inkscape.
I get "Warning: Use caskroom/cask/inkscape instead of deprecated homebrew/gui/inkscape" if I do it the way you have listed in your README.md.
When I try to convert this image, it removes Google play's icon from it.
At the moment only the output directory can be changed, but not the name of the exported file. This could be improved easily I think.
SVG tested fine using web converter http://a-student.github.io/SvgToVectorDrawableConverter.Web/
But when I use release 1.3
SvgToVectorDrawableConverter_v1.3$ mono svg2vd.exe --no-update-check -i atom.svg
[Error] atom.svg: Document element did not appear. file:///xxx/SvgToVectorDrawableConverter_v1.3/atom.svg Line 1, position 1.
SVG sample from : https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/atom.svg
Any thought? I'm using Ubuntu 14.04
The conversion for all elements done, apart from the background colors (as there is specific shade of colours in the image, that is required). I am quite new to this area of vector drawables. Not sure if the background is/ isn't supposed to be mapped on to the vector drawable?
Thnx,
Hi I install mono and inkscape, donwload code but can't run svg2vd.exe at mac os.
I got message svg2vd.exe: No such file or directory.
I try to convert access.svg into VectorDrawable but it fails to do that. Problem that all paths in this svg converts to VectorDrawable just partially.
For example:
<path class="cls-1" d="M6.4,19.28a2,2,0,0,1-.5-.07V39.5H31.65a1.46,1.46,0,0,0,1.45-1.45V19.28ZM20.15,34.61H18.89a.66.66,0,0,1,0-1.32h1.26a.66.66,0,1,1,0,1.32Z"/>
converts into
<path android:pathData="M6.4 19.28" android:fillColor="#36b6fa" />
It seems that the tool fails to parse elliptical-arc command with some specific parameters.
Hello,
can you specify under what licence source code is released? I couldn't find that information.
To get SVG file I use OpenstreetMap.org by clicking the 'Share' icon at the right hand side of the webpage. I tryed to download SVG from extract.bbbike.org. When I use converter (offline or online version) I get error "Reference to symbol are not supported". How can I use openstreetmap to get vector drawable XML file ? What do you think it would be better to get XML file from OSM ?
Android API Level 24 supports gradients.
https://blog.stylingandroid.com/vectordrawable-gradients-part1/
even running with ** --lib ApiLevel24 ** results in output "[Warnings(s)] icon.svg: Met unsupported element(s): linearGradient."
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.