PGN and FEN to SVG Chess Diagram Plugin

Name: Chess for SVGSketch
Author: SVGSketch

Quick answer

The Chess plugin converts FEN positions, PGN games, and plain move lists into chess diagrams made of ordinary SVG shapes. It can draw a single position, a filmstrip of several positions across a game, or an animated board that plays the moves on the document timeline. Placed boards keep their notation and regenerate in place from edited text.

Steps at a glance

Enter a position or game

Type or paste FEN, PGN, or a list of moves in the Chess plugin.

Choose the output

Pick a single position, a filmstrip of moves, or an animated game.

Place the board

Click and drag on the canvas to place the board at the size you want.

Refine or re-edit

Restyle the squares and pieces directly, or select the board to edit its notation.

From notation to an editable board

Type or paste a FEN position, a PGN game with its tag pairs, a bare list of moves in algebraic notation, or a list of UCI moves like e2e4 e7e5. The plugin recognizes which one you gave it and says so as you type, then previews the board live.

What lands on the canvas is not an image. Every square is its own rectangle, every piece is a group of paths, and the rank and file labels are text - so you can recolor a single square, restyle a piece, or pull the whole board apart like any other artwork.

Move legality, castling, en passant, and promotion are resolved by chess.js, so a game score reproduces exactly the position it reached. Positions that a chess engine would call unplayable but a diagram needs anyway - a teaching position with no kings, or an empty board to place pieces on by hand - are accepted too.

One position, a filmstrip, or an animation

Position mode draws the board after any ply you choose. Filmstrip mode lays out several diagrams in a grid, one per move or every Nth move, each captioned with its move number and notation - the format chess books and puzzle columns use to show a sequence on the page.

Animated mode places one board and gives every piece its own animation track: pieces slide between squares, captured pieces fade out, castling moves the king and rook together, and a promoted piece fades in as the pawn fades out. Move duration, the pause between moves, easing, capture style, looping, and whether it plays on load or on click are all configurable.

The animation is not baked into the artwork. Its tracks land on the document timeline, so you can open the Animation panel and retime, delete, or add keyframes like anything else you animated by hand, and exporting animated SVG emits real SMIL.

Diagram styling and PGN annotations

Square colors come from a set of board themes or from two color pickers. Coordinates, the border frame, and the highlight on the move being shown can each be switched off, and the board can be flipped to put Black at the bottom.

Arrow and square-highlight commands written into PGN comments - the [%cal] and [%csl] syntax used by Lichess and ChessBase - are drawn on the board in the colors the comment names, so an annotated line arrives with its annotations intact.

Stays editable after placement

Placed boards remember their notation and every option used to draw them. Select one and the plugin panel lets you change the position, switch between a diagram and an animation, or restyle the board and regenerate it in place, with a single undo step restoring the previous version.

Included workflows

FEN and PGN input

Paste a position or a whole game with a live board preview as you type.

Move filmstrips

Lay a sequence of positions out in a captioned grid for print.

Animated playback

Play the moves on the document timeline and export real SMIL.

Re-editable boards

Placed diagrams keep their notation for in-place regeneration.

FAQ

Can SVGSketch make a chess diagram from FEN?

Yes. Paste a FEN position and the Chess plugin draws the board as editable SVG shapes - one rectangle per square, one group of paths per piece - with configurable colors, coordinates, and orientation.

Does it animate a PGN game?

Yes. Animated mode gives each piece its own track on the document timeline, so the moves play with configurable duration, pause, and easing, captures fade, and the result exports as animated SVG using SMIL. Because the tracks are ordinary timeline tracks, you can keep editing them in the Animation panel.

Does it support PGN variations?

No. Only the main line is played. When a PGN contains parenthesised variations the plugin says so in the popout and draws the main line; there is no way to pick a variation to diagram. Comments, including the [%cal] and [%csl] arrow and highlight commands, are read from the main line.

Does the plugin analyse positions or suggest moves?

No. It validates that moves are legal and works out the resulting positions, but it does not evaluate positions, score them, or suggest moves. It is a diagram and animation tool, not a playing engine.