How to Fill SVG Shapes with Color
Fill SVG shapes and paths with color using a visual color map — assign each fill and stroke, then download, free.
Filling an SVG means giving each shape or path a solid color. The free SVG filler makes this visual and fast: it maps out the fills and strokes in your file so you can assign colors without editing any markup. This guide shows you how.
What filling an SVG means
Every shape in an SVG has a fill (the inside color) and can have a stroke (the outline color). Filling is the process of setting those colors — turning a plain or single-color vector into a finished, colored design.
How to fill an SVG with color in 3 steps
Step 1: Open the SVG filler
Go to the SVG filler. It loads instantly in your browser.
Step 2: Upload your SVG
Upload or drop your file. The tool lists every fill and stroke it detects, mapped to the shapes that use them.
Step 3: Assign colors and download
Pick a color for each fill and stroke, then download the finished SVG. You can paste hex codes from the palettes or color extractor tools to match a brand exactly.
Fill vs. recolor
Filling is about assigning colors to shapes. If you already have a colored SVG and want to swap existing colors — or apply a palette preset across the whole file at once — see How to Recolor an SVG Online and use the Recolor tab in the editor.
Frequently asked questions
Can I fill each shape a different color?
Yes. Every distinct fill and stroke in the file is listed separately, so you can give each shape its own color.
Can I match a specific palette?
Yes. Paste hex codes from the palettes or extractor tools to match a brand.
Is it free?
Yes. Filling and downloading SVGs is free.