SVG shape to path converter

Convert shapes to paths

The sample is a camera drawn from all six shapes and one path. On the left it is drawn as pasted, on the right converted, both by scrollDraw with its default selector: watch the shutter button, an <ellipse>, and the rounded body.

What each shape becomes

The SVG 2 spec defines every basic shape as a path, and these are those paths in absolute commands, with a circle or an ellipse as two half arcs (the spec writes four quarter arcs, which the 4 arcs setting gives). Each starts where the browser starts the shape: a rect, circle or ellipse runs clockwise, a line or poly shape in the order of its points. So a dash animation on the path begins at the same point as one on the shape (fig. 1).

<!-- before -->
<circle cx="50" cy="50" r="40"/>
<rect x="10" y="10" width="80" height="40"/>
<rect x="10" y="10" width="80" height="40" rx="8"/>
<polygon points="10,10 90,10 50,80"/>

<!-- after -->
<path d="M90 50 A40 40 0 1 1 10 50 A40 40 0 1 1 90 50 Z"/>
<path d="M10 10 H90 V50 H10 Z"/>
<path d="M18 10 H82 A8 8 0 0 1 90 18 V42 A8 8 0 0 1 82 50 H18 A8 8 0 0 1 10 42 V18 A8 8 0 0 1 18 10 Z"/>
<path d="M10 10 L90 10 L50 80 Z"/>

rx, ry and the edge cases

A rect’s corners follow a few rules that are easy to get wrong by hand, and some shapes draw nothing at all. The converter reads each one the way the browser does, and the note below lists where browsers disagree.

Why convert shapes to paths

To draw every shape. scrollDraw animates what its selector option matches, and the default is 'path, polyline, line, polygon, rect, circle'. An <ellipse> is not in it, so it sits there fully drawn while the rest of the drawing animates. As a path it draws.

To measure every shape the same way. scrollDraw sizes the dash of a <rect> as 2 × (width + height), which is longer than a rounded rect’s outline, so its line is whole before the scroll is done. A path is measured along its curves with getTotalLength(). The converter’s table shows both numbers.

To morph. morphTo moves a path’s d toward another, number by number, and only works on a <path>: on a shape it does nothing. A circle and an ellipse converted with the same arcs setting share their commands (M A A Z), as do two polygons with as many points, so one morphs into the other. A rect and a circle do not, and scrollDraw warns in development.

For anything that takes path data. CSS offset-path: path(), clip-path: path() and the path attribute of SMIL’s <animateMotion> take a d string. The Path data tab gives just those strings.

// <div id="badge"><svg viewBox="0 0 200 100"><path d="M150 50 A50 50 0 1 1 50 50 A50 50 0 1 1 150 50 Z" fill="none" stroke="currentColor"/></svg></div>

import { scrollDraw } from 'svg-scroll-draw';

// A circle and an ellipse converted with the same arcs setting share their
// commands (M A A Z), so one can morph into the other as it draws.
scrollDraw('#badge', {
  morphTo: 'M150 50 A50 30 0 1 1 50 50 A50 30 0 1 1 150 50 Z',
});

import { scrollDraw } from 'svg-scroll-draw';

// Or keep the <ellipse>: the default selector, plus ellipse.
scrollDraw('#drawing', {
  selector: 'path, polyline, line, polygon, rect, circle, ellipse',
});

Shape to path questions

Drawing the paths on scroll with svg-scroll-draw 2.23.3: the docs, or the SVG path viewer to measure and check them.