Convert SVG to PDF

[Sergiy Nesterko]

Dear group members,

I decided to post this as I think there is a considerable number of
people using d3 to create SVG graphics, and then aiming to convert
them to another format (for example, PDF).

As of now, there is no easy way to do it. I would love to see someone
prove me wrong.

However, there are hacks. First of all, it is important to realize
that for the converted file to look like your original SVG image, you
must style all SVG elements from within d3. In other words, there must
be no CSS styling involved for your d3 images. Given that is
satisfied, the are two ways I found useful:

0. Copy everything from <svg ... till </svg> into a text file, call it
foo.svg. Open the file in Adobe Illustrator (magic, it opens the image
with all vector graphics and styling preserved), and save as PDF or
another file format as you please. But, Illistrator does not recognize
several features of SVG spec, including vertically aligned text. For
more details on what it doesn't know, go here:
http://help.adobe.com/en_US/illustrator/cs/using/WS714a382cdf7d304e7e07d0100196cbc5f-655ba.html

Inkscape does not load SVG files created like that properly. Putting
in proper header information also does not help.

1. This is more complex, but works well. First, print the page
containing the SVG to pdf. Then, open it in Illustrator (vector
graphics should be preserved), cut out your SVG image, create new
document with appropriate canvas size, paste your image in, save as a
format of preference.

