Loading a SVG file with svg.js

Question

I have a HTML5 page with a SVG element in it. I would like to load a SVG file, extract some elements from it and dispose them one by one with a script.

I used jQuery to load the SVG file successfully, using .load(), having inserted the SVG tree inside the DOM. But I would like to try svg.js to manipulate the elements, but in the documentation I cannot find a way to initialize the library using an existing SVG element, where I will get the objects.

Idea is to access the loaded SVG element (or load it directly with the svg.js library), copy the single objects to another element and move them where I need. How to do this?

Update: In the meantime this was added to the core functionality: http://documentup.com/wout/svg.js#import--export-svg — Hafenkranich, Sep 08 '16 at 14:02
This might help you too: http://stackoverflow.com/questions/11978995/how-to-change-color-of-svg-image-using-css-jquery-svg-image-replacement/11978996 — Drew Baker, Mar 03 '17 at 22:00

Dave Douglass · Answer 1 · 2018-02-09T22:53:57.403

Given an SVG file 'image.svg' containing

<svg viewBox="0 0 500 600" version="1.1">
  <rect x="100" y="100" width="400" height="200" fill="yellow" 
   stroke="black" stroke-width="3"/>
</svg>

and a file 'index.html' containing

<html>
  <head>
    <script type="text/javascript" src="svg.js"></script>
    <script type="text/javascript" src="jquery-X.X.X.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
    <div id="svgimage"></div>
  </body>
</html>

then if file 'script.js' contains

$(document).ready(function() {

  var image = SVG('svgimage');
  $.get('image.svg', function(contents) {
    var $tmp = $('svg', contents);
    image.svg($tmp.html());
  }, 'xml');

  $('#svgimage').hover(
    function() {
      image.select('rect').fill('blue');
    },
    function() {
      image.select('rect').fill('yellow');
    }
  );

});

then the SVG image will display and moving the mouse pointer in and out of the browser window will change the color of the rectangle from yellow to blue.

You should now be able to substitute any SVG image file and define any number of functions to manipulate the image using the SVG.js library. The important thing to realize is that calls to SVG.js methods will not succeed if they take place before the $(document).ready function has returned.

For bonus points, I also found copying the values of the 'viewBox', 'width' and 'height' attributes by adding the following lines after the declaration of '$tmp' to work best for successfully displaying the contents of arbitrary SVG files:

    image.attr('viewBox', $tmp.attr('viewBox'));
    image.attr('width', $tmp.attr('width'));
    image.attr('height', $tmp.attr('height'));

This is the answer I wish I had been able to find somewhere on the internet. Hoping this saves the next SVG & Javascript noob some hours. — Dave Douglass, Mar 03 '17 at 22:02
This will indeed load and display the svg, but I have had zero luck manipulating it or even getting a reference to an element inside the svg. — HeadCode, Mar 23 '17 at 02:16
I had the same problem as @HeadCode. It renders, but I can't figure out how to manipulate the item imported. — Robin Zimmermann, Jul 14 '17 at 00:39
Not having looked at this for several months now, I tried to reproduce this from scratch and experienced the same issue! I finally figured out what was going on and expanded on the example to avoid frustrating more people in the future. — Dave Douglass, Jul 17 '17 at 20:56
For me, this example doesn't render anything :( (using SVG JS version 3) — NickG, Feb 20 '20 at 16:19

score 14 · Accepted Answer · edited Apr 28 '16 at 14:39

14

You should take a look at the svg.import.js plugin

The documentation says...

All imported elements with an id will be stored. The object with all stored elements is returned by the import method:

var rawSvg = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg [...]>"';
var draw = SVG('paper');
var store = draw.svg(rawSvg);

store.polygon1238.fill('#f06');

edited Apr 28 '16 at 14:39

David Rodrigues

12,041
16
62
90

answered Apr 10 '13 at 00:51

methodofaction

70,885
21
151
164

@ricardo Your comment isn't helpful, please be more specific. – methodofaction Jul 22 '15 at 18:33
this is the oficial site: **http://svgjs.com/import/** and It do not render a simple svg like that `` – ricardo Jul 22 '15 at 21:01
1

I would suppose it will get eventually get fixed, here is the issue https://github.com/wout/svg.import.js/issues/43 – methodofaction Jul 22 '15 at 21:57
Thanks for the link on github! – ricardo Jul 23 '15 at 15:00
4

svg.js version 2 added the import feature into the core – Fuzzyma Oct 19 '15 at 20:18
re: @ricardo's link -- the new link is http://svgjs.com/importing-exporting/#import-export-svg -- thank you for the pointers! – Greg Sadetsky May 28 '18 at 16:36
oops seems svgjs's website changed. this should point to similar documentation now: https://svgjs.dev/docs/3.0/importing-exporting/#import-export-svg – Alec Jacobson Oct 03 '22 at 22:10

wout · Answer 3 · 2021-06-09T17:17:19.000

5

If you know the id's of elements you can use the SVG.get method after importing raw svg:

SVG.get('element_id').move(200,200)

The library was moved to GitHub and the metioned documentation is at http://svgjs.dev/referencing/

Old link: http://documentup.com/wout/svg.js#referencing-elements

edited Jun 09 '21 at 17:17

answered Jun 25 '13 at 17:36

wout

2,477
2
21
32

how to get the id from `var store = draw.svg(rawSvg)` (code from @Duopixel) or to move `store` ? I use `store.get('Layer_1').move(x,y);` but can get attr('id') – benoît Feb 11 '15 at 11:03

Loading a SVG file with svg.js

3 Answers3

Linked