SVG to JSX converter

Convert SVG to a React component

The sample is a cup of coffee, exported the way a drawing tool writes a file. Change any option and the code follows; the table under it says what changed and why. The preview is the drawing itself, rebuilt from its shapes, never the code.

What changes, and why

Names follow react-dom’s own table of SVG attributes, the one behind its “Invalid DOM property” warning, so every prop written here renders back as the attribute the SVG had. Each row below is the converter’s output for the snippet beside it.

Drawing it on scroll

With the wrap on, the <svg> goes inside <ScrollDraw> from svg-scroll-draw/react. It renders a <div> around the drawing and draws every path, line, polyline, polygon, rect and circle in it along its stroke as the page scrolls, from when the div’s top comes up past the bottom of the window (start: 'top bottom') to when its bottom leaves the top (end: 'bottom top'). Only the options you change are written: the easing is 'linear' and the stagger 0 unless you say otherwise.

import { ScrollDraw } from 'svg-scroll-draw/react';
import type { SVGProps } from 'react';

export function CheckDrawn(props: SVGProps<SVGSVGElement>) {
  return (
    <ScrollDraw easing="ease-out" stagger={0.2} once>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
        width="1em"
        height="1em"
        {...props}
      >
        <circle cx="12" cy="12" r="10" />
        <path d="M7 12.5l3.5 3.5 6.5-7" />
      </svg>
    </ScrollDraw>
  );
}

// app/page.tsx: a Server Component. No "use client" anywhere.
import { CheckDrawn } from './CheckDrawn';

export default function Page() {
  return <CheckDrawn className="check" aria-label="Done" />;
}

className and style on <ScrollDraw> go on its div, and so do data-*, aria-*, id and role; every other prop is an option. Changing one draws it afresh, and an inline object such as trigger={{ end: 'center center' }} does not count as a change each render, because options are compared by value. Left at its defaults, or with only the easing changed to ease-in, ease-out or ease-in-out, the drawing runs on the browser’s own scroll timeline where that is supported; spring, bounce, elastic, a stagger, once, another trigger or fillOpacity use the JavaScript engine. A visitor who asks for reduced motion gets the drawing whole.

What is left out

The paste is read by the browser’s XML parser into a document that is never put on the page, so nothing in it runs or loads while you convert. Two outputs come from it (fig. 1). The code is written from that document, and Convert: everything keeps all of it but what could run or what only an editor reads. Convert: drawing only writes the code from what the preview shows instead: the same strict rebuild the SVG path viewer uses, drawing elements and drawing attributes only.

SVG to JSX questions

Drawing on scroll with svg-scroll-draw 2.23.3: React, Next.js, or the docs.