SVG
Viewer
TVk9pqGE
N/A
Send feedback
Terms & Conditions
Privacy Policy
Rotate
Flip Y
Flip X
-1px x -1px
Change dimensions
Optimize
4.32 KB
2.81 KB
-35%
Prettify
Preferences
Clear
<svg width="600" height="400" viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#87CEEB;stop-opacity:1"></stop> <stop offset="100%" style="stop-color:#E0F7FA;stop-opacity:1"></stop> </linearGradient> <linearGradient id="carRed" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#FF2800;stop-opacity:1"></stop> <stop offset="100%" style="stop-color:#CC0000;stop-opacity:1"></stop> </linearGradient> <linearGradient id="rimShine" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" style="stop-color:#eee;stop-opacity:1"></stop> <stop offset="100%" style="stop-color:#999;stop-opacity:1"></stop> </linearGradient> </defs> <rect x="0" y="0" width="600" height="300" fill="url(#skyGradient)"></rect> <rect x="0" y="300" width="600" height="100" fill="#333333"></rect> <line x1="0" y1="350" x2="600" y2="350" stroke="#FFFFFF" stroke-width="5" stroke-dasharray="40,30"></line> <path d="M320,180 Q250,160 150,170 L140,190 Q250,190 320,200 Z" fill="#00BFFF" stroke="#008CBA" stroke-width="2"></path> <path d="M300,250 L350,250 L340,100 L310,100 Z" fill="#FDB813"></path> <ellipse cx="325" cy="220" rx="10" ry="15" fill="#8B4513"></ellipse> <ellipse cx="330" cy="180" rx="8" ry="12" fill="#8B4513"></ellipse> <ellipse cx="320" cy="140" rx="6" ry="10" fill="#8B4513"></ellipse> <ellipse cx="325" cy="90" rx="25" ry="35" fill="#FDB813"></ellipse> <ellipse cx="340" cy="105" rx="15" ry="12" fill="#F4CA78"></ellipse> <circle cx="345" cy="100" r="2" fill="#333"></circle> <line x1="315" y1="60" x2="310" y2="40" stroke="#FDB813" stroke-width="6" stroke-linecap="round"></line> <circle cx="310" cy="40" r="5" fill="#8B4513"></circle> <line x1="335" y1="60" x2="340" y2="40" stroke="#FDB813" stroke-width="6" stroke-linecap="round"></line> <circle cx="340" cy="40" r="5" fill="#8B4513"></circle> <ellipse cx="295" cy="80" rx="15" ry="6" fill="#FDB813" transform="rotate(-20, 295, 80)"></ellipse> <g transform="translate(315, 80)"> <path d="M0,0 L25,0 L25,10 Q12.5,15 0,10 Z" fill="black"></path> <line x1="0" y1="2" x2="-10" y2="-5" stroke="black" stroke-width="2"></line> </g> <path d="M50,320 L130,320 Q130,270 180,270 L200,270 L450,270 Q500,270 500,320 L550,320 Q580,320 580,300 Q580,260 550,250 L400,240 L350,200 L250,200 L150,240 L60,250 Q20,260 20,290 Q20,320 50,320 Z" fill="url(#carRed)" stroke="#800000" stroke-width="2"></path> <path d="M250,200 L350,200 L400,240 L240,240 Z" fill="#87CEFA" opacity="0.6"></path> <ellipse cx="280" cy="220" rx="5" ry="15" fill="#333" transform="rotate(-20, 280, 220)"></ellipse> <path d="M220,260 L350,260" stroke="#800000" stroke-width="2"></path> <path d="M230,255 L245,255 L242,270 L237.5,275 L233,270 Z" fill="#FFD700" stroke="#333" stroke-width="1"></path> <g> <circle cx="155" cy="320" r="40" fill="#1a1a1a"></circle> <circle cx="155" cy="320" r="35" fill="#333"></circle> <circle cx="155" cy="320" r="25" fill="url(#rimShine)"></circle> <circle cx="155" cy="320" r="5" fill="#FFD700"></circle> <line x1="155" y1="295" x2="155" y2="345" stroke="#666" stroke-width="4"></line> <line x1="130" y1="320" x2="180" y2="320" stroke="#666" stroke-width="4"></line> </g> <g> <circle cx="500" cy="320" r="38" fill="#1a1a1a"></circle> <circle cx="500" cy="320" r="33" fill="#333"></circle> <circle cx="500" cy="320" r="23" fill="url(#rimShine)"></circle> <circle cx="500" cy="320" r="5" fill="#FFD700"></circle> <line x1="500" y1="297" x2="500" y2="343" stroke="#666" stroke-width="4"></line> <line x1="477" y1="320" x2="523" y2="320" stroke="#666" stroke-width="4"></line> </g> <g stroke="#FFF" stroke-width="2" opacity="0.7"> <line x1="50" y1="350" x2="10" y2="350"></line> <line x1="80" y1="370" x2="20" y2="370"></line> <line x1="580" y1="280" x2="620" y2="280" stroke="#333" opacity="0.3"></line> <line x1="580" y1="290" x2="650" y2="290" stroke="#333" opacity="0.3"></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
4.32 KB
2.81 KB
-35%
Prettify
Preferences
Clear
<svg width="600" height="400" viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#87CEEB;stop-opacity:1"></stop> <stop offset="100%" style="stop-color:#E0F7FA;stop-opacity:1"></stop> </linearGradient> <linearGradient id="carRed" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#FF2800;stop-opacity:1"></stop> <stop offset="100%" style="stop-color:#CC0000;stop-opacity:1"></stop> </linearGradient> <linearGradient id="rimShine" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" style="stop-color:#eee;stop-opacity:1"></stop> <stop offset="100%" style="stop-color:#999;stop-opacity:1"></stop> </linearGradient> </defs> <rect x="0" y="0" width="600" height="300" fill="url(#skyGradient)"></rect> <rect x="0" y="300" width="600" height="100" fill="#333333"></rect> <line x1="0" y1="350" x2="600" y2="350" stroke="#FFFFFF" stroke-width="5" stroke-dasharray="40,30"></line> <path d="M320,180 Q250,160 150,170 L140,190 Q250,190 320,200 Z" fill="#00BFFF" stroke="#008CBA" stroke-width="2"></path> <path d="M300,250 L350,250 L340,100 L310,100 Z" fill="#FDB813"></path> <ellipse cx="325" cy="220" rx="10" ry="15" fill="#8B4513"></ellipse> <ellipse cx="330" cy="180" rx="8" ry="12" fill="#8B4513"></ellipse> <ellipse cx="320" cy="140" rx="6" ry="10" fill="#8B4513"></ellipse> <ellipse cx="325" cy="90" rx="25" ry="35" fill="#FDB813"></ellipse> <ellipse cx="340" cy="105" rx="15" ry="12" fill="#F4CA78"></ellipse> <circle cx="345" cy="100" r="2" fill="#333"></circle> <line x1="315" y1="60" x2="310" y2="40" stroke="#FDB813" stroke-width="6" stroke-linecap="round"></line> <circle cx="310" cy="40" r="5" fill="#8B4513"></circle> <line x1="335" y1="60" x2="340" y2="40" stroke="#FDB813" stroke-width="6" stroke-linecap="round"></line> <circle cx="340" cy="40" r="5" fill="#8B4513"></circle> <ellipse cx="295" cy="80" rx="15" ry="6" fill="#FDB813" transform="rotate(-20, 295, 80)"></ellipse> <g transform="translate(315, 80)"> <path d="M0,0 L25,0 L25,10 Q12.5,15 0,10 Z" fill="black"></path> <line x1="0" y1="2" x2="-10" y2="-5" stroke="black" stroke-width="2"></line> </g> <path d="M50,320 L130,320 Q130,270 180,270 L200,270 L450,270 Q500,270 500,320 L550,320 Q580,320 580,300 Q580,260 550,250 L400,240 L350,200 L250,200 L150,240 L60,250 Q20,260 20,290 Q20,320 50,320 Z" fill="url(#carRed)" stroke="#800000" stroke-width="2"></path> <path d="M250,200 L350,200 L400,240 L240,240 Z" fill="#87CEFA" opacity="0.6"></path> <ellipse cx="280" cy="220" rx="5" ry="15" fill="#333" transform="rotate(-20, 280, 220)"></ellipse> <path d="M220,260 L350,260" stroke="#800000" stroke-width="2"></path> <path d="M230,255 L245,255 L242,270 L237.5,275 L233,270 Z" fill="#FFD700" stroke="#333" stroke-width="1"></path> <g> <circle cx="155" cy="320" r="40" fill="#1a1a1a"></circle> <circle cx="155" cy="320" r="35" fill="#333"></circle> <circle cx="155" cy="320" r="25" fill="url(#rimShine)"></circle> <circle cx="155" cy="320" r="5" fill="#FFD700"></circle> <line x1="155" y1="295" x2="155" y2="345" stroke="#666" stroke-width="4"></line> <line x1="130" y1="320" x2="180" y2="320" stroke="#666" stroke-width="4"></line> </g> <g> <circle cx="500" cy="320" r="38" fill="#1a1a1a"></circle> <circle cx="500" cy="320" r="33" fill="#333"></circle> <circle cx="500" cy="320" r="23" fill="url(#rimShine)"></circle> <circle cx="500" cy="320" r="5" fill="#FFD700"></circle> <line x1="500" y1="297" x2="500" y2="343" stroke="#666" stroke-width="4"></line> <line x1="477" y1="320" x2="523" y2="320" stroke="#666" stroke-width="4"></line> </g> <g stroke="#FFF" stroke-width="2" opacity="0.7"> <line x1="50" y1="350" x2="10" y2="350"></line> <line x1="80" y1="370" x2="20" y2="370"></line> <line x1="580" y1="280" x2="620" y2="280" stroke="#333" opacity="0.3"></line> <line x1="580" y1="290" x2="650" y2="290" stroke="#333" opacity="0.3"></line> </g> </svg>
Upload
Copy
Download
Share
Preview
React
React Native
PNG
Data URI
100%
Download