jQuery | DrawSVG Plugin

Last Updated : 01 Sep, 2021

SVG or Scalar Vector Graphics is Extended Markup Language-based graphics supporting 2 dimensional animations of images enhancing interactiveness. The specifications of SVG are open standards by World Wide Web Consortium defined in XML text files. These files can be changed or created with any drawing software or text file editors.
The jQuery provides Drawsvg.js plugin to draw or animate SVG images in a variety of ways for a developer’s web pages, which is very lightweight and easy to use. The paths of SVG images are drawn in animation along with stagger and easing support options. Download the required files and keep it in your working folder to include in your code as shown in the following programs.
Example 1: The following example demonstrates the simple animation of rectangle with circular vertex, using jQuery DrawSVG plugin. The path element is the most significant element for creating basic shapes like lines and arcs in SVG library. It can also create complex shapes combining many basic ones. “d” is the parameter for defining shape of element.

Program:

html

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
 
    <title>jQuery DrawSVG Plugin</title>
 
    <link rel="stylesheet" href=
"https://fonts.googleapis.com/css?family=Open+Sans:400,600">
 
    <link rel="stylesheet" href="style.css">
 
    <script async src=
        "//assets.codepen.io/assets/embed/ei.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/jquery/1.11.3/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/jquery.easing/1.3/jquery.easing.1.3.min.js">
    </script>
    <script src="jquery.drawsvg.min.js"></script>
 
    <style>
        body {
            background: green;
            text-align: center;
        }
 
        .height {
            height: 10px;
        }
 
        svg {
            width: 550px;
            position: fixed; // for visibility
            margin: auto;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
    </style>
</head>
 
<body>
    <h1 style="color:white">GeeksforGeeks</h1>
    <b>jQuery DrawSVG plugin</b>
 
    <div class="wrapper">
        <svg width="200" height="200"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 145 260">
             
            <g stroke="#FFFFFF" stroke-width="3">
             
                <!-- Z is for Close Path -->
                <path d="M 10 10 H 90 V 90 H 10 L 10 10 Z"
                    fill="transparent" stroke="black" />
 
                <!-- The Points -->
                <circle cx="12" cy="12" r="10" fill="red" />
                <circle cx="92" cy="94" r="10" fill="red" />
                <circle cx="90" cy="14" r="10" fill="red" />
                <circle cx="10" cy="92" r="10" fill="red" />
            </g>
        </svg>
    </div>
 
    <script>
 
        // Initialization 
        var $svgVar = $('svg').drawsvg();
        $svgVar.drawsvg('animate');
    </script>
</body>
 
</html>

Output:

Example 2: The following example demonstrates the drawsvg() method along with options setting and using callback method. The callback function is executed, once the animation is completed.

Program:

html

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <title>jQuery DrawSVG Plugin</title>
    <link rel="stylesheet" href=
"https://fonts.googleapis.com/css?family=Open+Sans:400,600">
    <link rel="stylesheet" href="style.css">
 
    <script async src=
"//assets.codepen.io/assets/embed/ei.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/jquery/1.11.3/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/jquery.easing/1.3/jquery.easing.1.3.min.js">
    </script>
    <script src="jquery.drawsvg.min.js"></script>
 
    <style>
        body {
            background: green;
            text-align: center;
        }
          
        .height {
            height: 10px;
        }
          
        /* SVG element is fixed for visibility */
        svg {
            position: fixed; 
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>
 
<body>
    <h1 style="color:white">GeeksforGeeks </h1>
    <b>DrawSVG plugin with callback method</b>
    <div class="wrapper">
        <svg viewBox="0 0 200 260"
             style="background-color:#ffffff00"
             xmlns="http://www.w3.org/2000/svg"
             width="200" height="250">
              
            <g stroke="#FFFFFF" stroke-width="3" fill="none">
                <!--The shape of path element is defined
                    by "d" parameter -->
                <path d="M157.068 33H165c4.77 0 9 4.464 9
                         9.706v202.758c0 5.243-4.288 
                         9.536-9.524 9.536H10.524C5.288
                         255 1 250.707 1 245.464V42.707C1
                         37.464 5.06 33 10.017 33h9.203" />
               
                <!--The "Move to" command is called with M  -->
                <path d="M103.302 33H157v45H19V33h52.72" />
               
                <!--Co-ordinates by "d" are unitless in
                    the user coordinate system-->
                <path d="M18.696 103h137.896v.17" />
                <path d="M18.738 155h137.854v.068" />
                <path d="M18.738 178h137.854v-.006" />
                <path d="M18.696 227h137.868v-.21" />
            </g>
        </svg>
    </div>
    <div id="callbackDiv"></div>
 
    <script>
        var $svg = $("svg").drawsvg({
            stagger: 2000, // Break is set to 2 seconds
            duration: 5000,
            callback: function() {
                $('#callbackDiv').html('
<p>
                   <strong>Animation completed !</strong>
               </p>
');
            }
        }).drawsvg("animate");
    </script>
</body>
 
</html>

Output:

Example 3: The following example demonstrates the drawsvg() method with the page scroll event. The path is animated in a fade-in and fade-out style depending on the user scrolling of page in up and down direction. The current page needs to be scrollable as shown below in the script.

Program:

html

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <title>jQuery DrawSVG Plugin</title>
    <link rel="stylesheet" href=
"https://fonts.googleapis.com/css?family=Open+Sans:400,600">
    <link rel="stylesheet" href="style.css">
 
    <script async src=
"//assets.codepen.io/assets/embed/ei.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/jquery/1.11.3/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/jquery.easing/1.3/jquery.easing.1.3.min.js">
    </script>
    <script src="jquery.drawsvg.min.js"></script>
 
    <style>
        body {
            background: green;
            text-align: center;
        }
          
        .wrapper {
            height: 1800px;
        }
          
        /* For visibility */
        svg {
            position: fixed; 
            margin: auto;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
    </style>
</head>
 
<body>
    <h1 style="color:white">GeeksforGeeks</h1>
    <b>Draw On Scroll, Please scroll down and up</b>
    <div class="wrapper">
        <svg style="background-color:#ffffff00"
             xmlns="http://www.w3.org/2000/svg"
             width="200" height="150"
             viewBox="0 0 200 150">
              
            <g stroke="#FFFFFF" stroke-width="2" fill="none">
             
                <!--The path element is the general shape used in SVG -->
                <path d="M137.484 69.432c0 37.536-30.425 67.96-67.97
                         67.96-37.535 0-67.953-30.424-67.953-67.96C1.56 
                         31.9 31.98 1.474 69.516 1.474c37.544 0 67.97 
                         30.425 67.97 67.958z" />
                <path d="M118.228 68.774c0 26.78-21.702 48.488-48.496 
                         48.488-26.772 0-48.48-21.71-48.48-48.488 0-26.776
                         21.708-48.48 48.48-48.48 26.794 0 48.496 21.704 
                         48.496 48.48z" />
                <path d="M37 68.998C37 50.773 51.55 36 69.495 36" />
                <path d="M128.008 104.035l54.93 55.05c5.754 5.764 5.758
                         15.208.007 20.98l-2.886 2.894c-5.752 5.772-15.174 
                         5.783-20.94.024l-55.128-55.078" />
            </g>
        </svg>
    </div>
 
    <script>
        var $docVar = $(document),
            $winVar = $(window),
            $svgVar = $('svg').drawsvg(),
            max = $docVar.height() - $winVar.height();
 
        $winVar.on('scroll', function() {
            var p = $winVar.scrollTop() / max;
            $svgVar.drawsvg('progress', p);
        });
    </script>
</body>
 
</html>