SVGSketch Feature

Vector Flood Fill: Color SVG Line Art

Fill enclosed SVG line art with colors, gradients, or patterns. Keep gradients and patterns aligned across regions while the original outlines stay editable.

Open the free editor

Quick answer

Select your vector linework, press Shift+F, choose a paint, and click an enclosed region. SVGSketch creates an editable path inside it while preserving the original outlines. Drag across several regions to fill them together. Gradients and repeating patterns span the entire boundary selection.

Fill regions with colors, gradients, or patterns

BEFOREAFTER
Fill regions with a continuous gradient The same gradient fills every enclosed region in this window. The original outlines remain separate editable paths.
BEFOREAFTER
Fill individual regions with solid colors Choose solid colors and click individual regions to build a stained-glass illustration. Each colored region is an editable path; the outlines remain unchanged.
BEFOREAFTER
Align a pattern across separate regions Diagonal stripes remain aligned across the window. Change the bucket paint to Pattern, then fill each region without restarting the tile.

Try the examples yourself

Download an SVG and open it in SVGSketch. The artwork stays editable.

Fill enclosed areas in line art

An overlapping pair of rectangles makes three regions. A few curves can make a landscape. Vector Flood Fill finds those enclosed areas so you can color them without tracing a second set of outlines. Use it for line-art illustrations, diagram sections, stained-glass designs, or decorative lettering.

Start with the downloadable window above, or draw two overlapping rectangles with visible strokes and no fill. Select the boundaries, press Shift+F, and open the paint button in the top toolbar. Choose Solid and a color, then hover to preview and click to fill. Drag through several regions to paint them together.

Apply a continuous gradient across multiple regions

Keep all your boundary shapes selected and choose Linear gradient or Radial gradient in the bucket paint picker. Set the stops, then fill the regions you want. The gradient spans the full boundary selection instead of starting over inside each new path. The window above uses a gold, coral, and violet gradient.

Patterns also align across separate regions. Choose a preset, a library pattern, or an image tile. See SVG patterns for instructions on creating reusable tiles.

Edit fills without changing the outlines

Choose the fill paint in the bucket toolbar without changing the selected outlines. Auto placement puts a region fill behind unfilled linework, or above existing source fills when needed to make it visible. You can also choose Behind boundaries or Above boundaries explicitly.

Replace updates a matching region fill. Add on Top adds another Appearance fill layer for a translucent wash or patterned overlay. Alt-click samples an existing fill. Edit last fill selects the results so you can keep working with the ordinary path editing tools.

For a small break in the outline, enable Close gaps and set the maximum gap in document units. Hover to inspect the dashed bridge before filling. The bridge helps find the region; it does not change the original lines.

Create a region fill or recolor an object

Select boundaries when you want a new path in the space they enclose. With nothing selected, clicking an existing object changes its fill directly. In the paint picker, choosing a new color keeps the current paint type: choose Solid explicitly when you want a flat color instead of a pattern.

The resulting fills are ordinary SVG paths, and editing the original boundaries later does not automatically reshape them. If you want to merge the outlines themselves or cut away part of the geometry, use Shape Builder.

FAQ

Is Vector Flood Fill free?

Yes. Vector Flood Fill is part of the free SVGSketch editor and runs in your browser.

Can open paths form a fill boundary?

Yes. Several open vector paths can enclose an area together. Each individual path does not have to be closed. Small gaps can be bridged with the optional Close gaps setting.

Does it fill areas in a photograph or PNG?

The tool uses vector boundaries, not image pixels. You can use an image as the paint inside a region, but bitmap edges do not define the region.

Does the fill stay linked to its boundaries?

No. Each created fill is an ordinary editable SVG path. Later edits to the original boundaries do not automatically reshape it.

What is saved in the SVG?

Standard paths, gradients, and patterns. The original boundary artwork remains in the document, and a browser can render the exported SVG without an SVGSketch runtime.

Open your SVG in SVGSketch

Start with a blank canvas, import an SVG, or use the editor as a conversion and cleanup step.

Open the free editor