How go get SVG path for an image?
I recently ran into a situation where I wanted an image’s color to be changed dynamically according to the theme selected by the end user. Here is how I solved it using react-native-svg
react-native-svg has the amazing option to render an image by specifying the path for a specific image. The example described in the react-native-svg github looks something like this —
<Svg height="100" width="100">
<Path
d="M25 10 L98 65 L70 25 L16 77 L11 30 L0 4 L90 50 L50 10 L11 22 L77 95 L20 25"
fill="none"
stroke="red"
/>
</Svg>That’s just so simple and easy that should be pretty straight forward, but then the reality hits you about the Path, what are those numbers? How do I get them? How will that represent an image?
That is when this article will come in handy.
There is this photo editing tool called GIMP which can be used to get the path data instead of us manually defining the path data for our image. There are many other tools but I just went with this one, there’s no specific reason to do so.
If you are wondering what is “path data” follow this link to get more in-depth details — https://www.w3.org/TR/SVG/paths.html
Here is the download link for the tool that I’m talking about — https://www.gimp.org/downloads/
Here is an example image for which I’ll try to get the path data from GIMP —
So if you see the image, you can already imagine that the path data is going to be a bit complicated.
Getting path data from GIMP
Once you have downloaded and installed the GIMP,
- Import the image which you want the SVG path for —
2. Click on the fuzzy select tool from the left toolbar.
3. Now select the image for which you need the path for. Since I have to multiple selection in my image I used Shift key to select both the part of the image ( Partially finished circle + dot )
4. Once you have made the selection just click on Select and click on To Path
5. Once you have done that, you can click on Paths in the bottom right corner of the right toolbar. You should see a Selection something like below —
6. Now right click on the selection and click on Export Path —
7. And save it where ever necessary in .txt format. For my example I’m just saving it on the desktop.
8. Now if you open the file which you saved. You should find the path for you image which would look something like this —
9. Just copy the value of thed= prop from the obtained text file and paste it in the d= prop of the Path of the react-native-svg component and it would look something like this —
<Svg
width="100"
height="100"
viewBox="0 0 220 210"><Path
fill="black"
stroke="black"
stroke-width="1"
d="M 83.00,0.42
C 47.77,5.74 18.16,26.76 5.69,61.00
-12.66,111.42 12.37,168.57 64.00,186.00
71.64,188.57 80.93,190.90 89.00,191.00
102.56,191.15 125.95,190.18 136.98,181.59
149.70,171.68 145.00,151.76 129.00,148.68
123.16,147.56 117.48,150.28 112.00,151.98
106.99,153.52 102.22,154.15 97.00,154.49
65.05,156.53 36.17,126.27 36.18,95.00
36.18,72.47 51.00,51.33 71.00,41.78
77.14,38.85 88.22,36.18 95.00,36.18
127.16,36.17 152.49,62.77 154.49,94.00
155.34,107.41 148.34,118.09 148.34,126.00
148.34,134.55 154.44,142.48 163.00,143.79
179.26,146.27 184.00,135.22 187.71,122.00
189.39,116.01 190.92,108.20 191.00,102.00
191.00,102.00 191.00,89.00 191.00,89.00
190.90,80.63 188.39,70.90 185.66,63.00
170.77,19.96 127.65,-5.03 83.00,0.42 Z
M 174.00,156.52
C 169.34,157.77 166.66,158.66 163.04,162.11
146.86,177.50 160.56,204.89 184.00,199.47
197.79,196.28 204.39,179.08 197.47,167.00
192.68,158.66 183.22,155.09 174.00,156.52 Z" /></Svg>
10. Now with the fill prop of react-native-svg you can provide dynamic colors to the image and change it accordingly to your requirement.
Thanks to the following link —
https://www.useragentman.com/blog/2013/04/26/how-to-create-svg-paths-easily-using-the-gimp/
I have showed an example for single color image, if you play around we can do the same for image with multiple colors and so you can create an image which would change colors according to your theme requirement.
Hope this helps you with your development.
Cheers!
