svgdotjs / svg.import.js Goto Github PK

Hello this is continued from here:

#17

My SVG code is generated by svg.js - then I export the files as .svg. I am then using svg.import.js to import them back in so you can re-edit saved characters you've made.

The problem is with g groups. While the child g elements all have the correct id's needed for character editing, the parent g elements used for grouping body parts together get incorrectly parsed by the importer, and their g ids get replaced by a dynamically generated id.

For example:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600px" height="600px" xlink="http://www.w3.org/1999/xlink" style="overflow:hidden!important;">
<g id="svga-group-wrapper">
    <g id="svga-group-backs-single">
        <path id="SvgjsPath4900" d="M225 225H-25V-25h250V225z" fill="#45ada8" stroke-width="none" opacity="1" stroke="none"></path>
        <path id="SvgjsPath4901" d="M0-5v210M10,205V-5 M20,205V-5 M30,205V-5 M40,205V-5 M50,205V-5 M60,205V-5 M70,205V-5 M80,205V-5 M90,205V-5 M100,205V-5 M110,205V-5M120,205V-5 M130,205V-5 M140,205V-5 M150,205V-5 M160,205V-5 M170,205V-5 M180,205V-5 M190,205V-5 M200,205V-5" fill="none" stroke="#2f9e98" stroke-width="5" opacity="1"></path>
    </g>
    <g id="svga-group-subwrapper">
        <g id="svga-group-hair-back">

Becomes:

<svg id="SvgjsSvg1648" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" xlink="http://www.w3.org/1999/xlink" style="position:relative;overflow:hidden;left:0px;top:0.3333320617675781px;">
<svg id="SvgjsSvg1650" style="overflow:hidden!important;" xlink="http://www.w3.org/1999/xlink" height="600px" width="600px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <g id="SvgjsDefs4702">
        <g id="svga-group-backs-single">
            <path id="SvgjsPath4900" d="M225 225H-25V-25h250V225z" opacity="1" stroke-width="none" fill="#45ada8"></path>
            <path id="SvgjsPath4901" d="M0-5v210M10,205V-5 M20,205V-5 M30,205V-5 M40,205V-5 M50,205V-5 M60,205V-5 M70,205V-5 M80,205V-5 M90,205V-5 M100,205V-5 M110,205V-5M120,205V-5 M130,205V-5 M140,205V-5 M150,205V-5 M160,205V-5 M170,205V-5 M180,205V-5 M190,205V-5 M200,205V-5" opacity="1" stroke="#2f9e98" stroke-width="5" fill="none"></path>
        </g>
        <g id="svga-group-subwrapper">
            <g id="svga-group-hair-back">

I try to import an svg into a div with given dimensions

   /** create a div */
   var d = document.createElement('div');
   d.id = 'myid';
   document.body.appendChild(d);

   /** size of the div */
   $('#myid').css('width', '150px');
   $('#myid').css('height', '100px');
   $('#myid').css('background-color', '#fcc');

   /** the svg (circle with r=250) */
   var rawSvg = '<svg version="1.2" baseProfile="tiny" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="250px" height="250px" viewBox="0 0 250 250" xml:space="preserve"> <circle fill="#0080FF" cx="125" cy="125" r="125"/> </svg>';

   var draw = new SVG('myid');
   draw.svg(rawSvg);

the svg is not scaled to the div as intended but keeps its original dimension

same thing if I pass the dimension to the svg instead to the div

   draw.svg(rawSvg).size(150,100);

the result is correct when I also pass the viewbox of the svg

   draw.svg(rawSvg).size(150,100).viewbox(0,0,250,250);

My problem is, that I have hundreds of svg stored in an external json and I don't know the viewbox of them in advance.

So how can i get the original viewbox before I draw the svg (or draw it, get the original viewbox and aply these values)?

When I place the svg without size and viewbox and try to get the viewbox with

   var box = draw.viewbox();

I get
box = 0 0 100% 100%
same with width = 100% and height = 100%
that doesn't help

When I place the svg with size but without viewbox and try to get the viewbox
I get
box = 0 0 150 100
and for the width = 150 and height = 100
that doesn't help either

