alafr / svg-to-pdfkit Goto Github PK

I'm trying to add basic support for simple markers. I will update the code because of other bug fixes, however the size and the styles of the markers are still wrong in most cases.

Could you publish SVG-to-PDFKit as npm package for node on npmjs.com?

Thanks in advance :)

Francesco

Is this SVGtoPDF have feature for rendering shadow effect?

<filter id="SVGID_32" y="-22%" height="144%" x="-21%" width="142%" >
	<feGaussianBlur in="SourceAlpha" stdDeviation="1"></feGaussianBlur>
	<feOffset dx="-2" dy="0" result="oBlur" ></feOffset>
	<feFlood flood-color="rgba(0,0,0,1)"/>
	<feComposite in2="oBlur" operator="in" />
	<feMerge>
		<feMergeNode></feMergeNode>
		<feMergeNode in="SourceGraphic"></feMergeNode>
	</feMerge>
</filter>
	<g transform="translate(588.56 1434.18) scale(1.06 1.06)" style="filter: url(#SVGID_32);">
		<text xml:space="preserve" font-family="us101" font-size="93.33333333333334" font-style="italic" font-weight="400" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(236,236,236); fill-rule: nonzero; opacity: 1; white-space: pre;" >
			<tspan x="-378.71" y="29.32" >AAAAA</tspan>
		</text>
	</g>

Hi, currently when I try to make PDF from a very large SVG, it stops the browser for a while. I want to show the loading gif to make users wait. However, the gif freezes as well. It plays again when the PDF has been done. Can you please suggest me a way to resolve this problem?

Hi guys,

Have just used the library and encountered two issues:

Major:

1. clip-path attribute is completely ignored. Take a look at the next SVG:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="302.3622047244088" height="566.9291338582666" viewBox="-210.1417322834642 -191.99999999999943 2418.8976377952704 4535.433070866133" transform="rotate(-90) translate(-302.3622047244088)" xml:space="preserve">
<desc>Created with Fabric.js on https://www.casy.com.ua1.7.16</desc>
<defs>
</defs>
        <defs>
          
              <clipPath id="mask-0">
                <rect
                  x="0"
                  y="0"
                  width="999.307086614171"
                  height="4151.433070866134"
                />
              </clipPath>
            
              <clipPath id="mask-1">
                <rect
                  x="999.307086614171"
                  y="0"
                  width="999.307086614171"
                  height="4151.433070866134"
                />
              </clipPath>
            
        </defs>
<defs>
        <clipPath id="rounded-corners">
          <path
            d="
              M302.3622047244088,0
              h1393.8897637795244
              a302.3622047244088,302.3622047244088 0 0 1 302.3622047244088,302.3622047244088
              v3546.708661417316
              a302.3622047244088,302.3622047244088 0 0 1 -302.3622047244088,302.3622047244088
              h-1393.8897637795244
              a302.3622047244088,302.3622047244088 0 0 1 -302.3622047244088,-302.3622047244088
              v-3546.708661417316
              a302.3622047244088,302.3622047244088 0 0 1 302.3622047244088,-302.3622047244088
              z"
            fill="#FFFFFF"
          />
        </clipPath>
      </defs>
<g clip-path="url(#rounded-corners)"><g clip-path="url(#mask-0)"><g transform="translate(500.8 2076.88) scale(8 8)" style="">
	<g transform="translate(0 0)" style="">
	<g transform="translate(0 0) scale(0.81 0.81)">
<image xlink:href="http://213.196.39.233/images/20170825/fb2054dc3f8dae65cf465292a9672d473feddb8e.png" x="-333" y="-320.5" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" width="666" height="641" preserveAspectRatio="none"></image>
</g>
</g>
</g>
</g><g clip-path="url(#mask-1)"><g transform="translate(1502.88 2077.92) scale(8 8)" style="">
	<g transform="translate(0 0)" style="">
	<g transform="translate(0 0) scale(1.11 1.11)">
