Tutorial

Step #1

Where to begin?

Let's make a place where should shows SVG file. Add the following code to your HTML:

        
<svg width="960" id="mysvg" height="500" style="border: 1px solid"></svg>

Include the Javascript

Add following lines to HTML head:

        
<script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
<script src="https://d3js.org/d3-dsv.v1.min.js" charset="utf-8"></script>
<script src="https://d3js.org/d3-fetch.v1.min.js" charset="utf-8"></script>
<script src="http://avislab.com/inksvg/inksvg.v5.js" charset="utf-8"></script>

Load SVG-files

Add your Javascript like below to load SVG-file:

        
<script>
  mysvg = new inksvg('#mysvg')
  mysvg.loadFile('svg-files/Eurofighter_Typhoon_line_drawing.svg')
</script>

Well done! Now You can view your SVG file, drag and zoom by mouse. See: Step 1.

Step #2

Add other SVG-file

You can add another svg-files. And use them like objects.

        
options={width: 20, height:20, x:90, y:205, id:'CautionIcon'}
mysvg.addFile('svg-files/caution.svg', options)

or:

        
mysvg.addFile('svg-files/caution.svg', {width: 20, height:20, x:90, y:205, id:'CautionIcon'})

You can use that files like icon or information objects. You should spesify diferent ID for each file. ID uses to object control. You can apply any attributes, styles, animation to objects by ID. To delete object created by 'addFile' use function deleteObj.

        
mysvg.deleteObj('CautionIcon');

Control of view

Let's add some buttons to control view.

        
<button type="button" class="btn btn-outline-primary btn-sm" onclick="mysvg.viewZ(+0.5)">Zoom in</button>
<button type="button" class="btn btn-outline-primary btn-sm" onclick="mysvg.viewZ(-0.5)">Zoom out</button>
|
<button type="button" class="btn btn-outline-primary btn-sm" onclick="mysvg.viewX(20)">Left</button>
<button type="button" class="btn btn-outline-primary btn-sm" onclick="mysvg.viewX(-20)">Right</button>
<button type="button" class="btn btn-outline-primary btn-sm" onclick="mysvg.viewY(20)">Up</button>
<button type="button" class="btn btn-outline-primary btn-sm" onclick="mysvg.viewY(-20)">Down</button>

Well done! Now you can change view by mouse and buttons. See: Step 2.

Step #3

Zoom

You can preset following zoom options:

ZoomRange - minimal and maximal scale (for example:[1, 10])
ZoomMouseEnable - enable/disable zoom & dragging by mouse (true - allow mouse using, false - to disable mouse)
ZoomSlow - default "zoom fly" options (default {'delay': 100, 'duration': 1500}). Uses as default for functions: zoomXY, zoomObj
ZoomFast - default "zoom fly" options (default {'delay': 0, 'duration': 200}). Uses as default for functions: zoomReset, viewX, viewY, viewZ

Example:

      
mysvg.options = {
  'ZoomRange': [1, 10],
  'ZoomMouseEnable': true,
  'ZoomSlow': {'delay': 100, 'duration': 1500},
  'ZoomFast': {'delay': 0, 'duration': 200}
};

Examples to view control. To move view to point (x, y):

        
var x = 140
var y = 160
var scale = 7
mysvg.zoomXY(x,y,scale)

or:

    
mysvg.zoomXY(140,160,7)

To move view to particular object:

                    
mysvg.zoomObj('g3516', 0)

scale = 0 - autoscale mode. You can set scale manually. For example:

    
mysvg.zoomObj('g3516', 5.0)

To reset zoom view:

                    
mysvg.zoomReset();

You can run functions with custm zoom options. For example:

            
mysvg.zoomXY(140,160,7, {'delay': 0, 'duration': 0})
mysvg.zoomObj('g3516', 0, {'delay': 500, 'duration': 5000})
mysvg.zoomReset({'delay': 0, 'duration': 3000})

Well done! Now you know how to use zoom and how to customize zoom options. See: Step 3.

Step #4

Callback functions

You can specify callback function whitch will be called on some events. Following events are available:

onclick - called when mouse click on object
onmouseover - called when mouse over object
onmouseout - called when mouse out object
onload - called when file loading done

You should to define callback functions before SVG-file loading. By defalt the events onclick, onmouseover, onmouseout applyed to each object in SVG-file. Sometimes it's unnecessarily. You can specify mask to filter objects. For example:

          
mysvg.loadFile('svg-files/Eurofighter_Typhoon_line_drawing.svg', "path, rect, circle, tspan, use")

It's meens events onclick, onmouseover, onmouseout will applyed to object types: path, rect, circle, tspan, use. You can also specify the objects id in mask:

          
mysvg.loadFile('svg-files/Eurofighter_Typhoon_line_drawing.svg', "#g3516, #g6285")

It's meens callback functins will applyed to objects ID: g3516, and ID: g6285.

Onload

Important information! So important to understand that you can start manipulation with objects after file loading done.

For example you can not get the objects list by command getIDList right after function loadFile. This code is wrong:

             
mysvg.loadFile('svg-files/Eurofighter_Typhoon_line_drawing.svg')
var objects = mysvg.getIDList("*")

It's need some time to loading SVG-file. Better to use callback function onload. This function will called when SVG-file loading complited. If you need to load other files (addFile), get objects list, set attributes or style, You should do it in callback function.

Well done! Now you can get a list of objects in SVG-file and change view to object by id. See: Step 4.

Step #5

Object attributes

Set object attributes:

          
mysvg.setObjAttr('CautionIcon', {'x':100, 'y':100})

Get object's attribute:

          
mysvg.getObjAttr('CautionIcon', 'x')

Object's style

Set style:

            
mysvg.setStyle('CautionIcon', 'opacity', '0.5')

Get style:

            
var stroke = parseFloat(mysvg.getStyle('CautionIcon', 'stroke-width'))

Hide / Show functions. Hide oject:

            
mysvg.hide('CautionIcon');

Show oject:

            
mysvg.show('CautionIcon');

Well done! Style and attributes it's easy! Is not it? See: Step 5.

Step #6

Text fields

Modifying text in SVG-file. Change caption:

          
mysvg.setText('text4428', 'New caption')

Change color:

          
mysvg.setTextColor('text4428', 'red')

Set font family:

          
mysvg.setTextFontFamily('text4428', 'Arial')

Set font size:

          
mysvg.setTextFontSize('text4428', '18px')

Set font style:

          
mysvg.setTextStyle('text4428', options={ bold: false, italic: true, underline: true })

Modify position:

          
mysvg.setTextXY('text4428', 10, 20)

Set offset:

          
mysvg.setTextOffset('text4428', -50, -20)

You can change any styles by setStyle

Well done! You know how to modify text in SVG-file view. See: Step 6.

Step #7

Animation

Standart animation:

          
mysvg.animateStart('CautionIcon', 'blink')

Predefined animations:

blink
blink-nonstop
border-dash
border-dash-nonstop
border-red
border-red-nonstop

You can create custom animation:

          
var MyAanimation = {
  "tag": "animate",
  "attributeName": "stroke",
  "attributeType": "CSS",
  "from": "#FFFFFF",
  "to": "#FF0000",
  "begin": "0s",
  "dur": "0.2s",
  "repeatCount": "25" 
};

mysvg.animateStart('CautionIcon', MyAanimation)

Stop animation:

          
mysvg.animateStop('CautionIcon')

Well done! Fin. See: Step 7.