Seems to me as if the original viewbox is overwritten here by the new size because the actual shown dimensions are 0 0 250 250 (see first example)

Any help?
Thank you

Don't render "a" tags.

I've tried the import test but it doesn't display anything. I've pasted the svg content in the dialog box, with no results.

This is my SVG:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" version="1.2" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 210" xmlns:dc="http://purl.org/dc/elements/1.1/">
 <defs id="defs4">
  <filter id="filter4017" height="1.5" width="1.5" color-interpolation-filters="sRGB" y="-.25" x="-.25" filterRes="2048">
   <feGaussianBlur id="feGaussianBlur4019" result="blur" stdDeviation="1.4" in="SourceAlpha"/>
   <feColorMatrix id="feColorMatrix4021" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.99 0 " type="matrix" result="bluralpha"/>
   <feOffset id="feOffset4023" result="offsetBlur" dy="2" dx="0" in="bluralpha"/>
   <feMerge id="feMerge4025">
    <feMergeNode id="feMergeNode4027" in="offsetBlur"/>
    <feMergeNode id="feMergeNode4029" in="SourceGraphic"/>
   </feMerge>
  </filter>
  <linearGradient id="linearGradient3949" y2="427.54" xlink:href="#linearGradient2209" gradientUnits="userSpaceOnUse" x2="272.03" gradientTransform="matrix(-.057923 .015520 -.015929 -.059447 121.64 465.79)" y1="262.87" x1="249.48"/>
  <linearGradient id="linearGradient3946" y2="553.74" xlink:href="#linearGradient2209" gradientUnits="userSpaceOnUse" x2="380.68" gradientTransform="matrix(.059966 0 0 .061544 68.771 409)" y1="296.37" x1="264.58"/>
  <linearGradient id="linearGradient2209">
   <stop id="stop2211" stop-color="#fff" offset="0"/>
   <stop id="stop2213" stop-color="#fff" stop-opacity="0" offset="1"/>
  </linearGradient>
 </defs>
 <metadata id="metadata7">
  <rdf:RDF>
   <cc:Work rdf:about="">
    <dc:format>image/svg+xml</dc:format>
    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
    <dc:title/>
   </cc:Work>
  </rdf:RDF>
 </metadata>
 <g id="layer1" transform="translate(0 -842.36)">
  <flowRoot id="flowRoot3822" style="word-spacing:0px;letter-spacing:0px;text-anchor:middle;text-align:center" xml:space="preserve" font-size="40px" line-height="125%" font-family="Oregon LDO" fill="#000000"><flowRegion id="flowRegion3824"><rect id="rect3826" y="11.557" width="308.54" x="15.823" height="133.61"/></flowRegion><flowPara id="flowPara3828"/></flowRoot>
  <text id="text3276" style="word-spacing:0px;letter-spacing:1px;text-anchor:middle;text-align:center" xml:space="preserve" font-size="40px" line-height="125%" y="910.01984" x="263.02176" font-family="Oregon LDO" fill="#000000"><tspan id="tspan3278" y="910.01984" x="263.52176">GUIDA</tspan><tspan id="tspan3280" y="960.01984" x="263.52176">ALLA</tspan><tspan id="tspan3282" y="1010.0198" x="263.52176">ISCRIZIONE</tspan></text>
  <g id="layer1-3" transform="matrix(3.2934 0 0 3.2934 -198.86 -505.68)">
   <g id="g4009" filter="url(#filter4017)">
    <path id="path3059" d="m634.29 559.51a250 250 0 1 1 -500 0 250 250 0 1 1 500 0z" fill-rule="evenodd" transform="matrix(.058927 0 0 .058927 68.784 407.96)" stroke="#cb0000" stroke-width="19.959" fill="#d1b02a"/>
    <path id="path3061" d="m95.01 454.04c3.6576-0.98004 6.5623-3.3909 8.3013-6.4953 2.8243-6.6862-7.7133 8.9678-16.417 6.124 2.5302 0.92793 5.341 1.1147 8.1157 0.37126z" fill-rule="evenodd" fill="url(#linearGradient3949)"/>
    <path id="path3063" d="m91.451 427.24c-7.5731 0-13.719 6.3077-13.719 14.08 0 1.0512 0.11665 2.0743 0.32981 3.0599 7.5286-14.492 15.64-5.3698 26.098-8.3623-2.0423-5.146-6.9639-8.7777-12.709-8.7777z" fill-rule="evenodd" fill="url(#linearGradient3946)"/>
    <g id="g3932" fill="#fff" transform="matrix(1.0779 0 0 1.0779 -7.0498 -34.34)">
     <path id="text9068" d="m89.684 447.6c0-0.38871 0.1336-0.71821 0.40068-0.98889 0.2672-0.27069 0.59851-0.40583 0.99404-0.40583 0.38163 0 0.70778 0.13528 0.97846 0.40583s0.40595 0.60018 0.40595 0.98889c0 0.38162-0.1354 0.70764-0.40595 0.97846-0.27068 0.27055-0.59671 0.40583-0.97846 0.40583-0.39553 0-0.72683-0.13361-0.99404-0.40068-0.26708-0.26721-0.40068-0.59517-0.40068-0.98361zm-2.3002-13.77c0.73546-0.32615 1.4346-0.5689 2.0972-0.72864 0.6626-0.1596 1.2854-0.23927 1.8682-0.23939 1.5404 0 2.7565 0.3712 3.6482 1.1137 0.89158 0.74252 1.3376 1.7452 1.3376 3.008 0 1.2906-0.38343 2.3454-1.1502 3.1641-0.76686 0.81872-1.9238 1.4051-3.4712 1.7591v2.6437h-1.2803v-3.4139c1.2282-0.29835 2.1528-0.79801 2.7737-1.4988 0.62103-0.70083 0.93148-1.5924 0.93161-2.6749-0.000128-0.95066-0.25343-1.7-0.75991-2.2482-0.50661-0.54818-1.1969-0.82221-2.0712-0.82221-0.79106 0-1.4381 0.22731-1.9412 0.68179-0.503 0.45448-0.82748 1.1084-0.97318 1.9619h-1.0096v-2.7063z"/>
     <path id="path3162" fill-opacity=".61836" d="m89.568 447.92c0-0.4041 0.14292-0.74666 0.42863-1.0281 0.28584-0.28139 0.64025-0.4219 1.0634-0.4219 0.40825 0 0.75715 0.14065 1.0467 0.4219 0.28956 0.2813 0.43427 0.62398 0.43427 1.0281 0 0.39675-0.14485 0.7357-0.43427 1.0172-0.28956 0.28128-0.63833 0.42192-1.0467 0.42192-0.42312 0-0.77753-0.13889-1.0634-0.41654-0.28571-0.27779-0.42863-0.61873-0.42863-1.0226zm-2.4606-14.316c0.78676-0.33907 1.5347-0.59146 2.2435-0.7575 0.70883-0.16595 1.3751-0.24876 1.9986-0.24891 1.6479 0 2.9488 0.38591 3.9027 1.1579 0.95377 0.77194 1.4309 1.8144 1.4309 3.1272 0 1.3418-0.41018 2.4383-1.2304 3.2895-0.82035 0.8512-2.058 1.4608-3.7133 1.8288v2.7485h-1.369v-3.5492c1.3138-0.3102 2.303-0.82965 2.9672-1.5583 0.66435-0.72861 0.99646-1.6555 0.99659-2.7809-0.000136-0.9883-0.27111-1.7674-0.81292-2.3373-0.54195-0.56986-1.2804-0.85475-2.2157-0.85475-0.84624 0-1.5384 0.23634-2.0766 0.7088-0.53808 0.4725-0.8852 1.1524-1.0411 2.0397h-1.08v-2.8135z"/>
    </g>
   </g>
  </g>
 </g>
