jQuery | DrawSVG Plugin

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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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=
      
        <link rel="stylesheet" href="style.css">
      
        <script async src=
            "//assets.codepen.io/assets/embed/ei.js">
        </script>
        <script src=
        </script>
        <script src=
        </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>

    chevron_right

    
    

  • 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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=
        <link rel="stylesheet" href="style.css">
      
        <script async src=
    "//assets.codepen.io/assets/embed/ei.js">
        </script>
        <script src=
        </script>
        <script src=
        </script>
        <script src="jquery.drawsvg.min.js"></script>
      
        <style>
            body {
                background: green;
                text-align: center;
            }
               
            .height {
                height: 10px;
            }
               
            /* SVG element is fixed for visibilty */
            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>

    chevron_right

    
    

  • 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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=
        <link rel="stylesheet" href="style.css">
      
        <script async src=
    "//assets.codepen.io/assets/embed/ei.js">
        </script>
        <script src=
        </script>
        <script src=
        </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>

    chevron_right

    
    

  • Output: The animation always depends on the speed of scrolling.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.