The JQuery SVG Plugin : How to Use SVG in JQuery

Digital Graphics File Format IconsWriting things in Javascript can end up being very messy and difficult. Programmers are often looking for ways to make their life easier and make it so they can reuse portions of their code to make their end product in a more efficient and quick manner. Often, you’ll find that programmers like to use something called a “library,” which can simplify the coding process and is essentially a repository of re usable code snippets and also can contain frameworks to help set up a coding infrastructure. JQuery is one of these libraries and is a very effective library that can be used to make client-side HTML/Javascripting easier.

In this article, we will give you a brief overview how and why to use jQuery to make SVG images appear on the web. If you’re a beginning, you may want to take this course on jQuery to start learning the language from scratch.

JQuery is popular because it is simple and effective. Almost all of the most visited websites on the net today use jQuery for this very reason. It is by far the most popular library for Javascript that anyone uses. JQuery also allows plugins to enable further complexity and functionality in the system, including the jQuery SVG plugin. JQuery is a very easy framework to include and call in a website, as it is contained inside a single file and is useable by calling a local copy of the library, or a publicly available version.

While many people use jQuery for mundane purposes, you can use it for many things. Often, websites will use jQuery for interfaces. If you would like to know more, try this jQuery for Interfaces course or have a look at this In Depth jQuery Tutorial for UI to gain a greater understanding of how you might approach using jQuery in your own projects.

What does SVG Mean?

SVG, or Scalable Vector Graphics, is a language that can be used to describe vector graphics online and offline. SVG is a descriptive language that allows you to tell a computer how to display a given graphic. SVG is a vector format, therefore can be resized to any size without a loss in quality or sharpness, making it extremely flexible, especially for responsive web design. Within the SVG format, you can make text, images and paths display correctly on all devices.

The JQuery SVG Plugin

The jQuery SVG plugin allows you to change and alter the parameters of an image in the SVG via JavaScript, which makes it a very powerful and flexible tool. SVG format images are common on the web, and this jQuery SVG plugin is easy to use and implement in your own site. One of the most commonly accessed websites on the web, Wikipedia, uses these SVG images as a way to show open source, vector based images.This article about SVG Path Animation over at TreeHouse blog is great if you want to learn more.

JQuery SVG allows you to create many simple basic shapes with little effort, including the ability to make squares, rectangles with rounded corners, standard rectangles and oblong shapes, circles, ellipses, basic lines, multi faceted lines, and any type of polygon.

As a standard vector illustration program would provide, you can give each shape its own fill color and border coloring. In addition to standard shapes, you can call irregular shapes, given you understand how to code them. The SVG plugin allows movement and rotation, as well as other forms of transformations too, so you can really create a huge spectrum of different types of images.

Original SVG Examples

<rect x="20" y="50" width="100" height="50"
fill="yellow" stroke="navy" stroke-width="5"  />

If you were to input this directly in to your SVG illustration program, you would be given a rectangle, with a yellow fill and having a thick blue border surrounding it.

<rect x="150" y="50" width="100" height="50" rx="10"
fill="green" />

If you were to input this directly in to your SVG illustration program, you would be given a rectangle, with a green fill and having no border surrounding it.

JQuery SVG Examples

svg.rect(20, 50, 100, 50,
{fill: 'yellow', stroke: 'navy', strokeWidth: 5});

This example is the same as the yellow example above, but written so that your website will understand what to display when you install the SVG jQuery plugin.

svg.rect(150, 50, 100, 50, 10, 10, {fill:
'green'});

This example is the same as the second prior example, written for the SVG plugin for jQuery.

SVG is used for many purposes, but it is most suited to technical drawings or graphs. Many scientists and mathematicians use SVG illustration in their websites and works because it is highly accurate and easier than creating these graphs and illustrations by hand. In addition to standard illustrations, jQuery SVG can be used to plot data points on to axis with a simple command. Again, this is easier than using a different program like Microsoft Excel, as you can re use these code snippets every time you wish to create a type of graph that you have made before.

Using SVG and jQuery can be complex, but the results are often worth it. Hopefully, you have an idea of how you might go about using these technologies now and you will be able to spot them when you see them in other websites. jQuery and JavaScript is becoming a very important skillset to have as more and more employers want their staff to be able to multi task. Make sure you are up to date in regards to your programming.

Mastering SVG, jQuery, and Javascript in general can be a difficult task as there are a large amount of variables and little tricks and tips that you pick up over the years.Take this course on mastering jQuery and Javascript that will save you countless hours of banging your head on your desk as you try to figure out where the syntax is incorrect or how you missed out a single closing bracket. As well as that, it will show you how to write more efficient, faster code in JavaScript.