CODEWITHSUNDEEP
androidsvgphotoshopadobe-illustratorgimp
cv14
cv14

Reputation: 77

Image to Svg-path

I am trying to create svg paths from a png file using gimp and following this tutorial : http://www.useragentman.com/blog/2013/04/26/how-to-create-svg-paths-easily-using-the-gimp/

I am trying to use this https://github.com/ViksaaSkool/AwesomeSplash as a splash screen for an android app but with a different image. I can't seem to get the right path for the image using the tutorial above.

I tried to display the svg path from the tutorial website, which is the path for the cut out rectangle TV, and this is what I get

Above, the yellow color should be filling up the small black square but its somehow creating a border outside of it and filling that up. Using the splash screen from ViksaaSkool ( https://github.com/ViksaaSkool/AwesomeSplash) I am trying to display the letters U 5 + (underlined) in place of the android logo.

Upvotes: 1

Views: 2963

Answers (1)

moralejaSinCuentoNiProverbio
moralejaSinCuentoNiProverbio

Reputation: 987

cv14. I use Gimp because is free although is pretty hard to use.

When you export a path you the resulting height and width match with the image size. I know, it is an awful feature of Gimp.

I recommend you to use the paths tool to draw curves because you will control the direction. You could get undesirables results when you fill a shape. Could you check this site out?: https://www.sitepoint.com/understanding-svg-fill-rule-property/

As well as I recommend you split the image in as many paths as possible (All paths will be in the same svg). So you will have better control of what happen.

When you export, you only can select one path to convert to a SVG file. I know, it is an awful feature of Gimp. But you can merge all SVG file in one using some plain text editor.

Coming back to the svg tutorial: Using Gimp: Try to check what you have in the path section before export the path.

If you follow the tutorial omit the part when the author inverts the selection, because you are selecting all less the tv windows. When you invert the selection you have 2 draws in the same path.

The frame

M 495.00,0.00 C 495.00,0.00 495.00,417.00 495.00,417.00 495.00,417.00 0.00,417.00 0.00,417.00 0.00,417.00 0.00,0.00 0.00,0.00 0.00,0.00 495.00,0.00 495.00,0.00 Z

And the tv windows:

M 81.18,219.39 C 75.28,224.66 73.26,233.55 71.61,241.00 68.81,256.26 68.66,271.70 71.61,287.00 72.76,294.37 74.47,301.98 79.68,307.70 85.29,313.85 91.52,314.81 99.00,316.73 99.00,316.73 126.00,321.96 126.00,321.96 126.00,321.96 134.00,321.96 134.00,321.96 134.00,321.96 144.00,323.00 144.00,323.00 156.04,323.14 168.13,322.58 180.00,320.39 187.27,319.04 193.58,317.17 198.20,310.91 202.27,305.40 200.54,300.30 201.28,294.00 201.28,294.00 202.00,244.00 202.00,244.00 201.98,234.15 201.61,228.06 192.91,221.85 187.58,218.04 176.56,216.51 170.00,215.41 153.07,212.57 126.99,210.70 110.00,212.28 101.11,213.56 88.05,213.25 81.18,219.39 Z

So coming back with what you would want to do: In Gimp: you would create a new Image You should Draw U 5 + (underlined). and using the path tool you should Draw your curves in clockwise direction. You should Merge all SVG outcoming. And finally, you should import the svg in Android.

Upvotes: 1

Related Questions