<image xlink:href="http://213.196.39.233/images/20170825/e6ebbc7df59d5c6c38066fe19369b91b5ade573b.png" x="-415" y="-234" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" width="830" height="468" preserveAspectRatio="none"></image>
</g>
</g>
</g>
</g></g></svg>

If you open and look at this SVG in the browser, you will see that entire SVG has rounded corners, which are done via clip-path as well as two images are out one near another also via clip-path. After rendering it via your library it gives the document which I assigned. As you can see the clip-path attribute is completely ignored.

2df27e1b-8227-41b7-bc5c-cc4a12fc4305.pdf

Minor
2. Preamble is warned: parseXml: data after document end has been discarded

Preamble is <?xml version="1.0" encoding="',e.encoding||"UTF-8",'" standalone="no" ?>\n','<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" ','"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Please advise.

The horizontal lines are fully opaque red. Over the lines are drawn:
(a) a group with opacity 0.5 containing two opaque squares
(b) an opaque group with two squares each with opacity 0.5

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <line x1="0" y1="0" x2="600" y2="0" id="line" stroke-width="30" stroke="red"/>
  </defs>
  <use y="30" xlink:href="#line"/>
  <use y="80" xlink:href="#line"/>
  <use y="130" xlink:href="#line"/>
  <use y="180" xlink:href="#line"/>
  <g opacity="0.5" transform="translate(50 20)">
    <rect x="0" y="0" width="120" height="120" fill="green"/>
    <rect x="50" y="50" width="120" height="120" fill="orange"/>
  </g>
  <g transform="translate(330 20)">
    <rect opacity="0.5" x="0" y="0" width="120" height="120" fill="green"/>
    <rect opacity="0.5" x="50" y="50" width="120" height="120" fill="orange"/>
  </g>
</svg>

Test text-tspan-02-b.svg fails completely

What version of PDFKit is used in the demo?

Some SVG I have works in the demo but not using the latest pdfkit (v0.8.0)

PDFKit - v0.8.0

Demo

The SVG

<svg height="260" style="overflow: hidden;" width="150">
	<g transform="translate(0.5,4.5)">
		<g class="c3-chart">
			<g class="c3-chart-arcs" transform="translate(75,103)">
				<text class="c3-chart-arcs-title" style="text-anchor: middle; opacity: 0;"></text>
				<g class="c3-chart-arc c3-target">
					<g class="c3-shapes c3-arcs">
						<path class="c3-shape c3-shape c3-arc" d="M4.362804221962446e-15,-71.25A71.25,71.25 0 1,1 -23.985406502592383,-67.09145083321272L0,0Z" style="fill: rgb(31, 119, 180); cursor: pointer; opacity: 1;" transform="scale(1,1)"></path>
					</g>
				</g>
				<g class="c3-chart-arc c3-target">
					<g class="c3-shapes c3-arcs">
						<path class="c3-shape c3-shape c3-arc" d="M-23.985406502592383,-67.09145083321272A71.25,71.25 0 0,1 -6.1082981360932544,-70.98768339564688L0,0Z" style="fill: rgb(255, 127, 14); cursor: pointer; opacity: 1;" transform="scale(1,1)"></path>
					</g>
				</g>
				<g class="c3-chart-arc c3-target">
					<g class="c3-shapes c3-arcs">
						<path class="c3-shape c3-shape c3-arc" d="M-6.1082981360932544,-70.98768339564688A71.25,71.25 0 0,1 -1.3088412665887336e-14,-71.25L0,0Z" style="fill: rgb(44, 160, 44); cursor: pointer; opacity: 1;" transform="scale(1,1)"></path>
					</g>
				</g>
			</g>
		</g>
	</g>
</svg>

The SVG was generated by the C3 chart library.

Thanks

Ideally I wouldn't have to write out to the DOM before importing the svg. If I have to, then I have to, but I wanted to attempt not doing so. Below is my attempts at doing so and ultimately using the same method as your examples to get it working. My question: Is there a way to get Method 1 working?

The core html is the same as that (or thereabouts) of ticket #26.

