SVGSketch Learn

How to Change SVG Color or Use currentColor

Replace palette colors, isolate changes to a copy, and save reusable document tokens with free editing tools.

Open SVGSketch

Quick answer

For one object, use Appearance. For matching objects, choose Select > Select Same Fill Color or Select Same Stroke Color. For a palette swap that preserves the other colors, use Edit > Recolor Artwork, preview replacements, and Apply. Document Tokens manages the reusable values created by token conversion.

Steps at a glance

  1. Choose the right tool

    Use Appearance for object paint, Recolor Artwork for palette changes, and Document Tokens for reusable values.

  2. Gather or isolate artwork

    Use Select Same Color, or select a duplicated group and keep Selection scope for isolated edits.

  3. Preview and apply

    Replace colors, compare Original and Preview, then Apply in one undo step.

  4. Keep reusable colors

    Convert eligible colors into document tokens and manage them in Document Tokens.

Fill colors, currentColor, and color variables

FILL TYPESSolidLinearRadialPatternNo FillFill panel > Type
Five ways to fill a shape The Fill panel’s Type control, rendered by the editor’s own paint-server emission. No Fill is the one to reach for when a backdrop shape has to stay in the file.
FILL="CURRENTCOLOR"#1d4ed8#0f766e#b91c1cOne exported mark, three CSS color values
currentColor follows the page The same exported star in all three panels. Nothing about the SVG changes - only the CSS color of the element around it, which is what makes one icon serve a light and a dark theme.
SHARED COLOR VARIABLE#1d4ed8#0f766e#b45309fill="var(--brand)" on every shape
Recolor shapes with a shared variable Three shapes, one --brand token, three values. Edit the reusable value in Document Tokens, replace palette groups in Recolor Artwork, or gather matching objects with Select Same Color.
Adventure poster with a teal preview and the Recolor Artwork property panel on the right
Recolor Artwork in the property rail Preview a palette replacement on the adventure poster, then Apply in one undo step.
Select menu showing both Select Same Color commands below Invert Selection
Select by effective color Select Same Fill Color and Select Same Stroke Color gather matching artwork without changing its paint.

Try the examples yourself

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

SVGAdventure poster Duplicate the poster, recolor the copy, then convert supported colors into reusable tokens.Download SVG

Step 1: Edit one object in Appearance

Select an object and open Appearance to edit its fill/stroke layers, gradients, opacity, and effects. Recolor Artwork serves palette-wide changes; it does not replace these object controls.

Step 2: Gather objects with the same color

Select a colored object, then choose Select > Select Same Fill Color or Select Same Stroke Color. Matching uses the effective base color across literals, tokens, inherited paint, and provable currentColor, ignoring alpha and opacity. It searches visible, unlocked artwork within the current document or group editing scope.

Gradients, mixed-color instances, animated paint, and uncertain styles are skipped rather than approximated. The command changes selection without adding a document edit. It is also in the command palette, with configurable shortcuts that start unassigned.

Step 3: Replace a palette in Recolor Artwork

Open Recolor Artwork from the right property rail or Edit menu. Selection scope isolates edits to selected artwork by forking shared sources; document scope covers the document. Enter replacements for individual palette groups or use Advanced options for hue, chroma, and lightness adjustments. Source alpha is preserved.

Compare Original and Preview, review exclusions and outside impacts, then Apply in one undo step. Shared editing deliberately changes shared consumers. Changing the document makes a draft stale and requires Refresh; changing selection requires Use current selection to retarget the draft.

Step 4: Save reusable values as document tokens

Enable token conversion in Recolor Artwork and review generated or reused names before Apply. Document Tokens manages the resulting definitions, their expressions, usage, and rename operations. Changing a token updates supported authored var references. A color-picker palette stores literal swatches in editor settings; document tokens live with the artwork.

Copy/paste carries reachable tokens and dependencies into another document, sharing equivalent definitions or allocating distinct names for conflicts. SVGSketch SVG exports recover supported token names and values on reopening. Tokens retain one default value; a separate light/dark token system is deferred.

Step 5: Try an isolated brand variant

Download the adventure poster SVG from the examples above. Open it, select all artwork, group it, duplicate it, and move the copy beside the original. Select the copy, open Recolor Artwork, keep Selection scope, and replace blue with teal.

The shared gradient can be forked for the copy while the original stays unchanged. Compare, Apply, Undo, and Redo. Convert supported colors to tokens, rename a token in Document Tokens, and export/reopen SVG to try recovery. The preview also supports artwork outside the document frame.

Step 6: Automate the same workflow

The free CLI provides colors, recolor, and tokenize commands for SVG, native SVGSketch, Illustrator, PDF, and EPS inputs. Inspect JSON inventory, choose literal replacements or named token targets, then dry-run or write native/SVG output. Versioned recipes validate fingerprints before applying group-addressed requests.

The SDK DocumentBuilder exposes inventory, recolor, and token-conversion methods over the same planner. Refusals leave the builder unchanged, and diagnostics-bearing forms report exclusions and outside impacts. The SDK and CLI references linked below provide runnable examples and atomic-output contracts.

Step 7: Choose an output for its consumer

SVG retains supported token references, document-scoped declarations, and derived fallback colors. Maximum Compatibility adds legacy color floors while keeping supported variable expressions. PDF conversion and Action PNG previews resolve supported static token colors for their consumers; uncertain or unsupported sites retain authored values and diagnostics. Existing PDF export licensing is unchanged.

currentColor can inherit from surrounding page CSS when SVG is inline. An SVG used through an img element has its own document context, so it does not inherit a host-page token or color merely because the parent sets it. Test the intended embedding and review export diagnostics.

Related SVGSketch resources

DocumentBuilder recoloringRead more CLI colors, recolor, and tokenizeRead more How to add gradients to SVGRead more How to make SVG background transparentRead more How to embed SVG in HTMLRead more Multiple fills and strokesRead more

FAQ

How do I swap one color without flattening the whole illustration?

Use Recolor Artwork to replace that palette group while keeping the other groups. Select a copy and keep the default fork policy to isolate shared sources.

How does Select Same differ from Recolor Artwork?

Select Same gathers objects whose effective fill or stroke has the same base color. Recolor Artwork changes authored palette sources and can isolate shared gradients, styles, or tokens for a selection.

Are recoloring and token conversion free?

Yes. Recolor Artwork, token conversion, Select Same Color, and Document Tokens are free editing features. Existing advanced-export and plugin licensing remains unchanged.

Does this add light/dark token values?

No. Tokens retain one default value. Authored CSS keeps its existing support, and separate native light/dark values are deferred.

Will token colors survive SVG export and reopening?

Supported exported references include derived fallbacks, and recognized SVGSketch declarations recover token names and values on reopening. Native .svgs preserves token IDs and metadata; SVG carries supported names and values. Uncertain sites remain authored and are reported.

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