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.
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.
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.Â
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:
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>
Output: The animation always depends on the speed of scrolling.Â
Similar Reads
jQuery Page Piling Plugin jQuery pagePiling.js plug-in is a rich feature available for programmers for piling more than one layout section, one over the other, and accessing each page by URL or mouse scrolling or side bullets navigation. This feature provides all type of smooth vertical, horizontal, and side navigations to t
5 min read
jQuery | Flickerplate Plugin jQuery provides Flickerplate plugin that helps our programmers to create sliders for websites that can cycle through a list of background images along with dot navigation feature and animated arrows. The plugin consists of many more libraries that are responsible for touch detections and events such
5 min read
jQuery Multiscroll Plugin jQuery provides multiscroll.js plugin which helps programmers to create split web pages along with divided multiple vertical scrolling panels.Note: Please download the jQuery multiscroll plugin to your working folder and include the required files in the head section of your code as shown below. Dow
3 min read
jQuery RowGrid Plugin jQuery provides a very simple, user-friendly and responsive rowGrid plugin that helps programmers to display images in a straight row. It is very lightweighted and supports infinite scrolling feature. Real examples of rowGrid are Google+ images or Google image search that appears in a straight row g
4 min read
jQuery Alertify Plugin jQuery framework provides alertify.js plugin that provides pre-designed customizable notification system along with interactive browser dialogs. This extensible and themeable plugin is very useful for developers providing an optimized version of alert messages with stacking up to feature. This small
5 min read
jQuery Image ProgressBars Plugin In this article, we will learn how to implement image ProgressBar feature using the jQuery Image ProgressBar plugin. Note: Please download the jQuery Image ProgressBar plugin in the working folder and include the required files in the head section of your HTML code. <link href=â€progressbar.css†r
2 min read
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 drawin
4 min read
jQuery Tagsort Plugin jQuery provides Tagsort plugin that is used for displaying tags or filter elements based on different tags in a DOM. The plugin takes data-attributes of HTML page structure and dynamically creates user-friendly tags used for filtering elements. The filtration of elements are done in many ways that a
9 min read
jQuery Logos Distort Plugin The jQuery provides LogosDistort plugin which helps in creating or animating a parallax environment for 3D scenes in the user browser. It uses full-page matrix3D perspective logos distortions for transforming base on mouse movement. You have to download the required files in the working folder so th
4 min read
jQuery Filer Plugin jQuery provides a quick jQuery Filer uploader plugin for easy implementation of uploading the files. It provides features like instant uploading of files, file append, file removal, multiple selections, drag and drop support along with other file validations.Download the required files to include it
2 min read