SVGSketch Feature

SVG Appearance Stack: Multiple Fills and Strokes

Give one shape several fills and strokes, reorder them, put an effect on just one, and save the whole look as a reusable graphic style. Exports as standard SVG.

Open SVGSketch

Quick answer

Open the Appearance panel and use "Add Fill" or "Add Stroke" to give a shape more than one of either. Rows list the paint operations bottom to top; drag to reorder, use the eye to hide one, and select a row to edit just that paint. "Save as Style" stores the whole stack in the Library panel's Styles tab, and every shape you apply it to stays linked - editing the style updates all of them.

Layered fill and stroke examples

Layer two strokes around a fill A wide dark stroke sits below the fill, and a thin light stroke sits above it. Edit each stroke independently in the Appearance panel.
Apply a filter to an individual stroke Apply a glow to the inner stroke and a drop shadow to the whole shape. Use the Apply to setting in the Filters panel to choose which layer receives each effect.
Apply a shared style to differently colored shapes Both shapes use the same graphic style for their layered strokes. Each shape keeps its own fill color. Editing the style updates both shapes.

Add multiple fills and strokes to a shape

SVG gives an element one fill and one stroke. A two-tone outline, a sticker border, a keyline over a flat fill - all of them need more paint than that, and the usual workaround is to stack duplicate shapes and keep them in sync by hand.

The Appearance panel makes the paint a list instead. "Add Fill" and "Add Stroke" grow it, rows drag to reorder, and the eye on each row hides that pass without discarding its color. The additional layers appear when you add another fill or stroke.

Every control edits the row you selected

Selecting a row shows that layer's own controls: its color, its opacity, and for a stroke its width, joins, caps and dash pattern. Each layer can take a gradient or a pattern of its own, so a gradient sheen can sit over a flat fill without touching it.

Effects work the same way. Each effect in the Filters panel has an "Apply to" that names the paint layer it acts on, so a glow can belong to one bright stroke while a drop shadow belongs to the shape as composed.

Save and apply a linked graphic style

"Save as Style" in the Appearance panel stores the stack in the Library panel's Styles tab under a name. Applying it to another shape links that shape to it rather than copying - so editing the style later changes every shape using it at once, with no re-application.

Each shape keeps its own core fill and stroke while sharing the additional layers and their order. "Detach" breaks the link and leaves the appearance exactly as it looks.

Export layered fills and strokes as SVG

A stacked shape leaves the editor as its geometry defined once in a defs block and referenced once per paint pass with a use element, wrapped in a group. The browser paints those layers in order using standard SVG elements.

SVG export resolves graphic styles into the layers painted by each shape. Save the .svgs document to preserve the editable link between a shape and its graphic style.

Related SVGSketch resources

SVG patternsRead more SVG markersRead more How to add gradients to SVGRead more All SVGSketch featuresRead more

FAQ

How do I put two strokes on one shape?

Select the shape, open the Appearance panel, and click "Add Stroke". The new stroke appears as a row above the existing paint; drag it below the fill if you want it to read as an outer border, and set its own color and width with the row selected.

Can a second fill use a gradient?

Yes. Select that fill's row and pick a gradient or pattern type as you would for any fill - it applies to that layer alone, so a gradient sheen can sit over a flat color underneath.

What is a graphic style?

A saved appearance stack with a name, stored in the Library panel's Styles tab. Shapes you apply it to stay linked to it, so editing the style updates all of them at once. It shares the structure of the appearance while each shape keeps its own core fill and stroke.

Does editing a style change every shape using it?

Yes. Adding or reordering a layer in a linked style updates every shape using that style. Changing a shape's core color affects only that shape. Use "Detach" to stop applying later style changes.

Can I put a glow on just one stroke?

Yes. Add the effect in the Filters panel and set its "Apply to" to that stroke's layer. Effects default to acting on the shape as composed; the control appears once a shape paints in more than one pass.

Does this export as valid SVG?

Yes. The geometry is written once in a defs block and referenced once per paint pass with use elements - all native SVG. Nothing is rasterized and no editor-specific attributes are needed to render it.

Open your SVG in SVGSketch

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

Open SVGSketch