SVGSketch Feature

SVG Multiple Fills and Strokes - Appearance Stack

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.

What an appearance stack gives you

Two strokes and a fill, on one shape A wide dark stroke under the fill, a thin light stroke over it. SVG gives an element one fill and one stroke, so the editor emits the geometry once in <defs> and references it once per paint pass - the painter's model doing exactly what it always did, with the stack saying how many times.
An effect on one pass, not the whole shape The glow belongs to the bright inner stroke; the drop shadow belongs to the sign as a whole. Each effect names the paint layer it acts on, so the editor writes one filter per destination and references each from the element it applies to.
One style, many colours Both shapes wear the same graphic style, so they share its structure - how many passes, in what order, with which extra paints. What each keeps for itself is its own core fill, which is why one saved look can serve a whole icon set.

One shape, several paint operations

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 colour. A shape with one fill and one stroke keeps exactly the file it had before - the list only appears once there is something extra to say.

Every control edits the row you selected

Selecting a row shows that layer's own controls: its colour, 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 a look, keep it linked

"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 wearing it at once, with no re-application.

What each shape keeps for itself is its own core fill and stroke. A style shares the structure of an appearance while a dozen icons wearing it keep a dozen different colours. "Detach" breaks the link and leaves the appearance exactly as it looks.

It exports as ordinary 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. That is the SVG painter's model (SVG 2 section 3.3) doing what it always did - successive paint operations, each compositing onto what came before - so the file renders in any browser with no editor-specific markup.

Graphic styles are the one thing SVG cannot name: it performs a multi-pass appearance but has no construct for naming one and referencing it the way a linearGradient names a paint server. So a style is resolved when the file is written, and each shape exports the passes it paints. Reopen the .svgs and the link is still there.

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 colour 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 colour 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, that is the point of linking rather than copying. Adding or reordering a layer on a shape that wears a style writes to the style and reaches every other shape wearing it. Recolouring that shape moves only that shape. Use "Detach" if you want a shape to stop following.

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