svgdotjs / svg.export.js Goto Github PK

View Code? Open in Web Editor NEW

26.0 26.0 17.0 58 KB

A plugin for the svg.js library to export raw svg

JavaScript 95.08% CSS 4.00% HTML 0.92%

svg.export.js's People

Contributors

Stargazers

Watchers

Forkers

nightphoenix jbinkleyj protoform atomcat1978 gmixo ticketbud ivan-krukov roblillack parabolika66 goupviet mrx234 makarti elmaghri minjungkim85-zz alfonsodr cosdyt isabella232

svg.export.js's Issues

svg.absorb.js dependency

Hi,

Thanks for all the great work!

I noticed a dependency that does not appear in the Requirements section. For container Parent objects, there is a dependency on svg.absorb.js for SVG.Absorbee definition. But I see this dependency may have just been added yesterday.

Anyway, great work. Thanks!

Invalid 'instanceof' operand SVG.Absorbee

svg.js version: 2.1.0
svg.export.js version: 0.1.1

When calling the exportSvg method on any svg.js object, the Javascript exception invalid 'instanceof' operand SVG.Absorbee is thrown.

How to reproduce:

var test = SVG('sig').viewbox(0, 0, 400, 100).size(400, 100);
test.plain('This is a test').move(10, 10);
test.exportSvg();

I think this is linked with 27ca7cc.

Also as a side note: in the svg.export.js and svg.export.min.js dist files of the 0.1.1 release you forgot to bump the version number :) Or the files in this release are totally wrong ?

ability to export without the <svg> envelope

This is a very good plugin to have, but import and export should be able to output parts of svg, even without the envelope object.
and a Question: is this able to export just the defs related to the objects selected for export?
thanks

nested svgs with attr id changed causes double export

we create a drawing, then load an existing svg using the import plugin but change attr id to importedsvg. when exporting two svgs are nested both with id importedsvg

add extra javascript

it would be nice if we could inject custom javascript in the exported svg. in our case we would like to inject a simple function which checks the url and if not on our domain redirects the viewer. This is our way to prevent svg theft (china) from easily scaping our svgs.

Update requirements

May be it's doesn't important but I spent some time to find out that I should also download
https://github.com/wout/svg.absorb.js/blob/master/svg.absorb.min.js

Documentation for export whole svg canvas

I think in "To export the whole svg canvas" section of docs it should be "draw.exportSvg()" instead of "rect.exportSvg()"

To export the whole svg canvas:

var draw = SVG('paper').size(400, 400)
var rect = draw.rect(100, 100)

var svgExport = rect.exportSvg()

Thanks for the library!

typeof SVG.Tspan

In new version of svg have change type TSpan to Tspan, so don't work code of checking by typeof in line 65

} else if (this instanceof SVG.Text || this instanceof SVG.TSpan) {

Cannot export a paper with a circle

The following code:

 var svgpaper = SVG('svg');
 svgpaper.circle(10);
 alert(svgpaper.exportSvg());

causes the following Javascript error:

TypeError: invalid 'instanceof' operand SVG.ComponentTransferEffect svg.export.js:60

However, without drawing the circle (i.e. the paper remains empty) there is no error, and I see valid SVG code.

Please add LICENSE file for your project.

Please add LICENSE file for your project.
Template is here.
Fill of the template

https://opensource.org/licenses/MIT

desc should be optional

we should have the option to override description with custom text

&, <, > and the like should be escaped

Text elements containing &, <, > and the like trip up SVG parsers because they're not escaped as HTML entities.

can't export

I can't export a svg example. I tested this:

var draw = SVG('paper').size(400, 400)
var rect = draw.rect(100, 100)
var svgExport = draw.exportSvg()

and return this error:
Uncaught TypeError: Cannot read property 'nodeName' of null (svg.js:2841)

I use svg.js version 2.0.5 and svg.export.js version 0.1.1

Doesn't work opacity attribute after export

For example, before export the svg image in the browser looks like this:

And after export it looks like:

(There are some hidden elements on the picture)

strip xml namespaces

optionally allow for removing namespaces as they are not necessary when loading svg as img or in html

Defs not included in export

Hi,

I'm creating a quite a basic SVG object. I'm then adding some images with clip paths, applied using clipWith().

On export I get everything except the contents of <defs />, which is all of the clip paths.

Am I missing something, is this intended functionality? The <defs /> attribute is present in the Chrome inspector.

draw.exportSvg() doesn't work. Why?

Here is my code

 <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <script src="js/vendor/svg.js"></script>

    <script src="js/vendor/svg.export.js"></script>
    <script type="text/javascript">
        function initialize(){
            if (!SVG.supported) {
                alert('SVG not supported')
            } else {
                var draw = SVG('canvas').size(400, 400);
                var rect = draw.rect(100, 100).move(10, 10).fill('#f09');
                var rect2 = draw.rect(100, 100).move(10, 200).fill('#120541');



                var svgExport = draw.exportSvg({ whitespace: true });

                alert(svgExport)

            }
        }

    </script>
</head>
<body  onload="initialize();">
<div id="canvas" ></div>

</body>
</html>

alert() doesn't work , I have no idea your draw.exportSvg() is work or not.
Can you help me ?

Uncaught TypeError: Expecting a function in instanceof check, but got undefined

Uncaught TypeError: Expecting a function in instanceof check, but got undefined svg.export.js:55
SVG.extend.exportSvg svg.export.js:55
(anonymous function)

My code:

    var cx = 20;
    var cy = 20;
    var r = 20;

    var draw = SVG( 'svg' ).size( r*2, r*2 );

    var activities = [  'blue', 'yellow', 'red', 'green', 'white', 'gray', 'orange' ];

    angle = ( 360/activities.length ) * ( Math.PI/180 );

    startAngle = 0;

    if( activities.length > 2 )
    {

        for( var i = 0; i < activities.length; i++ )
        {
            var endAngle = startAngle + angle;

            var x1 = cx + r * Math.sin(startAngle);
            var y1 = cy - r * Math.cos(startAngle);
            var x2 = cx + r * Math.sin(endAngle);
            var y2 = cy - r * Math.cos(endAngle);

            var pString = cx + ',' + cy + ' ' + x1 + ',' + y1 + ' ' + x2 + ',' + y2;
            var polygon = draw.polygon( pString ).fill( activities[ i ] ).stroke( { width: 1 } );

            startAngle += angle;
        }
    }
    else
    {
        if( activities.length == 2 )
        {
            var pString = r + ',' + 0 + ' ' + r + ',' + r*2 + ' ' + 0 + ',' + r;
            var polygon = draw.polygon( pString ).fill( activities[ 0 ] ).stroke( { width: 1 } );

            var pString = r + ',' + 0 + ' ' + r + ',' + r*2 + ' ' + r*2 + ',' + r;
            var polygon = draw.polygon( pString ).fill( activities[ 1 ] ).stroke( { width: 1 } );

        }
        else if( activities.length == 1 )
        {
            var x1 = cx + r * Math.sin(0);
            var y1 = cy - r * Math.cos(0);
            var x2 = cx + r * Math.sin(90);
            var y2 = cy - r * Math.cos(90);
            var x3 = cx + r * Math.sin(-90);
            var y3 = cy - r * Math.cos(-90);

            var pString = r + ',' + 0 + ' ' + x1 + ',' + y1 + ' ' + x2 + ',' + y2 + ' ' + x3 + ',' + y3;
            var polygon = draw.polygon( pString ).fill( activities[ 0 ] ).stroke( { width: 1 } );
        }
    }

draw.exportSvg();