</svg>

It seems the transform function overwrites the transformation attribute of an imported element instead of appending it (as explained here: svgdotjs/svg.js#38). See my SO question here: http://stackoverflow.com/questions/17337612/svg-js-append-or-prepend-transformation

Hey,

apparently some commit broke the import of the following SVG string:

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="100" viewBox="0 0 500 100"><defs><linearGradient id="s4a" x1=".5" x2=".5" y2="1"><stop offset=".307"/><stop offset=".916" stop-color="#990b0b"/></linearGradient></defs><ellipse rx="249" ry="49" cx="250" cy="50" stroke="#000" fill="url(#s4a)" data-angle="180"/><rect width="109" height="51" stroke="#000" rx="0" ry="0" x="43" y="20"/></svg>

The rect doesn't appear with the latest version, but with the one on the Amazon CDN it works:
https://s3-eu-west-1.amazonaws.com/svgjs/svg.import.js

Have a look at this diff:
https://www.diffchecker.com/ojcpdhyf

After further investigation I found out that if I swap

well.innerHTML = raw
        .replace(/\n/, '')
        .replace(/<([^\s]+)([^<]+?)\/>/g, '<$1$2></$1>')

with

well.innerHTML = raw
        .replace(/\n/, '')
        .replace(/<(\w+)([^<]+?)\/>/g, '<$1$2></$1>')

everything works as expected.. mmh..

This commit introduced that change: db0156c

What are elements with namespaces? Can't find anything about them in the docs

The _convertNodes methods handles a TEXT node by calling the getter variant of the method instead of the setter, so the return is in fact a text string instead of a new Text object. Also, linked to an issue I created in the svg project about the way a Text node handles what it can have as child nodes( Issue #28 ).

I can't quote figure out from the docs how an imported SVG object can be animated?
I have tried to use the path id of the SVG object, but that doesn't work.

For your information (as i'm worried you might be getting annoyed) - I tried to solve this problem on my own, and then consulted StackOverflow with no success.

Here's my SO question:

http://stackoverflow.com/questions/14714676/animating-an-imported-svg-object/14714985#14714985

Is there a reason why the data- attributes don't get imported? Sorry if I am making something simple that is actually complicated :)

While importing any SVG, it's been throwing the above mentioned TypeError. The origin is line number 27.
I fixed it by changing line 27
from:

        , def   = SVG.defaults.trans()

to:

        , def   = SVG.defaults

What is the purpose of this line, and why is the trans() method removed? Is my fix correct, or does it breaks something too?

In the SVG file the style of the element (fill, stroke, etc.) is stored in the style attribute:

<path id="path4261" d="m 529.889 ... 2.125,-8.125 z" style="fill:#ffffff;"></path>

However, when I do:

store.path4261.fill('#000000');

the element gets the fill attribute and nothing happens:

<path id="path4261" d="m 529.889 ... 2.125,-8.125 z" style="fill:#ffffff;" fill="#000000"></path>

It is possible to change the fill using this code:

attr({ style: 'fill:#000000' })

but then animation() will not work.

I just want to point out that this plugin is not compatible with SVG.js 2.0.

I would fix it if I could :)

Today I changed to svg.import.js 1.0.1
now I get an error

Encountered duplicate id "sy". Changed store key to "sy8655266274004099".

There are no duplicated ids in that single element, but I am importing multiple svg and they all all have an id "sy"

Should I change something?

Thank You

My input document uses the br tag inside of a foreign object. It uses the form <br />
The regex in svg() continues to produce valid markup:

"this is valid <br />".replace(/<(\w+)([^<]+?)\/>/g, '<$1$2></$1>')

produces what it should produce:

"this is valid <br ></br>"

However, then along comes the assignment to well.innerHTML and (on Chrome Version 35.0.1916.114) the HTML parser messes everything up. It replaces the correctly closed br tag with two unclosed br tags - as can be seen by the following console output

> well.innerHTML = "this is valid <br />".replace(/<(\w+)([^<]+?)\/>/g, '<$1$2></$1>')
"this is valid <br ></br>"
> well.innerHTML
"this is valid <br><br>"  // it's still valid html markup but not valid svg nor does it match the initial format

I don't think the regex should be changed - but there may need to be special handling for br (and hr plus any others?)

Hey, maintainer(s) of wout/svg.import.js!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library wout/svg.import.js is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "wout/svg.import.js",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Would be an improvement to provide a way to use the rawSVG import mechanism to render the initial SVG() element.

Nested SVG elements provide additional complexity when it comes to controlling how they resize and fill available space in a responsive layout.

Some background: I’m using svg.js with svg.import.js to display and animate elements SVG stored in independent .svg files. This allows the SVG elements to be loaded asynchronously or alternatively a .png in non-supporting browsers.

At the moment it this and other plugin do not support amd

do you plan to have ajax functions included in this plugin or other plugins or even as part of svg.js base? i think this would be the right place for importing from a server..

Can this library be used for importing an SVG file, say one made in Inkscape?
If so, could you please provide an example of how it's done?

The lack of a semicolon after the enclosing function's call() causes issues when concatenated with other js. This is the error I'm receiving on Chrome 27:

"Uncaught TypeError: undefined is not a function"

Hallo
Thank you for the plugin!

Using closure-compiler on my script I get an error

ERROR - Parse error. missing name after . operator
draw.import(rawSvg);
^

does work when I change import to importSVG in your file (svg.import.js)

seems that import is reserved

Maybe it's just me but given that all the SVG.js methods are accessible from the roots, get() should also work from there correctly. It's a bit convoluted that one has to use the store object for calling get().

As far as I tried this, it does not support: "title" "filter"
Those 2 were interesting to my current project.

Whever I save a file using Adobe illustrator as an SVG, illustrator creates its own X,Y cordinates in the viewbox. Even by exporting artboards, and setting my illustrator x, y cordinates, the issue cannot be fixed.

Is it possible that when importing an an SVG with SVG.js to correct these viewbox issues? I would like to get them to 0,0

Here is an example of what Illustrator does with viewbox

The sample code supplied in the readme throws up an "unexpected token <" error , on svg.import.min.js line 4 ?

and also

Uncaught TypeError: Object [object Object] has no method 'import'
(anonymous function)

Hi,

when i import svg like first exemple, the instanciation of SVG create first node and draw.svg(rawSvg) import a from string.

The structure of svg become :
<svg (from instance)>
<svg (from import rawSvg)>

(When i save in file with export and load with import, tag is added recursively)

The behavior is same on http://svgjs.com/import/

There he has a way to load the svg and merging svg tags ?

Best regards,
Julien

I'm not sure why, but hide() is only working for me with one group in an imported SVG, and I can't figure out why. Here is a Fiddle: http://jsfiddle.net/brandondurham/qayukuzb/

At the bottom of the JS pane I'm adding hide() to all three level 1 groups in the imported SVG, but only the top-most group (nodes) is actually being hidden.

Any idea why?

Hi, I load a large SVG diagram using draw.svg method:

$.get('a.svg', function(data) {
var rawSvg = (new XMLSerializer()).serializeToString(data);
var draw = SVG('drawing');
var store = draw.svg(rawSvg);
});

I try also inlined SVG XML but in both of the cases it generates following image (arrow and lables are missing):

But using JQuery load it works

jQuery('#drawing').load('a.svg', null, function() {
jQuery('#theElement').click( function() {
alert('You clicked on the element!');
});
});

Do you have any idea what could be the wrong?

Hello,
It seems that there aren't any support for radial gradients? When I try to import I get this error message in chrome: "SVG Import got unexpected type radialgradient". Linear gradients seems to work.

Is this a bug or isn't this featured yet?

No idea why, but when importing raw svg with svg.import.js somewhere on the way are changed to tags, and import.js throws error:

"SVG Import got unexpected type img"

adding another case in convertNodes() function is a workaround that worked for me:

case 'image',
'img':
element = context.image(attr['xlink:href'])

Hi,

I'm exporting from Illustrator, and making heavy use of symbols to add structure to my graphics.

Sadly, the plugin doesn't appear to support symbols. Graphics contained in symbols are missing and I get 'SVG Import got unexpected type Symbol'.

Hi,

I've created a SVG-file with Inkscape. Most of it is shown correctly except some objects are shown at the wrong position.

I really would like to fix this, however I'm not very familiar with SVG. Could you provide me any clue where I should start digging?

I've uploaded an example here:
http://infographic.dev.fluoline.net/

The original SVG can be found here: http://infographic.dev.fluoline.net/parts/timeline.svg

Thanks for your input!

Jeroen

I'm using the following which works fine if I load straight into the browser:
https://gist.github.com/insominx/56a6c934093eddd4fec5
but not when I import.