jQuery plugin for using SVG graphics. Part 1

There are a lot of drawing libraries for working with SVG. We will look at a jQuery plugin.

Introduction

Plug-in by Keith Wood, lives in Sydney, Australia. Works in Fairfax Media as Java Developer. Over the years, contributing to the jQuery community. Working on a jQuery plugin development book.

The jquery.svg.js plugin allows you to manipulate vector graphics to the SVG 1.1 specification.
Examples with description
Reference documentation

To connect the plug-in, write style files and a plug-in to the head section.

<style type="text/css">@import "jquery.svg.css";</style> <script type="text/javascript" src="jquery.svg.js"></script> 

Also, if necessary, we add plug-in extensions.

 <script type="text/javascript" src="jquery.svganim.js"></script> 

SVG canvas attached to a div as a function

 $(selector).svg(); 

selector - id property of the div tag
svg () is a plugin function.
')
The following manipulations with the canvas are possible:

• Getting a wrapper for a given container
  

   $(selector).svg('get'); 

  
  example
  

   var svg = $('#svgintro').svg('get'); svg.circle(130, 75, 50, {fill: 'none', stroke: 'red', strokeWidth: 3}); 

  
  
• Removing functionality for a given container
  

   $(selector).svg('destroy'); 

  
  
• URL of source document to insert
  

   $(selector).svg({loadURL: 'lion.svg'}); 

  
  
• The call to the drawIntro function with the drawing code of the plugin methods
  

   $(selector).svg({onLoad: drawIntro}); 

  
  example drawIntro function
  

   function drawIntro(svg) { svg.circle(75, 75, 50, {fill: 'none', stroke: 'red', strokeWidth: 3}); var g = svg.group({stroke: 'black', strokeWidth: 2}); svg.line(g, 15, 75, 135, 75); svg.line(g, 75, 15, 75, 135); } 

  
  Result
  
  

For comparison, I will give the code in SVG format and the code of the jQuery plugin.

svg code

 <rect x="20" y="50" width="100" height="50" fill="yellow" stroke="navy" stroke-width="5" /> <rect x="150" y="50" width="100" height="50" rx="10" fill="green" /> <g transform="translate(270 80) rotate(-30)"> <rect x="0" y="0" width="100" height="500" rx="10" fill="none" stroke="purple" stroke-width="3" /> </g> <circle cx="70" cy="220" r="50" fill="red" stroke="blue" stroke-width="5" /> <g transform="translate(175 220)"> <ellipse rx="75" ry="50" fill="red" /> </g> <ellipse transform="translate(300 220) rotate(-30)" rx="75" ry="50" fill="none" stroke="blue" stroke-width="10" /> <g stroke="green" > <line x1="450" y1="120" x2="550" y2="20" stroke-width="5" /> <line x1="550" y1="120" x2="650" y2="20" stroke-width="10" /> <line x1="650" y1="120" x2="750" y2="20" stroke-width="15" /> <line x1="750" y1="120" x2="850" y2="20" stroke-width="20" /> <line x1="850" y1="120" x2="950" y2="20" stroke-width="25" /> </g> <polyline fill="none" stroke="blue" stroke-width="5" points="450,250 475,250 475,220 500,220 500,250 525,250 525,200 550,200 550,250 575,250 575,180 600,180 600,250 625,250 625,160 650,160 650,250 675,250" /> <polygon fill="lime" stroke="blue" stroke-width="10" points="800,150 900,180 900,240 800,270 700,240 700,180" /> 

the same picture code in jQuery.SVG

 svg.rect(20, 50, 100, 50, {fill: 'yellow', stroke: 'navy', strokeWidth: 5}); svg.rect(150, 50, 100, 50, 10, 10, {fill: 'green'}); var g = svg.group({transform: 'translate(270 80) rotate(-30)'}); svg.rect(g, 0, 0, 100, 50, 10, 10, {fill: 'none', stroke: 'purple', strokeWidth: 3}); svg.circle(70, 220, 50, {fill: 'red', stroke: 'blue', strokeWidth: 5}); var g = svg.group({transform: 'translate(175 220)'}); svg.ellipse(g, '', '', 75, 50, {fill: 'yellow'}); svg.ellipse('', '', 75, 50, {transform: 'translate(300 220) rotate(-30)', fill: 'none', stroke: 'blue', strokeWidth: 10}); var g = svg.group({stroke: 'green'}); svg.line(g, 450, 120, 550, 20, {strokeWidth: 5}); svg.line(g, 550, 120, 650, 20, {strokeWidth: 10}); svg.line(g, 650, 120, 750, 20, {strokeWidth: 15}); svg.line(g, 750, 120, 850, 20, {strokeWidth: 20}); svg.line(g, 850, 120, 950, 20, {strokeWidth: 25}); svg.polyline([[450,250], [475,250],[475,220],[500,220],[500,250], [525,250],[525,200],[550,200],[550,250], [575,250],[575,180],[600,180],[600,250], [625,250],[625,160],[650,160],[650,250],[675,250]], {fill: 'none', stroke: 'blue', strokeWidth: 5}); svg.polygon([[800,150],[900,180],[900,240],[800,270],[700,240],[700,180]], {fill: 'lime', stroke: 'blue', strokeWidth: 10});