This way is not convenient at all, it requires you to manually cut out
images, specify canvas dimensions etc. A variation of it can be to
save an SVG with proper header information (using, for example, the
wonderful example by Chris Viau here: http://bl.ocks.org/1209499), and
open it in, say, Chrome, print it to PDF, selecting custom page size
to match the dimensions of your image. However, system printing leaves
fat margins in your pdf, so you'd have to open it in, say, Illustrator
to take them away.

All this is complex and tedious enough. However, unfortunately, to my
knowledge there is no better easy way to convert SVG to PDF client
side. Hope this helps others trying to find one. I'd appreciate
contributions to this if someone knows a better way.

Thank you, and happy coding.

[Chi]

Hi,

How about this: http://xmlgraphics.apache.org/batik/javadoc/org/apache/batik/apps/rasterizer/SVGConverter.html

Chi

On 12月14日, 上午1時50分, Sergiy Nesterko <serge.neste...@gmail.com> wrote:
> Dear group members,
>
> I decided to post this as I think there is a considerable number of
> people using d3 to create SVG graphics, and then aiming to convert
> them to another format (for example, PDF).
>
> As of now, there is no easy way to do it. I would love to see someone
> prove me wrong.
>
> However, there are hacks. First of all, it is important to realize
> that for the converted file to look like your original SVG image, you
> must style all SVG elements from within d3. In other words, there must
> be no CSS styling involved for your d3 images. Given that is
> satisfied, the are two ways I found useful:
>
> 0. Copy everything from <svg ... till </svg> into a text file, call it
> foo.svg. Open the file in Adobe Illustrator (magic, it opens the image
> with all vector graphics and styling preserved), and save as PDF or
> another file format as you please. But, Illistrator does not recognize
> several features of SVG spec, including vertically aligned text. For

> more details on what it doesn't know, go here:http://help.adobe.com/en_US/illustrator/cs/using/WS714a382cdf7d304e7e...

[Nate Vack]

On Tue, Dec 13, 2011 at 11:50 AM, Sergiy Nesterko
<serge.n...@gmail.com> wrote:

> 0. Copy everything from <svg ... till </svg> into a text file, call it
> foo.svg.

...

> Inkscape does not load SVG files created like that properly. Putting
> in proper header information also does not help.

I've had good luck loading files generated this way in Inkscape. It
took some experimentation, but eventually worked fine.

You need to declare the xmlns attribute and the DOCTYPE, and have the
<?xml version="1.0" standalone="no"?> declaration.

In essence, I looked at a saved SVG file made mine look like it.

-n

[Sergiy Nesterko]

Hi Chi,

Could you please elaborate on how this is an easier way to preserve
vector graphics while converting from SVG to PDF? Thanks.

Sergiy

On Dec 13, 1:13 pm, Chi <windfal...@gmail.com> wrote:
> Hi,
>

> How about this:http://xmlgraphics.apache.org/batik/javadoc/org/apache/batik/apps/ras...

[Sergiy Nesterko]

I did that, too. While the file loaded, and its elements were present,
they were shifted around a little bit, which rendered this not useful.
Maybe, I did something incorrectly, but would it imply that going the
Inkscape way would make the process easier? Thanks.

On Dec 13, 1:14 pm, Nate Vack <njv...@wisc.edu> wrote:
> On Tue, Dec 13, 2011 at 11:50 AM, Sergiy Nesterko
>

[Nate Vack]

On Tue, Dec 13, 2011 at 12:22 PM, Sergiy Nesterko
<serge.n...@gmail.com> wrote:
> I did that, too. While the file loaded, and its elements were present,
> they were shifted around a little bit, which rendered this not useful.
> Maybe, I did something incorrectly, but would it imply that going the
> Inkscape way would make the process easier? Thanks.

Ah... the rendering will depend on how your attributes and styles are
included in your SVG. I generally have the best luck doing everything
inline and using styles wherever possible, when planning to export the
SVG.

But Inkscape may also just not agree with your browser on how to
render some SVG. In that case, something like phantomjs:

http://code.google.com/p/phantomjs/

may work better for you.

-n

[Chi]

Hi,

You may try this way:
http://xmlgraphics.apache.org/batik/tools/rasterizer.html

"
For example, if you type:

java -jar batik-rasterizer.jar samples/batikFX.svg
you will see the following printout:

Converting file: samples/BatikFX.svg to samples/BatikFX.png
"

Chi

[Sergiy Nesterko]

Thanks for the reference, this may be very useful. Sergiy

On Dec 13, 1:27 pm, Nate Vack <njv...@wisc.edu> wrote:
> On Tue, Dec 13, 2011 at 12:22 PM, Sergiy Nesterko
>

[Sergiy Nesterko]

Thanks for the explanation, but png is a raster image, as far as I
understand. I need a vector PDF. Sergiy

[John Delacour]

At 09:50 -0800 13/12/11, Sergiy Nesterko wrote:

>I decided to post this as I think there is a considerable number of
>people using d3 to create SVG graphics, and then aiming to convert
>them to another format (for example, PDF).
>
>As of now, there is no easy way to do it. I would love to see someone
>prove me wrong.

If you print from either FireFox (v. 9.0 and some earlier) or from
Safari on the Mac you will get a vector PDF. This is the best way to
do it. Your mail header suggests you are using the Mac. Opera and
old versions of Firefox will produce a raster image. There is also a
small programme svg2pdf, which requires Cairo to be installed and has
certain limitations.

It's worth noting that arcs and circles are converted to Bézier
curves in the PDF (or PostScript), which is a problem when you need
to do further conversions to, for example, DXF.

JD

[John Delacour]

At 20:59 +0000 13/12/11, I wrote:

>If you print from either FireFox (v. 9.0 and some earlier) or from
>Safari on the Mac you will get a vector PDF.

PS.

I see that Google Chrome (Mac again) will also give a vector PDF.

JD

[Sergiy Nesterko]

Hi John,

Thanks for the response. Yes, Safari, Chrome and Firefox preserve
vector graphics. The issue here is that they change the canvas size.
That is, when you print an SVG to PDF like that, in a standard setting
you will find that your output PDF is a letter-sized page, with your
graphic in the corner. If your goal is to have the page size equal to
the size of your SVG graphic, you are in a pickle.

This is described in my initial post in hack #1, so it does not add
anything new.

Thank you.

Sergiy

[John Delacour]

At 14:06 -0800 13/12/11, Sergiy Nesterko wrote:

>Thanks for the response. Yes, Safari, Chrome and Firefox preserve
>vector graphics. The issue here is that they change the canvas size.
>That is, when you print an SVG to PDF like that, in a standard setting
>you will find that your output PDF is a letter-sized page, with your
>graphic in the corner. If your goal is to have the page size equal to
>the size of your SVG graphic, you are in a pickle.

Isn't that just a matter of selecting the proper print settings,
paper size, scale etc.? I regularly print SVG drawings to PDF and
print at exactly the size I specify. If the drawing is to be used
for cutting with a CNC machine I use Cenon
<http://www.cenon.info/frame_gb.html> to convert the pdf to dxf. I
admit it would be most convenient if CNC machines could read SVG or
if I could convert directly from SVG to DXF or other machine codes
without going through PDF and having to edit all the arcs, but let's
hope D3 will lead to people taking a more serious view of SVG as a
scriptable drawing tool and lead way from the MacPaint view of it as
typified in Inkscape and Illustrator, and that the conversion aids
will follow in the wake of that.

JD

[Peter Rust]

There's Prince: http://www.princexml.com/

v8.0 came out in September with improved SVG support (added support
for the SVG <style> element, the SVG <switch> element, scientific/
exponential notation in SVG coordinates -- also fixed a bug affecting
non-break space characters in SVG).

We use it regularly for HTML-to-PDF. It's a bit spendy for a non-
commercial license, but we've been impressed with it so far.

-- Peter Rust
Developer, Cornerstone Systems

On Dec 13, 9:50 am, Sergiy Nesterko <serge.neste...@gmail.com> wrote:
> Dear group members,
>
> I decided to post this as I think there is a considerable number of
> people using d3 to create SVG graphics, and then aiming to convert
> them to another format (for example, PDF).
>
> As of now, there is no easy way to do it. I would love to see someone
> prove me wrong.
>
> However, there are hacks. First of all, it is important to realize
> that for the converted file to look like your original SVG image, you
> must style all SVG elements from within d3. In other words, there must
> be no CSS styling involved for your d3 images. Given that is
> satisfied, the are two ways I found useful:
>
> 0. Copy everything from <svg ... till </svg> into a text file, call it
> foo.svg. Open the file in Adobe Illustrator (magic, it opens the image
> with all vector graphics and styling preserved), and save as PDF or
> another file format as you please. But, Illistrator does not recognize
> several features of SVG spec, including vertically aligned text. For

> more details on what it doesn't know, go here:http://help.adobe.com/en_US/illustrator/cs/using/WS714a382cdf7d304e7e...

[Peter Rust]

Typo -- should be: "It's a bit spendy for a *commercial* license". The
non-commercial license is free.

[Kevin Lynagh]

Seconding Nate here. We're using PhantomJS to run D3 on the server
with SVG and PDF export. Since PhantomJS is basically headless WebKit,
you get full support for CSS, &c.

kevin

[Sergiy Nesterko]

Hi John,

Yes, you can set the paper size. However, Chrome adds margins to that,
even if you set zero margins (maybe, other browsers don't). This is
not ideal, especially if you don't want margins. However, this is
probably the easiest way to go about this. Thank you so much.

Sergiy

[Sergiy Nesterko]

That's a high price tag. Thank you for sharing the link. Maybe, the
logo the non-commercial version adds to the first page can be removed
in Illustrator..

[Peter Rust]

> That's a high price tag

True. We use Prince for a variety of high-profile projects, so it's
proved worth it for us.

-- Peter Rust
Developer, Cornerstone Systems

[Nelson Minar]

I would use Inkscape for this. Nate Vack, you said you have it working for you. Any chance you could write up what basic steps you had to do to get Inkscape consuming D3 SVG?

[Jason Davies]

Chris Viau wrote a good tutorial about using Inkscape with D3:

http://christopheviau.com/d3_tutorial/d3_inkscape/

The last section shows a simple way to create a download link for your
D3-generated SVG, using .innerHTML and converting it to a data: URI. It
sounds like that's sufficient to grab the data for loading into
Inkscape.

--
Jason Davies, http://www.jasondavies.com/

[Sergiy Nesterko]

Hi everyone,

I happened to write a quick tutorial essentially repeating the first
post here:

http://incontemplation.com/blog/?p=574

Please feel free to peruse in case useful. Happy coding!

Sergiy

On Dec 13 2011, 12:50 pm, Sergiy Nesterko <serge.neste...@gmail.com>
wrote:

> Dear group members,
>
> I decided to post this as I think there is a considerable number of
> people using d3 to create SVG graphics, and then aiming to convert
> them to another format (for example, PDF).
>
> As of now, there is no easy way to do it. I would love to see someone
> prove me wrong.
>
> However, there are hacks. First of all, it is important to realize
> that for the converted file to look like your original SVG image, you
> must style all SVG elements from within d3. In other words, there must
> be no CSS styling involved for your d3 images. Given that is
> satisfied, the are two ways I found useful:
>
> 0. Copy everything from <svg ... till </svg> into a text file, call it
> foo.svg. Open the file in Adobe Illustrator (magic, it opens the image
> with all vector graphics and styling preserved), and save as PDF or
> another file format as you please. But, Illistrator does not recognize
> several features of SVG spec, including vertically aligned text. For

> more details on what it doesn't know, go here:http://help.adobe.com/en_US/illustrator/cs/using/WS714a382cdf7d304e7e...

[Maxime Hebrard]

Hello here,

I have my SVG generate by D3.js
I download a .svg file using the innerHTML-canvas-URI method
I can open my file.svg with chrome and it render exactly what I want.

But I have the problem of PDF size,
When I click Ctrl+P the print window open,
I can select "save as PDF"
I can change the format as "A4", "Letter" or few other but I havn't the option of custom size...
So my image is automatically scale to the "paper"
Is there a way to specify the good dimension of the PDF ?
(I see that this post is old, maybe new solutions)

NB. Inkscape do not render well the SVG. So the method inkscape export as PDF with LaTeX option don't work for me