Dom-to-image: toSVG doesn't actually create an SVG file

[pete-hotchkiss]

It would seem doing the following

domtoimage.toSvg(document.getElementByID('foo')
.then( (b) => {
 // save the file
});

when the HTML has

<div class="bar" id="foo">Label</div>

will generate an SVG file that looks like

<svg xmlns="http://www.w3.org/2000/svg" width="64" height="33"><foreignObject x="0" y="0" width="100%" height="100%"><div class="button  uufcs0" id="Dom2Img-Button" xmlns="http://www.w3.org/1999/xhtml" style="...">Label</div></foreignObject></svg>

Now, this isn't an SVG representation of the DOM. It's just the DOM wrapped in an SVG tag - meaning it's useless and wont render anywhere else I might want to edit the create .svg file.

I'd expect it to be more like

<svg>
<g fill="#41b6e6" fill-opacity="1" stroke="none" font-family="Open Sans Semibold" font-size="18" font-weight="630" font-style="normal">
<text fill="#000000" fill-opacity="0.74902" stroke="none" xml:space="preserve" x="497.5" y="80" font-family="Open Sans Semibold" font-size="13" font-weight="630" font-style="normal" 
 >Label</text>
</g>
</svg>

i.e. an actual SVG file...

am I missing a flag here or something that generates it correctly?

[tsayen]

I think you've misunderstood the toSvg method. It will not convert your HTML tags to their SVG "counterparts". It creates an SVG image that will contain your HTML as foreignObject with all the styles inlined - so that it can be saved to .svg file, and if you later open it with a browser (or another SVG viewer that supports foreignObject correctly), it should be displayed allright. For what you want to do there are probably other tools, like maybe XSLT

[pete-hotchkiss]

Ahh ok. My bad. Didn't realise it was completely different to toPNG, which
actually - well saves a PNG.

toSVG does nothing of the sort - its essentially meaningless. It just takes
dom an wraps it in an svg tag. Which BTW doesn't actually open in a
browser. I can file a new ticket for thst if you like.

might be an idea to make your docs a bit clearer.

On 22 Sep 2016 8:47 pm, "tsayen" [email protected] wrote:

I think you've misunderstood the toSvg method. It will not convert your
HTML tags to their SVG "counterparts". It creates an SVG image that will
contain your HTML as foreignObject with all the styles inlined - so that
it can be saved to .svg file, and if you later open it with a browser (or
another SVG viewer that supports foreignObject correctly), it should be
displayed allright. For what you want to do there are probably other tools,
like maybe XSLT

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/tsayen/dom-to-image/issues/64#issuecomment-249008342,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AQHPBMz3Rc0hybR4hk7VwzJmKu_J_yuZks5qstspgaJpZM4KDwjX
.

[tsayen]

toSvg() _does_ produce a _correct_ SVG. It doesn't do it _exactly how you
would like_, but it works correctly. I'm sorry this lib doesn't do what you
would like it to do. You might want to try to implement missing
functionality yourself.

On Sep 22, 2016 23:14, "Pete Hotchkiss" [email protected] wrote:

Ahh ok. My bad. Didn't realise it was completely different to toPNG, which
actually - well saves a PNG.

toSVG does nothing of the sort - its essentially meaningless. It just takes
dom an wraps it in an svg tag. Which BTW doesn't actually open in a
browser. I can file a new ticket for thst if you like.

might be an idea to make your docs a bit clearer.

On 22 Sep 2016 8:47 pm, "tsayen" [email protected] wrote:

I think you've misunderstood the toSvg method. It will not convert your
HTML tags to their SVG "counterparts". It creates an SVG image that will
contain your HTML as foreignObject with all the styles inlined - so that
it can be saved to .svg file, and if you later open it with a browser (or
another SVG viewer that supports foreignObject correctly), it should be
displayed allright. For what you want to do there are probably other
tools,
like maybe XSLT

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
<https://github.com/tsayen/dom-to-image/issues/64#issuecomment-249008342
,
or mute the thread
AQHPBMz3Rc0hybR4hk7VwzJmKu_J_yuZks5qstspgaJpZM4KDwjX>
.

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/tsayen/dom-to-image/issues/64#issuecomment-249015121,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABpydG2gdL7_M4Dm3ZoKkfqWXr39snBPks5qsuGcgaJpZM4KDwjX
.

[pete-hotchkiss]

Sorry I think your misunderstanding me.

I understand now what it does ( or rather now) - my point is it doesn't
even work as your describing. The SVG it generates doesn't render in a
browser. I just get a blank white page. Regardless of what DOM element I
point it at - even a basic h1 tag.

Or is that the intended result of the library ?

On Thu, Sep 22, 2016 at 9:23 PM, tsayen [email protected] wrote:

toSvg() _does_ produce a _correct_ SVG. It doesn't do it _exactly how you
would like_, but it works correctly. I'm sorry this lib doesn't do what you
would like it to do. You might want to try to implement missing
functionality yourself.

On Sep 22, 2016 23:14, "Pete Hotchkiss" [email protected] wrote:

Ahh ok. My bad. Didn't realise it was completely different to toPNG,
which
actually - well saves a PNG.

toSVG does nothing of the sort - its essentially meaningless. It just
takes
dom an wraps it in an svg tag. Which BTW doesn't actually open in a
browser. I can file a new ticket for thst if you like.

might be an idea to make your docs a bit clearer.

On 22 Sep 2016 8:47 pm, "tsayen" [email protected] wrote:

I think you've misunderstood the toSvg method. It will not convert your
HTML tags to their SVG "counterparts". It creates an SVG image that
will
contain your HTML as foreignObject with all the styles inlined - so
that
it can be saved to .svg file, and if you later open it with a browser
(or
another SVG viewer that supports foreignObject correctly), it should be
displayed allright. For what you want to do there are probably other
tools,
like maybe XSLT

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
<https://github.com/tsayen/dom-to-image/issues/64#
issuecomment-249008342
,
or mute the thread
AQHPBMz3Rc0hybR4hk7VwzJmKu_J_yuZks5qstspgaJpZM4KDwjX>
.

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
<https://github.com/tsayen/dom-to-image/issues/64#issuecomment-249015121
,
or mute the thread
M4Dm3ZoKkfqWXr39snBPks5qsuGcgaJpZM4KDwjX>
.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/tsayen/dom-to-image/issues/64#issuecomment-249017422,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AQHPBKFQfgNBkb09YWQE4zNj_qCuR5A0ks5qsuPcgaJpZM4KDwjX
.

[tsayen]

I think you're doing something wrong. If you were really interested in
getting help here, I suppose you would present the code that is not working
as expected (and would also double-check the tone of you comments) - but it
doesn't look like you're looking for help. For further reference, you might
want to check the readme, or the source code. This issue is closed.

On Sep 22, 2016 23:28, "Pete Hotchkiss" [email protected] wrote:

Sorry I think your misunderstanding me.

I understand now what it does ( or rather now) - my point is it doesn't
even work as your describing. The SVG it generates doesn't render in a
browser. I just get a blank white page. Regardless of what DOM element I
point it at - even a basic h1 tag.

Or is that the intended result of the library ?

On Thu, Sep 22, 2016 at 9:23 PM, tsayen [email protected] wrote:

toSvg() _does_ produce a _correct_ SVG. It doesn't do it _exactly how you
would like_, but it works correctly. I'm sorry this lib doesn't do what
you
would like it to do. You might want to try to implement missing
functionality yourself.

On Sep 22, 2016 23:14, "Pete Hotchkiss" [email protected]
wrote:

Ahh ok. My bad. Didn't realise it was completely different to toPNG,
which
actually - well saves a PNG.

toSVG does nothing of the sort - its essentially meaningless. It just
takes
dom an wraps it in an svg tag. Which BTW doesn't actually open in a
browser. I can file a new ticket for thst if you like.

might be an idea to make your docs a bit clearer.

On 22 Sep 2016 8:47 pm, "tsayen" [email protected] wrote:

I think you've misunderstood the toSvg method. It will not convert
your
HTML tags to their SVG "counterparts". It creates an SVG image that
will
contain your HTML as foreignObject with all the styles inlined - so
that
it can be saved to .svg file, and if you later open it with a browser
(or
another SVG viewer that supports foreignObject correctly), it should
be
displayed allright. For what you want to do there are probably other
tools,
like maybe XSLT

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
<https://github.com/tsayen/dom-to-image/issues/64#
issuecomment-249008342
,
or mute the thread
AQHPBMz3Rc0hybR4hk7VwzJmKu_J_yuZks5qstspgaJpZM4KDwjX>
.

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
<https://github.com/tsayen/dom-to-image/issues/64#
issuecomment-249015121
,
or mute the thread
M4Dm3ZoKkfqWXr39snBPks5qsuGcgaJpZM4KDwjX>
.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
<https://github.com/tsayen/dom-to-image/issues/64#issuecomment-249017422
,
or mute the thread
auth/AQHPBKFQfgNBkb09YWQE4zNj_qCuR5A0ks5qsuPcgaJpZM4KDwjX>
.

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/tsayen/dom-to-image/issues/64#issuecomment-249018565,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABpydPZfhBb76mZpdC2VSRby0Ute1i29ks5qsuT_gaJpZM4KDwjX
.

[pete-hotchkiss]

I must be.

As for being inserted in help - thats why I raised the ticket - but given
how you've addressed me ( and btw I'm replying to emails on a phone so
don't actually have offending code to hand ) in such a condescending manner
I'll consider you disinterested in trying to make your library better.

Good luck and good night

On Thu, Sep 22, 2016 at 9:37 PM, tsayen [email protected] wrote:

I think you're doing something wrong. If you were really interested in
getting help here, I suppose you would present the code that is not working
as expected (and would also double-check the tone of you comments) - but it
doesn't look like you're looking for help. For further reference, you might
want to check the readme, or the source code. This issue is closed.

On Sep 22, 2016 23:28, "Pete Hotchkiss" [email protected] wrote:

Sorry I think your misunderstanding me.

I understand now what it does ( or rather now) - my point is it doesn't
even work as your describing. The SVG it generates doesn't render in a
browser. I just get a blank white page. Regardless of what DOM element I
point it at - even a basic h1 tag.

Or is that the intended result of the library ?

On Thu, Sep 22, 2016 at 9:23 PM, tsayen [email protected]
wrote:

toSvg() _does_ produce a _correct_ SVG. It doesn't do it _exactly how
you
would like_, but it works correctly. I'm sorry this lib doesn't do what
you
would like it to do. You might want to try to implement missing
functionality yourself.

On Sep 22, 2016 23:14, "Pete Hotchkiss" [email protected]
wrote:

Ahh ok. My bad. Didn't realise it was completely different to toPNG,
which
actually - well saves a PNG.

toSVG does nothing of the sort - its essentially meaningless. It just
takes
dom an wraps it in an svg tag. Which BTW doesn't actually open in a
browser. I can file a new ticket for thst if you like.

might be an idea to make your docs a bit clearer.

On 22 Sep 2016 8:47 pm, "tsayen" [email protected] wrote:

I think you've misunderstood the toSvg method. It will not convert
your
HTML tags to their SVG "counterparts". It creates an SVG image that
will
contain your HTML as foreignObject with all the styles inlined - so
that
it can be saved to .svg file, and if you later open it with a
browser
(or
another SVG viewer that supports foreignObject correctly), it
should
be
displayed allright. For what you want to do there are probably
other
tools,
like maybe XSLT

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
<https://github.com/tsayen/dom-to-image/issues/64#
issuecomment-249008342
,
or mute the thread
AQHPBMz3Rc0hybR4hk7VwzJmKu_J_yuZks5qstspgaJpZM4KDwjX>
.

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
<https://github.com/tsayen/dom-to-image/issues/64#
issuecomment-249015121
,
or mute the thread
M4Dm3ZoKkfqWXr39snBPks5qsuGcgaJpZM4KDwjX>
.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
<https://github.com/tsayen/dom-to-image/issues/64#
issuecomment-249017422
,
or mute the thread
auth/AQHPBKFQfgNBkb09YWQE4zNj_qCuR5A0ks5qsuPcgaJpZM4KDwjX>
.

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
<https://github.com/tsayen/dom-to-image/issues/64#issuecomment-249018565
,
or mute the thread
ABpydPZfhBb76mZpdC2VSRby0Ute1i29ks5qsuT_gaJpZM4KDwjX>

.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/tsayen/dom-to-image/issues/64#issuecomment-249020864,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AQHPBPel2rgjVQFd_0f2mcAsIYYFkjqAks5qsucmgaJpZM4KDwjX
.