Convert Star Shape to SVG
Turn star shape images — five-pointed stars, star ratings, sheriff badges, and decorative stars — into clean SVG vectors for any project.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Star SVG Applications
Star shapes appear across web, print, and physical product design in many forms.
- Star ratings: ★★★★☆ UI components for reviews and feedback
- Decorative stars: Christmas, patriotic, and party design elements
- Badge design: star badge shapes for logos and award graphics
- Celestial/space themes: constellation and galaxy design SVGs
- Military and government: rank stars and insignia shapes
Drawing a Perfect Star in SVG
For mathematically precise stars, SVG polygon coordinates are the best approach.
- 5-point star: <polygon points='100,10 40,198 190,78 10,78 160,198'>
- Adjust inner/outer radius for the star's depth
- Use fill-rule='evenodd' to create the hollow center star shape
- Star with rounded points: use <path> with cubic bezier curves
Frequently Asked Questions
How do I fill only one half of a star SVG for a half-star rating?
Use SVG <linearGradient> with a hard stop at 50%: fill the star with the gradient (50% gold, 50% gray). Or clip two overlapping stars — one filled, one empty.
Can I make a rotating star animation in SVG?
Yes. Add CSS: @keyframes spin { to { transform: rotate(360deg); } } and apply animation: spin 4s linear infinite to the SVG or its container.
What's the best SVG approach for a star rating widget?
Use five SVG star paths. Fill with gold up to the rating value. For accessibility add aria-label='4 out of 5 stars' and role='img' to the container.
How do I make a 6-point (Star of David) or 8-point star in SVG?
For a 6-point star: overlap two <polygon> triangles with opacity or use evenodd fill. For an 8-point star: use 8 points in a polygon with alternating inner/outer radii.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Convert Image to SVG — Free