There are two potentials for output. 1) The black boxes. 2) The correct output.

// Method #1 - Pure HTML, true or false show black boxes
//SVGtoPDF(doc, app.mermaid.html, doc.x, doc.y, { useCSS: true });

// Method #2 - jQuery in memory dom object, true or false show black boxes
//SVGtoPDF(doc, $.parseHTML(app.mermaid.html)[0], doc.x, doc.y, { useCSS: true });

// Method #3 - jQuery in memory dom object, true or false show black boxes
//let hiddenDiv = $("<svg>").attr({ 'xmlns': "http://www.w3.org/2000/svg", 'xmlns:xlink': "http://www.w3.org/1999/xlink" }).html(app.mermaid.html);
//SVGtoPDF(doc, hiddenDiv[0].firstChild, doc.x, doc.y, { useCSS: true });

// Method #4 - jQuery in memory dom object, true or false show black boxes
//SVGtoPDF(doc, $.parseHTML('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' + app.mermaid.html + '</svg>')[0].firstChild, doc.x, doc.y, { useCSS: true });

// Method #5 - hidden DOM object, true WORKS, false show black boxes
let hiddenDiv = $("#hidden-div").html('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' + app.mermaid.html + '</svg>');
SVGtoPDF(doc, hiddenDiv[0].firstChild, doc.x, doc.y, { useCSS: true });

I think it won't be possible because in PDFKit (and in PDF 1.3) links are only supported for a few basic shapes. And even with the polygon links supported it would be difficult to implement.
I keep this issue open because the children of the <a> tag must be rendered even without the link.

Coming soon

Hey! I have a few SVG's I want to draw side by side, so each one would occupy 1/3 of page's width. The original bounds of each graphic is larger than that, so it happens that they overlap each other.

const options = {
    width: doc.page.width / 3,
    height: 150,
};
SVGtoPDF(doc, svg[i], left, 0, options);

Is this supported? I need it to resize while keeping aspect ratio.

Thanks in advance!

Trying to use pattern with path inside:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="612px" height="792px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve"> <pattern y="792" width="42" height="32" patternUnits="userSpaceOnUse" id="Volcano" viewBox="0 -32 42 32" overflow="visible"> <g> <polygon fill="none" points="0,-32 42,-32 42,0 0,0 "/> <path fill="#0034E3" d="M26,0c0-2.21,1.79-4,4-4c6.627,0,12-5.373,12-12s-5.373-12-12-12c-2.21,0-4-1.79-4-4h-2 c0,3.314,2.686,6,6,6c5.523,0,10,4.477,10,10S35.523-6,30-6c-3.314,0-6,2.686-6,6H26z M16,0c0-2.21-1.79-4-4-4 C5.373-4,0-9.373,0-16s5.373-12,12-12c2.21,0,4-1.79,4-4h2c0,3.314-2.686,6-6,6C6.477-26,2-21.523,2-16S6.477-6,12-6 c3.314,0,6,2.686,6,6H16z"/> </g> </pattern> <rect x="51" y="50" fill="url(#Volcano)" stroke="#000000" stroke-miterlimit="10" width="146" height="159"/> </svg>

would you have suggestion what I might be doing wrong?

Seems this might be not supported. Using simple shapes (rect, circle) works just fine.

Actually, it seems the pattern is there but only MacOS finder renders it, anything else (like Preview, Chrome) shows blank space.
It comes out as expected in print.

Hi.
I'm getting an issue with importing unicode ttf fonts.

Here's my sails.js controller code:
exportPDF: function(req, res) { let svg = req.body.svg; svg = decodeURIComponent(Buffer.from(svg, 'base64')); const doc = new PDFDocument({compress: false, layout : 'landscape'}); doc.registerFont('Trebuchet', 'font/trebuchet.ttf'); doc.registerFont('Segoe', 'font/segoe.ttf'); doc.pipe(res); svg2pdf(doc, svg, 0, 72, {widht: 1024, height: 600, fontCallback: function() { return 'Trebuchet'; }}); doc.end(); }

