SVG
Viewer
MZ4L81k0
N/A
Send feedback
Terms & Conditions
Privacy Policy
Rotate
Flip Y
Flip X
-1px x -1px
Change dimensions
Optimize
6.03 KB
4 KB
-34%
Prettify
Preferences
Clear
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 500" width="600" height="500"> <defs> <radialGradient id="sky" cx="50%" cy="40%" r="75%"> <stop offset="0%" stop-color="#aee3f5"></stop> <stop offset="100%" stop-color="#7ec8e3"></stop> </radialGradient> <linearGradient id="ground" x1="0" y1="0" x2="0" y2="1"> <stop offset="0%" stop-color="#9ccc65"></stop> <stop offset="100%" stop-color="#689f38"></stop> </linearGradient> </defs> <rect x="0" y="0" width="600" height="420" fill="url(#sky)"></rect> <rect x="0" y="420" width="600" height="80" fill="url(#ground)"></rect> <line x1="0" y1="420" x2="600" y2="420" stroke="#558b2f" stroke-width="3"></line> <g fill="#ffffff" opacity="0.9"> <ellipse cx="100" cy="90" rx="45" ry="20"></ellipse> <ellipse cx="140" cy="80" rx="35" ry="18"></ellipse> <ellipse cx="480" cy="70" rx="40" ry="17"></ellipse> <ellipse cx="515" cy="80" rx="30" ry="15"></ellipse> </g> <circle cx="520" cy="120" r="35" fill="#fff59d"></circle> <circle cx="520" cy="120" r="24" fill="#ffeb3b"></circle> <g> <circle cx="210" cy="380" r="55" fill="none" stroke="#37474f" stroke-width="8"></circle> <circle cx="210" cy="380" r="48" fill="none" stroke="#90a4ae" stroke-width="2"></circle> <circle cx="210" cy="380" r="6" fill="#263238"></circle> <g stroke="#b0bec5" stroke-width="1.5"> <line x1="210" y1="333" x2="210" y2="427"></line> <line x1="163" y1="380" x2="257" y2="380"></line> <line x1="177" y1="347" x2="243" y2="413"></line> <line x1="243" y1="347" x2="177" y2="413"></line> </g> </g> <g> <circle cx="430" cy="380" r="55" fill="none" stroke="#37474f" stroke-width="8"></circle> <circle cx="430" cy="380" r="48" fill="none" stroke="#90a4ae" stroke-width="2"></circle> <circle cx="430" cy="380" r="6" fill="#263238"></circle> <g stroke="#b0bec5" stroke-width="1.5"> <line x1="430" y1="333" x2="430" y2="427"></line> <line x1="383" y1="380" x2="477" y2="380"></line> <line x1="397" y1="347" x2="463" y2="413"></line> <line x1="463" y1="347" x2="397" y2="413"></line> </g> </g> <g stroke="#e53935" stroke-width="9" stroke-linecap="round" fill="none"> <line x1="290" y1="380" x2="390" y2="280"></line> <line x1="290" y1="380" x2="275" y2="265"></line> <line x1="275" y1="265" x2="390" y2="280"></line> <line x1="290" y1="380" x2="210" y2="380"></line> <line x1="390" y1="280" x2="430" y2="380"></line> </g> <line x1="275" y1="265" x2="268" y2="245" stroke="#37474f" stroke-width="5"></line> <path d="M 245 245 Q 268 235 295 245 L 290 252 Q 268 246 250 252 Z" fill="#263238"></path> <line x1="390" y1="280" x2="395" y2="250" stroke="#37474f" stroke-width="6"></line> <path d="M 375 248 Q 395 240 415 250" fill="none" stroke="#263238" stroke-width="6" stroke-linecap="round"></path> <circle cx="375" cy="248" r="4" fill="#263238"></circle> <circle cx="415" cy="250" r="4" fill="#263238"></circle> <circle cx="290" cy="380" r="9" fill="#455a64"></circle> <circle cx="290" cy="380" r="4" fill="#cfd8dc"></circle> <line x1="290" y1="380" x2="320" y2="410" stroke="#37474f" stroke-width="5"></line> <rect x="313" y="405" width="20" height="8" rx="2" fill="#263238"></rect> <line x1="290" y1="380" x2="262" y2="350" stroke="#37474f" stroke-width="5"></line> <rect x="248" y="343" width="20" height="8" rx="2" fill="#263238"></rect> <ellipse cx="250" ry="62" rx="6" cy="380" fill="none" stroke="#607d8b" stroke-width="2"></ellipse> <path d="M 210 380 Q 250 440 290 380" fill="none" stroke="#607d8b" stroke-width="2"></path> <g transform="translate(0,0)"> <path d="M 230 250 L 200 260 L 215 270 L 195 278 L 218 285 Z" fill="#eceff1"></path> <ellipse cx="270" cy="225" rx="55" ry="42" fill="#ffffff"></ellipse> <ellipse cx="270" cy="240" rx="48" ry="30" fill="#fafafa"></ellipse> <path d="M 250 210 Q 270 250 310 235 Q 305 205 280 200 Z" fill="#e0e0e0"></path> <path d="M 255 220 Q 275 245 305 232" fill="none" stroke="#bdbdbd" stroke-width="1.5"></path> <path d="M 260 228 Q 280 248 305 232" fill="none" stroke="#bdbdbd" stroke-width="1.5"></path> <path d="M 305 205 Q 335 170 350 150 Q 360 145 362 160 Q 340 185 320 215 Z" fill="#ffffff"></path> <circle cx="362" cy="145" r="26" fill="#ffffff"></circle> <circle cx="370" cy="138" r="6" fill="#ffffff"></circle> <circle cx="372" cy="139" r="3.5" fill="#1a1a1a"></circle> <circle cx="373" cy="138" r="1" fill="#ffffff"></circle> <path d="M 365 130 Q 372 127 378 131" fill="none" stroke="#9e9e9e" stroke-width="1.5"></path> <path d="M 385 140 Q 430 138 445 145 Q 430 150 385 152 Z" fill="#ffb74d"></path> <path d="M 385 152 Q 410 170 420 160 Q 430 175 408 182 Q 390 178 385 158 Z" fill="#ff9800"></path> <path d="M 440 145 Q 448 146 446 151 Q 442 150 438 148 Z" fill="#f57c00"></path> <path d="M 348 124 Q 346 115 352 113 Q 354 120 352 126" fill="#ffffff"></path> <path d="M 320 175 Q 345 168 360 172 Q 350 185 322 188 Z" fill="#e53935"></path> <path d="M 355 175 Q 380 195 375 215 Q 368 200 358 188 Z" fill="#c62828"></path> </g> <g> <path d="M 285 260 Q 280 320 262 350" fill="none" stroke="#ffa726" stroke-width="7" stroke-linecap="round"></path> <path d="M 255 343 Q 250 355 248 360 Q 268 358 268 345 Z" fill="#fb8c00"></path> </g> <g> <path d="M 295 260 Q 305 335 320 410" fill="none" stroke="#ffa726" stroke-width="7" stroke-linecap="round"></path> <path d="M 313 405 Q 308 418 306 420 Q 335 415 333 402 Z" fill="#fb8c00"></path> </g> <path d="M 300 215 Q 340 230 380 248" fill="none" stroke="#e0e0e0" stroke-width="14" stroke-linecap="round"></path> <g stroke="#ffffff" stroke-width="3" stroke-linecap="round" opacity="0.7"> <line x1="100" y1="350" x2="160" y2="350"></line> <line x1="80" y1="370" x2="150" y2="370"></line> <line x1="110" y1="390" x2="155" y2="390"></line> </g> </svg>
Upload
Copy
Download
Share
Preview
React
React Native
PNG
Data URI
100%
Download
SVG
Viewer
Edit
Export
Rotate
Flip Y
Flip X
-1px x -1px
Change dimensions
Optimize
6.03 KB
4 KB
-34%
Prettify
Preferences
Clear
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 500" width="600" height="500"> <defs> <radialGradient id="sky" cx="50%" cy="40%" r="75%"> <stop offset="0%" stop-color="#aee3f5"></stop> <stop offset="100%" stop-color="#7ec8e3"></stop> </radialGradient> <linearGradient id="ground" x1="0" y1="0" x2="0" y2="1"> <stop offset="0%" stop-color="#9ccc65"></stop> <stop offset="100%" stop-color="#689f38"></stop> </linearGradient> </defs> <rect x="0" y="0" width="600" height="420" fill="url(#sky)"></rect> <rect x="0" y="420" width="600" height="80" fill="url(#ground)"></rect> <line x1="0" y1="420" x2="600" y2="420" stroke="#558b2f" stroke-width="3"></line> <g fill="#ffffff" opacity="0.9"> <ellipse cx="100" cy="90" rx="45" ry="20"></ellipse> <ellipse cx="140" cy="80" rx="35" ry="18"></ellipse> <ellipse cx="480" cy="70" rx="40" ry="17"></ellipse> <ellipse cx="515" cy="80" rx="30" ry="15"></ellipse> </g> <circle cx="520" cy="120" r="35" fill="#fff59d"></circle> <circle cx="520" cy="120" r="24" fill="#ffeb3b"></circle> <g> <circle cx="210" cy="380" r="55" fill="none" stroke="#37474f" stroke-width="8"></circle> <circle cx="210" cy="380" r="48" fill="none" stroke="#90a4ae" stroke-width="2"></circle> <circle cx="210" cy="380" r="6" fill="#263238"></circle> <g stroke="#b0bec5" stroke-width="1.5"> <line x1="210" y1="333" x2="210" y2="427"></line> <line x1="163" y1="380" x2="257" y2="380"></line> <line x1="177" y1="347" x2="243" y2="413"></line> <line x1="243" y1="347" x2="177" y2="413"></line> </g> </g> <g> <circle cx="430" cy="380" r="55" fill="none" stroke="#37474f" stroke-width="8"></circle> <circle cx="430" cy="380" r="48" fill="none" stroke="#90a4ae" stroke-width="2"></circle> <circle cx="430" cy="380" r="6" fill="#263238"></circle> <g stroke="#b0bec5" stroke-width="1.5"> <line x1="430" y1="333" x2="430" y2="427"></line> <line x1="383" y1="380" x2="477" y2="380"></line> <line x1="397" y1="347" x2="463" y2="413"></line> <line x1="463" y1="347" x2="397" y2="413"></line> </g> </g> <g stroke="#e53935" stroke-width="9" stroke-linecap="round" fill="none"> <line x1="290" y1="380" x2="390" y2="280"></line> <line x1="290" y1="380" x2="275" y2="265"></line> <line x1="275" y1="265" x2="390" y2="280"></line> <line x1="290" y1="380" x2="210" y2="380"></line> <line x1="390" y1="280" x2="430" y2="380"></line> </g> <line x1="275" y1="265" x2="268" y2="245" stroke="#37474f" stroke-width="5"></line> <path d="M 245 245 Q 268 235 295 245 L 290 252 Q 268 246 250 252 Z" fill="#263238"></path> <line x1="390" y1="280" x2="395" y2="250" stroke="#37474f" stroke-width="6"></line> <path d="M 375 248 Q 395 240 415 250" fill="none" stroke="#263238" stroke-width="6" stroke-linecap="round"></path> <circle cx="375" cy="248" r="4" fill="#263238"></circle> <circle cx="415" cy="250" r="4" fill="#263238"></circle> <circle cx="290" cy="380" r="9" fill="#455a64"></circle> <circle cx="290" cy="380" r="4" fill="#cfd8dc"></circle> <line x1="290" y1="380" x2="320" y2="410" stroke="#37474f" stroke-width="5"></line> <rect x="313" y="405" width="20" height="8" rx="2" fill="#263238"></rect> <line x1="290" y1="380" x2="262" y2="350" stroke="#37474f" stroke-width="5"></line> <rect x="248" y="343" width="20" height="8" rx="2" fill="#263238"></rect> <ellipse cx="250" ry="62" rx="6" cy="380" fill="none" stroke="#607d8b" stroke-width="2"></ellipse> <path d="M 210 380 Q 250 440 290 380" fill="none" stroke="#607d8b" stroke-width="2"></path> <g transform="translate(0,0)"> <path d="M 230 250 L 200 260 L 215 270 L 195 278 L 218 285 Z" fill="#eceff1"></path> <ellipse cx="270" cy="225" rx="55" ry="42" fill="#ffffff"></ellipse> <ellipse cx="270" cy="240" rx="48" ry="30" fill="#fafafa"></ellipse> <path d="M 250 210 Q 270 250 310 235 Q 305 205 280 200 Z" fill="#e0e0e0"></path> <path d="M 255 220 Q 275 245 305 232" fill="none" stroke="#bdbdbd" stroke-width="1.5"></path> <path d="M 260 228 Q 280 248 305 232" fill="none" stroke="#bdbdbd" stroke-width="1.5"></path> <path d="M 305 205 Q 335 170 350 150 Q 360 145 362 160 Q 340 185 320 215 Z" fill="#ffffff"></path> <circle cx="362" cy="145" r="26" fill="#ffffff"></circle> <circle cx="370" cy="138" r="6" fill="#ffffff"></circle> <circle cx="372" cy="139" r="3.5" fill="#1a1a1a"></circle> <circle cx="373" cy="138" r="1" fill="#ffffff"></circle> <path d="M 365 130 Q 372 127 378 131" fill="none" stroke="#9e9e9e" stroke-width="1.5"></path> <path d="M 385 140 Q 430 138 445 145 Q 430 150 385 152 Z" fill="#ffb74d"></path> <path d="M 385 152 Q 410 170 420 160 Q 430 175 408 182 Q 390 178 385 158 Z" fill="#ff9800"></path> <path d="M 440 145 Q 448 146 446 151 Q 442 150 438 148 Z" fill="#f57c00"></path> <path d="M 348 124 Q 346 115 352 113 Q 354 120 352 126" fill="#ffffff"></path> <path d="M 320 175 Q 345 168 360 172 Q 350 185 322 188 Z" fill="#e53935"></path> <path d="M 355 175 Q 380 195 375 215 Q 368 200 358 188 Z" fill="#c62828"></path> </g> <g> <path d="M 285 260 Q 280 320 262 350" fill="none" stroke="#ffa726" stroke-width="7" stroke-linecap="round"></path> <path d="M 255 343 Q 250 355 248 360 Q 268 358 268 345 Z" fill="#fb8c00"></path> </g> <g> <path d="M 295 260 Q 305 335 320 410" fill="none" stroke="#ffa726" stroke-width="7" stroke-linecap="round"></path> <path d="M 313 405 Q 308 418 306 420 Q 335 415 333 402 Z" fill="#fb8c00"></path> </g> <path d="M 300 215 Q 340 230 380 248" fill="none" stroke="#e0e0e0" stroke-width="14" stroke-linecap="round"></path> <g stroke="#ffffff" stroke-width="3" stroke-linecap="round" opacity="0.7"> <line x1="100" y1="350" x2="160" y2="350"></line> <line x1="80" y1="370" x2="150" y2="370"></line> <line x1="110" y1="390" x2="155" y2="390"></line> </g> </svg>
Upload
Copy
Download
Share
Preview
React
React Native
PNG
Data URI
100%
Download