SVG drawing in React JS frontend

In this article, we will see how to create an interface on which a user can create drawings, write names, and pretty much any artistic work. You can use this feature to allow users to sign on a page. Here we will use the "react-hooks-svgdrawing" package.

First create a React project −

npx create-react-app tutorialpurpose

Go to the project directory −

cd tutorialpurpose


Install the react-hooks-svgdrawing package −

npm i --save react-hooks-svgdrawing

This library will be used to implement the container which will allow us to make a drawing or anything in the form of SVG using mouse or touchpad.

Add the following lines of code in App.js

import React, { useCallback } from "react";
import { useSvgDrawing } from "react-hooks-svgdrawing";

export default function App() {
   const [renderRef, draw] = useSvgDrawing({
      penWidth: 10, // pen width
      penColor: "#e00", // pen color
      close: false, // Use close command for path. Default is false.
      curve: true, // Use curve command for path. Default is true.
      delay: 60, // Set how many ms to draw points every.
      fill: "none", // Set fill attribute for path. default is `none`
   const handleDownload = useCallback(() => {; // default svg download{ extension: "svg", filename: "a.svg" });{ extension: "png", filename: "b.png" });{ extension: "jpg", filename: "c.jpg" });
   }, []);
   const handleChangeParameter = useCallback(() => {
      // Change pen config draw.changePenColor("#00b");
      // Change pen width draw.changePenWidth(10);
      // Change fill attribure of svg path element. draw.changFill("#00b");
      // Change throttle delay of drawing draw.changeDelay(10);
      // Set whether to use curved comma for svg path element. draw.changCurve(false);
      // Set whether to use curved comma for svg path element. draw.changeClose(true);
   }, [draw]);
   return (
         style={{ width: 500, height: 500, border: "1px solid black" }}
         ref={renderRef} />
         <button onClick={draw.clear}>clear</button>
         <button onClick={draw.undo}>undo</button>
         <button onClick={handleDownload}>download</button>


useSvgDrawing takes two arguments

  • one is a reference, which is assigned to any element to make an area or element drawable, and

  • the second argument is draw, which usually handles every setting like pen width, pen color, downloading the drawing, undo, clear, etc.


Now, let's check the output −

Updated on: 29-Sep-2021

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started