When I open the resulting PDF in Adobe Acrobat I get a message that the embedded font cannot be extracted (with some symbols before the font's name, like 'TFCUE+TrebuchetMS').
SVG I am trying to convert contains Cyrillic symbols, and they are not displayed.

This code, though, works fine, and it is opened perfectly well:

getPDF: function(req, res) { const doc = new PDFDocument({compress: false, layout : 'landscape'}); doc.registerFont('Trebuchet MS', 'font/Trebuchet MS.ttf'); doc.registerFont('Segoe UI', 'font/SegoeUIRegular.ttf'); doc.pipe(res); doc.font('Trebuchet MS').text('Привет, Мир!'); doc.end(); }

Here's a sample SVG:
svg.svg.zip

See this snippet:

<svg xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" version="1.1" viewBox="0 0 600 480" width="100%" x="0px" xmlns="http://www.w3.org/2000/svg" y="0px">
    <text fill="#828282" font-family="Arial" font-size="10" text-anchor="end">
        <tspan dominant-baseline="middle" x="50" y="110">450</tspan>
        <tspan dominant-baseline="middle" x="50" y="158">400</tspan>
        <tspan dominant-baseline="middle" x="50" y="206">350</tspan>
        <tspan dominant-baseline="middle" x="50" y="254">300</tspan>
        <tspan dominant-baseline="middle" x="50" y="302">250</tspan>
    </text>
</svg>

The last text item ("250") isn't properly aligned to the column. To my surprise I got the same result with individual <text>. To work around that, I'm adding another <tspan> containing a space.

On the demo page, checking the box "Insert the SVG in the document and use the computed style" I get the correct result.

With mozilla/pdf.js and huddle/resemble.js

• spreadMethod attribute
• href references

I'm trying to center text horizontally & vertically about the insertion point, but I'm finding that's not supported?

the following works within svg, but when applied to pdf the text isn't centered:

(i replaced the tags opening angle brackets with ... so it would display)

...svg viewBox="0 0 360 360">
...style>
.bN { text-anchor: middle; alignment-baseline: central; }
.bP {fill-opacity: 0.4; stroke: #000;}
.../style>
...path d="M 120,120 L 240,120 L 240,240 L 120,240 z" class="bP" >
.../path>
...text x="180" y="180" style="font-size: 40px;" class="bN">
ABC
.../text>
.../svg

When I use patterns in my PDF's, Adobe Reader thinks file is broken or Adobe Illustrator says:

Acrobat PDF File Format is having difficulties. Error while parsing a Form, Type 3 Font, or Pattern.

Since I have no forms nor fonts in there I think it must be pattern.

related to #18

<a href="mailto:[email protected]?Subject=Simple&Body=SimpleBody"></a>

in svg, the a tag href is truncated to just "mailto:[email protected]"

A multipoint path with a stroke width of 1px that represents a line gets drawn as a solid shape.

<svg width="700" height="200">
  <path style="opacity: 1; fill: none; stroke: rgb(0, 0, 0); stroke-width: 1px;" d="M7,12.083L166,105.42093175853017L324,125.16338582677166L483,128.7788713910761L642,133.91666666666666"></path>
</svg>

Expected

Generated

Hi,

though the graphical output of a SVG in different Firefox versions is the same, the PDF output differs in support for basic features.

Firefox 34.0.5

• font-size has no effect
• font-weight has no effect (no bold)
• stroke-dasharray has no effect (no dashed line)
• stroke-width is always 1
• markers are not there
• dominant-baseline works (!)

Firefox 45.4.0

• markers are still not there
• dominant-baseline has no effect

Firefox 52.2.0

• dominant-baseline has no effect

I'd like to know why that is. Regarding these features they look the same on all those versions in the browsers, but not in the converted PDF file.
Unfortunately we cannot use the latest version of Firefox here and also no alternative browser.

Edit regarding dominant-baseline:
The reason for dominant-baseline is as follows:
I have a text element with 'dominant-baseline' on it and a tspan inside that should inherit it, which it does in FF34 (in browser and PDF).
Your this.get('dominant-baseline') function looks for that string which doesn't exist in FF34 in the css property of an element, but it does exist in FF52 -> css['dominant-baseline'] does not exist in FF34 but in FF52.
What does exist in both versions is css['dominantBaseline'], which is set to 'auto', but it is ignored. In FF52 the css['dominant-baseline'] exists and is also set on 'auto' and thus used, even though it should inherit from the parent element.

In other words, this works:
<text x="0" y="0" text-anchor="middle" style="dominant-baseline: text-after-edge;"> <tspan x="0" dy="0em" style="dominant-baseline: text-after-edge;">text</tspan> </text>

This does not:
<text x="0" y="0" text-anchor="middle" style="dominant-baseline: text-after-edge;"> <tspan x="0" dy="0em">text</tspan> </text>

Edit2 regarding markers:
Ok, I think I found the problem with the markers:
In FF45 the complete URL path to the editor.html is appended to the ID of the marker and therefore the regex in the "this.resolveURL" function doesn't filter as expected. I inserted .* before every # and [^"'] in the first group that changed it to:
/^\s*(?:url\(.*#(.*[^'"])\)|url\(".*#(.*)"\)|url\('.*#(.*)'\)|#(.*))\s*$/
Now it works as expected and the markers appear in the PDF.

Regarding FF34: the css object doesn't have the properties marker-start, marker-mid and marker-end. I guess that's the problem there, but haven't tested it.

Hi there, nice-looking project! I'm new to SVG. I've been investigating this approach of rendering HTML inside an SVG element, using:

<foreignObject>
  <div xmlns="http://www.w3.org/1999/xhtml">
  </div>
</foreignObject>

From what I can tell, you don't support <foreignObject>, is that right? It seems like it would be impossible to support. In any case, it might be worth adding to your "Unsupported" list on the readme!

Hi,

if a path is a curve and an marker arrowhead is defined, then the arrowhead will always point to the right in the pdf. The "orient" attribute from the marker is set to "auto".
Straight paths are ok though.

https://www2.pic-upload.de/img/33363319/svg_pdf_marker_arrowhead_comparison.png

Thank you in advance.

Take this piece of SVG:

<circle cx="150" cy="120" fill="transparent" r="57.297469361769855164730224415088"
    stroke="#5776D3" stroke-width="20"
    stroke-dasharray="124.35562805872758 235.64437194127245" stroke-dashoffset="90"></circle>

It renders like an arc on browsers, but on PDF it is rendered as a full circle. I see support for stroke-dasharray on source code, but I can't figure out why it doesn't work.

Any ideas?

Im trying to add an svg, of dynamic height, and then below that place some text. Is there an easy way to know where to set my doc.y?

Advantages:

• make code cleaner and more modern
• improve performance

Drawbacks:

• drop support for Internet Explorer
• it will need Babel for old browsers

This issue is left open for feedback

getComputedStyle() doesn't work for elements referenced by <use> elements

When SGV file contains a base64 images, the function SVGElemImage is not working properly.

May be the PDFKit version ???

Issue 1. If I add an SVG to a blank document with this line, the image is added halfway down the document:

SVGtoPDF(doc, svgdata, 0, 0);

I would expect this image to be added to the top left of the document, and be sized to maximally cover the document without distorting.

Issue 2. If I add in width and height as options, I would expect that the SVG would be sized to to that exact size. However, I'm finding that this is not the case. In my case, I have an SVG that has the viewbox size in the file as "0 0 1360 744", so I as the following:

var doc_h = 6 * 72; // 6 inches
var doc_w = 70 * 2.83465; // 70 mm
var svg_w = doc_w; // same as document width
var svg_h = 744 / 1360 * svg_w; // calculate svg height proportionately
var doc = new PDFDocument({ size: [doc_w, doc_h], margin: 0, compress: false });
SVGtoPDF(doc, contents, 0, 0, { width: svg_w, height: svg_h } ); 

The SVG would be expected to be in the top left of the document, the same width as the document. But alas, the SVG image is considerably smaller than the document. In order to make the image approximately the same width as the document I have to multiply doc_w by 1.3 to calculate svg_w. Am I misunderstanding something?

https://www.w3.org/Graphics/SVG/Test/20110816/harness/htmlObjectApproved/painting-stroke-10-t.html
https://www.w3.org/Graphics/SVG/Test/20110816/harness/htmlObjectApproved/painting-control-04-f.html

Great script, exactly what I needed. However I encountered two issues:

1. Number.isNaN() caused an error in IE11. I could fix this simply by removing "Number.".
2. The position of elements is not always correct. I used the script for a Highcharts graph. The txt file is the SVG code originally exported from the graph and shows it as it should be when the extension is changed to "svg". If compared to the PDF the position of the elements on the axes is not exactly correct. The left dots of the graph cover the "%" characters on the y axis.
   Would be great if this could be fixed.
   mychart-svgtopdfkit.pdf
   mychart-svgtopdfkit.txt

Hello,
First of all I wanted to thank you for this. Makes using pdfkit much easier. I am receiving the following message when trying to convert an svg with styles to a pdf document:

SVGtoPDF: useCSS option can only be used for SVG elements in compatible browsers

I have tried to use your demo site and it works perfectly with the useCSS option.

Here is a link to the gist. https://gist.github.com/josecolella/adc2e835a84a148b441b37453b54f064

Hi, I got this error while trying to render an svg
big-svg.zip

This issue happened on Chrome. I had tried Firefox on the same machine but it's ok.

Uncaught RangeError: Maximum call stack size exceeded
    at SvgShape.mergeShape (svg-to-pdf.js:669)
    at SvgElemGroup.SvgElemHasChildren.getBoundingShape (svg-to-pdf.js:1118)
    at SvgElemGroup.SvgElem.getBoundingBox (svg-to-pdf.js:1060)
    at SvgElemGroup.SvgElemStylable.clip (svg-to-pdf.js:1071)
    at SvgElemGroup.drawInDocument (svg-to-pdf.js:1186)
    at SvgElemSvg.SvgElemHasChildren.drawChildren (svg-to-pdf.js:1129)
    at SvgElemSvg.drawInDocument (svg-to-pdf.js:1245)
    at SVGtoPDF (svg-to-pdf.js:2099)
    at SVGSVGElement.<anonymous> (rvl_model_printer.js:80)
    at Function.each (jquery-1.10.2.min.js:4)

Hi,
I recently ran into an issue with converting svg with elements to pdf. Basically, the image doesn't show.
I tried an example like this using your demo site:
<svg><image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/png;base64,[base64 stuff]"></image></svg>
and the resulting pdf is blank. I believe this used to work a few months ago - not sure what changed since then. I've attached a txt file including the URI for reference.
URI.txt

Is this an issue you can address, or should I be looking somewhere else?
Thanks.
[edit: I'm using pdfkit 0.8.2]

<textPath> could support a few more patterns for paths.

1. Inline d attribute;
2. Data URIs on href;
3. Paths with not-only fragments (i.e. /page.html#fragment)

Item 3 is a bit more complicated, given there's no document context. How should we resolve same-document references? External reference may be trickey as well.

I would have a try at these, but would like to know what do you think.

There is xml code fails. Shadow effect is never working.












AAAAAAAAA

That will need bounding box calculations

Hi,

take a look:
https://runkit.com/sajjad-shirazy/5a796f6ba3b90a001274c4fb
the first svg contains a blue circle but it shows it red. could you please help me how i can solve this bug.
the lib duplicates the element of the last svg to the first one !

thanks

This square measures 13,33cm in the exported PDF, it should be exactly 10cm

<svg width="10cm" height="10cm" preserveAspectRatio="none">
<rect fill="green" width="100%" height="100%"/>
</svg>