Leverage AI on your app by creating stunning SVG components
Have you ever needed customized images in SVG for your app/website but doesn't have the time/budget for hiring a designer? Why not using AI for that?
Here's an example of an app I'm building right now, making use of Midjourney in order to create logos and 2D characters:
You can check the app's entire code here (please give it a star ⭐).
1- Start by creating an image
Go to your favorite AI image generator and draw a picture. By intelligent prompting you can create 2D characters, logos and anything else in any style you want. In this case I'm using Midjourney.
2- Let's clean it up
Because these AI apps work with raster, we need to convert them to SVG to use in our apps. We can start by cleaning the background. If you don't have apps like Photoshop, you can use this website, as it works just fine.
Result:
3- Now we convert it to SVG
Once clean we can convert our character to SVG. I recommend using this website, as it works really well. I can't post the result on Medium because it won't accept SVGs, but the result is just like the picture about, only it's SVG.
4- Let's code
If you know how to use SVGs on your app you can just skip the rest of the tutorial. I'd like to show, however, how I use SVGs in react-native. Might be useful.
In order to use SVGs in react-native, the most common way is by using react-native-svg. If you use Expo, it gets even easier. Link.
In the case of this app, I opted for using Skia for react-native. It was just a personal choice for this app, because I wanted to draw charts, progress bars and other stuff. Link.
The component I created on my app for plotting SVG characters is the following.
import { View } from 'react-native'
import { shredders } from '@styles'
import { Canvas, Path, rect, FitBox } from '@shopify/react-native-skia'
import { ShredderProps } from './Shredder.types'
const Shredder: React.FC<Partial<ShredderProps>> = ({ name = 'starter', size = 24 }) => {
const pairs = shredders[name] || []
return (
<View style={{ height: size, width: size }}>
<Canvas style={{ flex: 1 }}>
<FitBox
src={rect(0, 0, 300, 300)}
dst={rect(0, 0, size, size)}
>
{pairs.map((pair: string, idx: number) => {
if (idx % 2 === 0) {
return (
<Path
key={idx}
path={pairs[idx + 1]}
color={pair}
/>
)
}
})}
</FitBox>
</Canvas>
</View>
)
}
export default ShredderBecause of how Skia works on react-native, you need to define a <Canvas> for plotting your component, and then a <FitBox> just for creating a perfect rectangle easier. We just need then to map all the <Path> from our SVG.
To be honest we don't need our SVG to contain only <Path> components, but I like to build it that way in order to make things easier. You may have noticed that my characters come from a file I called shredders. This file contain the data for each character I use in my app, that the component will use to plot. Taking a looking at it, you can notice that the file is only an object with arrays for each characters, organized in colors and paths, that I use to plot inside the component.
5- Leverage chatGPT for SVG conversions
One thing we can use chatGPT is for converting SVG components. For example, in my component I decided to work only with <path>, but what if an SVG you generated have components like <circle> and <rect>? We can use chatGPT to convert them.
Here's an SVG I use in my app:
Look at its code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0.00 0.00 300.00 300.00">
<g stroke-width="2.00" fill="none" stroke-linecap="butt">
<path stroke="#7b6d62" vector-effect="non-scaling-stroke" d="
M 190.06 12.79
Q 188.50 13.45 188.11 12.52"
/>
<path stroke="#7b6d62" vector-effect="non-scaling-stroke" d="
M 192.31 39.61
L 192.22 52.28"
/>
<path stroke="#7b6d62" vector-effect="non-scaling-stroke" d="
M 63.53 264.55
Q 64.43 264.22 63.75 262.50
Q 63.61 262.16 63.01 262.26"
/>
<path stroke="#7b6d62" vector-effect="non-scaling-stroke" d="
M 88.63 81.09
L 88.89 55.59"
/>
<path stroke="#7b6d62" vector-effect="non-scaling-stroke" d="
M 45.37 39.84
Q 44.04 61.11 45.34 81.93"
/>
<path stroke="#7b6d62" vector-effect="non-scaling-stroke" d="
M 88.48 269.21
Q 95.63 272.56 104.01 274.72
C 142.23 284.57 179.07 283.29 217.06 272.53
C 232.46 268.16 243.12 258.62 249.53 243.97
C 261.05 217.66 256.68 184.29 239.19 161.66
C 227.29 146.26 209.69 135.49 191.30 129.30"
/>
<path stroke="#85827d" vector-effect="non-scaling-stroke" d="
M 191.30 129.30
C 175.60 125.01 159.96 123.54 143.81 125.32
Q 131.99 126.62 127.99 127.69
C 89.27 138.11 59.78 169.85 58.10 210.52
C 57.14 233.82 66.38 258.64 88.48 269.21"
/>
<path stroke="#d8d3ca" vector-effect="non-scaling-stroke" d="
M 191.30 129.30
Q 191.50 130.96 188.98 130.97
C 174.53 131.03 159.75 129.79 145.69 133.95
C 122.52 140.81 102.77 152.41 87.74 171.58
Q 84.42 175.81 81.79 181.58
C 76.92 192.26 72.65 202.27 72.66 211.81
Q 72.66 222.29 75.34 233.57
C 77.79 243.87 83.14 253.89 88.24 263.53
Q 89.73 266.35 88.48 269.21"
/>
<path stroke="#7b6d62" vector-effect="non-scaling-stroke" d="
M 213.3959 218.1263
A 15.62 15.39 92.4 0 0 229.4265 203.1645
A 15.62 15.39 92.4 0 0 214.7041 186.9137
A 15.62 15.39 92.4 0 0 198.6735 201.8755
A 15.62 15.39 92.4 0 0 213.3959 218.1263"
/>
<path stroke="#7b6d62" vector-effect="non-scaling-stroke" d="
M 112.68 202.65
A 15.60 15.60 0.0 0 0 97.08 187.05
A 15.60 15.60 0.0 0 0 81.48 202.65
A 15.60 15.60 0.0 0 0 97.08 218.25
A 15.60 15.60 0.0 0 0 112.68 202.65"
/>
<path stroke="#7b6d62" vector-effect="non-scaling-stroke" d="
M 142.05 213.07
Q 141.61 210.72 139.28 210.25
A 1.82 1.82 0.0 0 0 137.14 212.38
C 138.62 219.98 147.03 223.03 152.11 216.17
A 0.48 0.48 0.0 0 1 152.88 216.16
C 160.94 226.74 173.55 213.32 167.22 210.13
A 0.97 0.97 0.0 0 0 165.91 210.56
C 164.49 213.35 162.44 216.52 158.68 214.88
C 157.05 214.16 156.46 212.13 155.70 210.58
A 1.03 1.02 77.0 0 0 154.78 210.00
L 152.04 210.00
A 0.85 0.85 0.0 0 0 151.27 210.49
Q 149.70 213.97 146.07 215.20
Q 145.59 215.37 145.13 215.14
L 142.74 213.97
Q 142.17 213.69 142.05 213.07"
/>
</g>
<path fill="#cebeaf" d="
M 190.06 12.79
Q 188.50 13.45 188.11 12.52
Q 188.57 11.92 189.00 11.95
Q 189.65 11.99 190.06 12.79
Z"
/>
<path fill="#271b15" d="
M 188.11 12.52
Q 188.50 13.45 190.06 12.79
Q 191.78 15.14 191.75 16.25
Q 191.47 28.17 192.31 39.61
L 192.22 52.28
C 189.46 68.13 168.25 72.23 155.23 70.93
C 148.32 70.24 138.44 69.52 132.89 73.95
C 125.45 79.89 126.79 88.68 130.97 96.69
C 135.86 106.05 146.60 112.16 156.75 113.27
C 169.80 114.69 181.81 116.00 193.49 119.80
C 222.32 129.18 246.26 147.68 257.72 176.26
C 268.39 202.86 268.24 230.92 253.59 255.89
C 252.11 258.42 250.42 261.50 250.09 264.30
C 248.56 277.09 242.50 280.72 230.05 277.68
A 1.75 1.70 -45.9 0 0 229.07 277.71
C 208.43 284.41 189.63 290.01 167.69 290.81
Q 142.13 291.73 127.68 289.87
C 112.63 287.93 102.10 284.14 89.29 279.84
C 85.19 278.47 81.87 278.50 77.77 278.92
C 67.53 279.96 65.55 272.77 63.53 264.55
Q 64.43 264.22 63.75 262.50
Q 63.61 262.16 63.01 262.26
C 63.05 259.31 59.24 253.63 57.71 250.86
Q 48.18 233.63 48.25 214.48
C 48.34 193.17 58.96 169.59 71.38 152.67
C 83.19 136.58 100.80 125.78 119.84 120.14
Q 126.44 118.19 132.59 116.09
A 1.74 1.74 0.0 0 0 133.36 113.32
Q 130.35 109.78 127.17 106.83
C 121.69 101.73 119.53 89.09 119.53 81.86
Q 119.54 72.08 119.28 62.31
Q 119.25 61.09 120.12 58.75
C 125.26 44.99 145.34 45.00 157.42 45.41
Q 162.89 45.60 166.01 44.75
C 175.79 42.10 185.93 34.44 186.65 23.43
Q 187.02 17.85 188.11 12.52
Z
M 88.48 269.21
Q 95.63 272.56 104.01 274.72
C 142.23 284.57 179.07 283.29 217.06 272.53
C 232.46 268.16 243.12 258.62 249.53 243.97
C 261.05 217.66 256.68 184.29 239.19 161.66
C 227.29 146.26 209.69 135.49 191.30 129.30
C 175.60 125.01 159.96 123.54 143.81 125.32
Q 131.99 126.62 127.99 127.69
C 89.27 138.11 59.78 169.85 58.10 210.52
C 57.14 233.82 66.38 258.64 88.48 269.21
Z"
/>
<path fill="#271b15" d="
M 88.63 81.09
L 88.89 55.59
L 89.21 43.21
A 3.10 3.09 88.3 0 0 85.87 40.05
C 79.42 40.57 73.51 40.16 67.11 39.66
C 60.09 39.11 52.98 37.25 45.83 35.96
Q 45.17 35.84 45.20 36.52
L 45.37 39.84
Q 44.04 61.11 45.34 81.93
L 41.48 84.48
Q 41.00 84.79 40.58 84.42
Q 38.74 82.81 38.77 80.94
Q 39.16 51.21 38.26 21.50
C 38.15 17.84 40.41 13.60 44.68 15.35
C 60.68 21.87 75.94 24.02 92.26 20.22
C 95.94 19.36 96.59 22.02 96.54 25.00
C 96.18 48.16 97.15 62.62 96.25 79.61
C 96.15 81.64 96.48 83.49 95.33 85.54
Q 95.07 86.00 94.58 86.18
C 90.99 87.46 89.51 84.45 88.63 81.09
Z"
/>
<path fill="#cebeaf" d="
M 192.31 39.61
Q 193.73 45.56 192.22 52.28
L 192.31 39.61
Z"
/>
<path fill="#cebeaf" d="
M 45.37 39.84
Q 46.34 61.23 45.34 81.93
Q 44.04 61.11 45.37 39.84
Z"
/>
<path fill="#cebeaf" d="
M 88.89 55.59
L 88.63 81.09
Q 87.24 68.39 88.89 55.59
Z"
/>
<path fill="#e2e8e4" d="
M 191.30 129.30
Q 191.50 130.96 188.98 130.97
C 174.53 131.03 159.75 129.79 145.69 133.95
C 122.52 140.81 102.77 152.41 87.74 171.58
Q 84.42 175.81 81.79 181.58
C 76.92 192.26 72.65 202.27 72.66 211.81
Q 72.66 222.29 75.34 233.57
C 77.79 243.87 83.14 253.89 88.24 263.53
Q 89.73 266.35 88.48 269.21
C 66.38 258.64 57.14 233.82 58.10 210.52
C 59.78 169.85 89.27 138.11 127.99 127.69
Q 131.99 126.62 143.81 125.32
C 159.96 123.54 175.60 125.01 191.30 129.30
Z"
/>
<path fill="#cebeaf" d="
M 191.30 129.30
C 209.69 135.49 227.29 146.26 239.19 161.66
C 256.68 184.29 261.05 217.66 249.53 243.97
C 243.12 258.62 232.46 268.16 217.06 272.53
C 179.07 283.29 142.23 284.57 104.01 274.72
Q 95.63 272.56 88.48 269.21
Q 89.73 266.35 88.24 263.53
C 83.14 253.89 77.79 243.87 75.34 233.57
Q 72.66 222.29 72.66 211.81
C 72.65 202.27 76.92 192.26 81.79 181.58
Q 84.42 175.81 87.74 171.58
C 102.77 152.41 122.52 140.81 145.69 133.95
C 159.75 129.79 174.53 131.03 188.98 130.97
Q 191.50 130.96 191.30 129.30
Z
M 213.3959 218.1263
A 15.62 15.39 92.4 0 0 229.4265 203.1645
A 15.62 15.39 92.4 0 0 214.7041 186.9137
A 15.62 15.39 92.4 0 0 198.6735 201.8755
A 15.62 15.39 92.4 0 0 213.3959 218.1263
Z
M 112.68 202.65
A 15.60 15.60 0.0 0 0 97.08 187.05
A 15.60 15.60 0.0 0 0 81.48 202.65
A 15.60 15.60 0.0 0 0 97.08 218.25
A 15.60 15.60 0.0 0 0 112.68 202.65
Z
M 142.05 213.07
Q 141.61 210.72 139.28 210.25
A 1.82 1.82 0.0 0 0 137.14 212.38
C 138.62 219.98 147.03 223.03 152.11 216.17
A 0.48 0.48 0.0 0 1 152.88 216.16
C 160.94 226.74 173.55 213.32 167.22 210.13
A 0.97 0.97 0.0 0 0 165.91 210.56
C 164.49 213.35 162.44 216.52 158.68 214.88
C 157.05 214.16 156.46 212.13 155.70 210.58
A 1.03 1.02 77.0 0 0 154.78 210.00
L 152.04 210.00
A 0.85 0.85 0.0 0 0 151.27 210.49
Q 149.70 213.97 146.07 215.20
Q 145.59 215.37 145.13 215.14
L 142.74 213.97
Q 142.17 213.69 142.05 213.07
Z"
/>
<ellipse fill="#271b15" cx="0.00" cy="0.00" transform="translate(214.05,202.52) rotate(92.4)" rx="15.62" ry="15.39"/>
<circle fill="#271b15" cx="97.08" cy="202.65" r="15.60"/>
<path fill="#271b15" d="
M 142.74 213.97
L 145.13 215.14
Q 145.59 215.37 146.07 215.20
Q 149.70 213.97 151.27 210.49
A 0.85 0.85 0.0 0 1 152.04 210.00
L 154.78 210.00
A 1.03 1.02 77.0 0 1 155.70 210.58
C 156.46 212.13 157.05 214.16 158.68 214.88
C 162.44 216.52 164.49 213.35 165.91 210.56
A 0.97 0.97 0.0 0 1 167.22 210.13
C 173.55 213.32 160.94 226.74 152.88 216.16
A 0.48 0.48 0.0 0 0 152.11 216.17
C 147.03 223.03 138.62 219.98 137.14 212.38
A 1.82 1.82 0.0 0 1 139.28 210.25
Q 141.61 210.72 142.05 213.07
Q 142.17 213.69 142.74 213.97
Z"
/>
<path fill="#cebeaf" d="
M 63.01 262.26
Q 63.61 262.16 63.75 262.50
Q 64.43 264.22 63.53 264.55
Q 62.99 263.38 63.01 262.26
Z"
/>
</svg>If you notice, we have some components like <ellipse> and <circle>. Let's ask chatGPT to convert them to <path>:
6- Conclusion
AI can be a great ally when coding, and it can help you not only with debugging, but design, and even UX. So why not find creative ways of using it on your apps?
