SVG
Viewer
FhqYdli5
N/A
Send feedback
Terms & Conditions
Privacy Policy
Rotate
Flip Y
Flip X
-1px x -1px
Change dimensions
Optimize
3.65 KB
2.25 KB
-38%
Prettify
Preferences
Clear
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" width="800" height="500"> <rect width="800" height="500" fill="#87CEEB"></rect> <rect y="380" width="800" height="120" fill="#7CFC00"></rect> <path d="M0 380 Q100 370 200 380 T400 380 T600 380 T800 380" fill="none" stroke="#228B22" stroke-width="3"></path> <g stroke="#333" stroke-width="8"> <path d="M300 300 L400 250 L500 280" fill="none" stroke-linecap="round"></path> <path d="M400 250 L450 220" fill="none" stroke-linecap="round"></path> <path d="M450 220 L550 240" fill="none" stroke-linecap="round"></path> <rect x="390" y="230" width="20" height="10" fill="#8B4513"></rect> <path d="M550 240 L560 210" fill="none" stroke-linecap="round"></path> <path d="M560 210 L540 210" fill="none" stroke-linecap="round"></path> <path d="M560 210 L580 210" fill="none" stroke-linecap="round"></path> </g> <g stroke="#333" stroke-width="6"> <circle cx="300" cy="300" r="40" fill="none"></circle> <circle cx="300" cy="300" r="3" fill="#333"></circle> <line x1="300" y1="300" x2="330" y2="300" stroke="#333" stroke-width="2"></line> <line x1="300" y1="300" x2="285" y2="325" stroke="#333" stroke-width="2"></line> <line x1="300" y1="300" x2="270" y2="290" stroke="#333" stroke-width="2"></line> <circle cx="500" cy="300" r="40" fill="none"></circle> <circle cx="500" cy="300" r="3" fill="#333"></circle> <line x1="500" y1="300" x2="530" y2="300" stroke="#333" stroke-width="2"></line> <line x1="500" y1="300" x2="485" y2="325" stroke="#333" stroke-width="2"></line> <line x1="500" y1="300" x2="470" y2="290" stroke="#333" stroke-width="2"></line> </g> <g stroke="#333" stroke-width="4"> <circle cx="400" cy="280" r="15" fill="none"></circle> <line x1="400" y1="280" x2="380" y2="310" stroke-linecap="round"></line> <circle cx="380" cy="310" r="8" fill="#666"></circle> <line x1="400" y1="280" x2="420" y2="250" stroke-linecap="round"></line> <circle cx="420" cy="250" r="8" fill="#666"></circle> </g> <ellipse cx="430" cy="220" rx="40" ry="30" fill="white" stroke="#333" stroke-width="3"></ellipse> <circle cx="470" cy="200" r="25" fill="white" stroke="#333" stroke-width="3"></circle> <path d="M490 200 Q550 200 560 180 Q570 200 560 220 Q550 200 490 200" fill="#FFA500" stroke="#333" stroke-width="3"></path> <ellipse cx="520" cy="200" rx="8" ry="5" fill="#FF4500"></ellipse> <path d="M495 195 Q510 195 515 190" fill="none" stroke="#333" stroke-width="1.5"></path> <circle cx="480" cy="195" r="5" fill="#333"></circle> <circle cx="482" cy="193" r="1.5" fill="white"></circle> <path d="M410 220 Q380 200 390 230 Q380 250 410 240" fill="white" stroke="#333" stroke-width="3"></path> <g fill="#FFA500" stroke="#333" stroke-width="2"> <ellipse cx="380" cy="315" rx="12" ry="8" transform="rotate(30 380 315)"></ellipse> <ellipse cx="420" cy="245" rx="12" ry="8" transform="rotate(-20 420 245)"></ellipse> </g> <path d="M390 220 Q370 210 380 230 Q370 240 390 235" fill="white" stroke="#333" stroke-width="2.5"></path> <g stroke="#666" stroke-width="2" stroke-dasharray="5,5" opacity="0.6"> <line x1="200" y1="300" x2="100" y2="300"></line> <line x1="600" y1="300" x2="700" y2="300"></line> </g> <circle cx="100" cy="100" r="40" fill="#FFD700"></circle> <g fill="#FFD700" stroke="#FF8C00" stroke-width="2"> <path d="M100 50 L100 30 M100 150 L100 170 M50 100 L30 100 M150 100 L170 100"></path> <path d="M60 60 L45 45 M140 60 L155 45 M60 140 L45 155 M140 140 L155 155"></path> </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
3.65 KB
2.25 KB
-38%
Prettify
Preferences
Clear
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" width="800" height="500"> <rect width="800" height="500" fill="#87CEEB"></rect> <rect y="380" width="800" height="120" fill="#7CFC00"></rect> <path d="M0 380 Q100 370 200 380 T400 380 T600 380 T800 380" fill="none" stroke="#228B22" stroke-width="3"></path> <g stroke="#333" stroke-width="8"> <path d="M300 300 L400 250 L500 280" fill="none" stroke-linecap="round"></path> <path d="M400 250 L450 220" fill="none" stroke-linecap="round"></path> <path d="M450 220 L550 240" fill="none" stroke-linecap="round"></path> <rect x="390" y="230" width="20" height="10" fill="#8B4513"></rect> <path d="M550 240 L560 210" fill="none" stroke-linecap="round"></path> <path d="M560 210 L540 210" fill="none" stroke-linecap="round"></path> <path d="M560 210 L580 210" fill="none" stroke-linecap="round"></path> </g> <g stroke="#333" stroke-width="6"> <circle cx="300" cy="300" r="40" fill="none"></circle> <circle cx="300" cy="300" r="3" fill="#333"></circle> <line x1="300" y1="300" x2="330" y2="300" stroke="#333" stroke-width="2"></line> <line x1="300" y1="300" x2="285" y2="325" stroke="#333" stroke-width="2"></line> <line x1="300" y1="300" x2="270" y2="290" stroke="#333" stroke-width="2"></line> <circle cx="500" cy="300" r="40" fill="none"></circle> <circle cx="500" cy="300" r="3" fill="#333"></circle> <line x1="500" y1="300" x2="530" y2="300" stroke="#333" stroke-width="2"></line> <line x1="500" y1="300" x2="485" y2="325" stroke="#333" stroke-width="2"></line> <line x1="500" y1="300" x2="470" y2="290" stroke="#333" stroke-width="2"></line> </g> <g stroke="#333" stroke-width="4"> <circle cx="400" cy="280" r="15" fill="none"></circle> <line x1="400" y1="280" x2="380" y2="310" stroke-linecap="round"></line> <circle cx="380" cy="310" r="8" fill="#666"></circle> <line x1="400" y1="280" x2="420" y2="250" stroke-linecap="round"></line> <circle cx="420" cy="250" r="8" fill="#666"></circle> </g> <ellipse cx="430" cy="220" rx="40" ry="30" fill="white" stroke="#333" stroke-width="3"></ellipse> <circle cx="470" cy="200" r="25" fill="white" stroke="#333" stroke-width="3"></circle> <path d="M490 200 Q550 200 560 180 Q570 200 560 220 Q550 200 490 200" fill="#FFA500" stroke="#333" stroke-width="3"></path> <ellipse cx="520" cy="200" rx="8" ry="5" fill="#FF4500"></ellipse> <path d="M495 195 Q510 195 515 190" fill="none" stroke="#333" stroke-width="1.5"></path> <circle cx="480" cy="195" r="5" fill="#333"></circle> <circle cx="482" cy="193" r="1.5" fill="white"></circle> <path d="M410 220 Q380 200 390 230 Q380 250 410 240" fill="white" stroke="#333" stroke-width="3"></path> <g fill="#FFA500" stroke="#333" stroke-width="2"> <ellipse cx="380" cy="315" rx="12" ry="8" transform="rotate(30 380 315)"></ellipse> <ellipse cx="420" cy="245" rx="12" ry="8" transform="rotate(-20 420 245)"></ellipse> </g> <path d="M390 220 Q370 210 380 230 Q370 240 390 235" fill="white" stroke="#333" stroke-width="2.5"></path> <g stroke="#666" stroke-width="2" stroke-dasharray="5,5" opacity="0.6"> <line x1="200" y1="300" x2="100" y2="300"></line> <line x1="600" y1="300" x2="700" y2="300"></line> </g> <circle cx="100" cy="100" r="40" fill="#FFD700"></circle> <g fill="#FFD700" stroke="#FF8C00" stroke-width="2"> <path d="M100 50 L100 30 M100 150 L100 170 M50 100 L30 100 M150 100 L170 100"></path> <path d="M60 60 L45 45 M140 60 L155 45 M60 140 L45 155 M140 140 L155 155"></path> </g> </svg>
Upload
Copy
Download
Share
Preview
React
React Native
PNG
Data URI
100%
Download