How to export and SVG with only one path?
It’s fairly simple but I found a little difficult to get totally streamlined and right. How to create a nice SVG icon for the images in the sketch files. Ok, so you can just export the image as an SVG but I really wanted something more standardized, whereby only one path was exported. Herein lies the problem. How to export and SVG with only one path?
- Make sure the image is formatted correctly. All images for icons should have the same dimensions of 24 x 24px for consistency. Moreover, the images should be in black and white, with a clear boundary between what is the icon and what is the background.
- Export the image as an image .png with Sketch at 10x. I want all my paths within a 24px box. so the image should be within a 240px box.
- Import your new .png file into Gimp.
- Using the magic wand select the black areas. If there are separate entities within the icon, press the shift key.
- Go to the “Select” dropdown menu and run the “ToPath” function at the bottom.
4. Next, scale the image back down to 24px. Click “Image” and “Scale Image”. Inside the popup change the 240px width to 24px. The height should auto adjust and click “Scale”.
5. Finally, export the path to an SVG. Right-click on the patch image in the layers viewfinder. And at the base, there is the function, Export Path.
Now we are all done. Simply, make sure the image is two-tone and in the correct size. Export as a .png at 10x the size you want, and import into gimp. Select the dark areas you want to be the path using a magic wand. Create the path, and scale down the image. Lastly, export the path. Now you can open the file in a text editor and copy out the path.