Render SVG Tag in PDF - ruby-on-rails

I want to render a signature in a pdf.
my html code:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path stroke="navy" stroke-width="2" fill="none" d="<%= #image %>"/>
</svg>
#image = "M96,8 L96,9 L96,11 L96,14 L98,18 L101,22 L115,32 L126,43
L142,50 L165,56 L189,56 L207,56 L219,50 L230,46 L233,43 L235,41
L236,40 L238,39 L239,39"
how can I render this in pdf?
im using rails 3 + prawn.
OR how can i create with #image an png?
any advice?


I am not familiar with ruby on rails or prawn but if you look at the Graphics section of the PDF spec, specifically in the path section it shows how the commands are laid out.
You could potentially use this info to map from the SVG draw commands to the postscript/pdf draw commands.
A question that might help: How to insert a SVG file in a PDF document?


You can use the wicked_pdf gem which renders HTML and JavaScript into a PDF file. It uses the wkhtmltopdf lib.
To convert to PNG I would recommend the IMGKit gem, which uses wkhtmltoimage lib.


You can use https://github.com/mogest/prawn-svg
Can't confirm if it works, but as I needed to do the same as you.
I've found that after a simple google research I found this plugin.
I will test it as soon as I can.
Kind regards

Related

wicked_pdf css background image not showing

I'm using wicked_pdf in Ruby-on-Rails to generate a PDF and I want to set a background image on the body element. I've linked a stylesheet with stylesheet_link_tag wicked_pdf_asset_base64("pdf.css") and now I want to import the image as base64 (linking to the image file to save looking at the code inline).
Sass code:
body
background: asset-url('pdf-background.png')
It works in debug mode but not rendered as a PDF.

body
background: asset-data-url('pdf-background.png')
Thanks to #pbrueske https://stackoverflow.com/a/30187719/203915

I use 'wkhtmltopdf' to convert html to pdf,In my html,the image is displayed,however the pdf is not.What is wrong with it?

This is my gemfile:
gem 'pdfkit'
gem 'wkhtmltopdf'
This is my route.rb:
get '/pdf' => 'search#pdf'
This is my controller:
def pdf
render 'pdf',layout:false
end
This is my erb search/pdf.html.erb:
<p>test</p>
<img src="/assets/1.jpg">
When I visit 'localhost:3000/pdf', the images can be seen, but for 'localhost:3000/pdf.pdf' they are not shown.
Both of the formats have the <p> content displayed but in the html version the image can be seen whereas in the pdf version it can't. What's the problem?
Also, I just found that I can resolve it by using a remote img url. How can I use local images?

You need to use
= wicked_pdf_image_tag '1.jpg'

grails-wkhtmltopdf plugin is not rendering

Grails 3.0.9
compile "org.grails.plugins:wkhtmltopdf:1.0.0.RC3"
application.yml already has pdf: application/pdf
command line works %> wkhtmltopdf www.google.com myhomepage.pdf
I am trying to generate PDF in controller/action. But it renders the template rather than generate PDF.
render( filename:"File bla.pdf",
view:"/sr/pdfGenerator",
model:[bla:bla],
header:"",
footer:"",
marginLeft:20,
marginTop:35,
marginBottom:20,
marginRight:20,
headerSpacing:10)
If i comment out render() from action it will generate empty PDF.

This seems to be a bug in the introduced because of a change after Grails 3.0.7. Please see developer response in GitHub

PDFKit header or footer not working

I am trying to add page numbers to each page of pdf generated using PdfKit. The following is my code :
content = File.read( "report.html.erb")
template = ERB.new(content)
set_margin = 0.to_s
kit = PDFKit.new(template.result(binding), :header_center => "Page [page] of [toPage]", page_width: '157.42', page_height: '52.77', :margin_top => set_margin+'in', :margin_right => set_margin+'in', :margin_bottom => set_margin+'in', :margin_left => set_margin+'in')
kit.to_file(file_path)
No header is getting displayed on the generated pdf. Please provide a solution for this.

Please type wkhtmltopdf --help in console. I believe, you have not patched Qt library with wkhtmltopdf fixes, hence you will see at the bottom of output:
Reduced Functionality:
This version of wkhtmltopdf has been compiled against a version of QT without
the wkhtmltopdf patches. Therefore some features are missing, if you need
these features please use the static version.
Currently the list of features only supported with patch QT includes:
Printing more then one HTML document into a PDF file.
Running without an X11 server.
Adding a document outline to the PDF file.
Adding headers and footers to the PDF file.
Generating a table of contents.
Adding links in the generated PDF file.
Printing using the screen media-type.
Disabling the smart shrink feature of webkit.
To print out headers and footers one should rebuild Qt library with patches provided by wkhtmltopdf.

How do I create kanji (Japanese letters) animations from SVG data in Objective-C?

I've seen several iPhone/iPad apps that show animated kanji. For those of you who are unfamiliar with kanji, stroke order is a very important part of kanji studying so if you are doing an app showing the animated stroke order is an essential part.
All the apps I've seen that do this, credit the KanjiVG project as their source for the stroke order data. After some research I found that the KanjiVG project gives you the data in SVG format encoded in XML.
Having never programmed graphics before (and being relatively new to iOS) I'm at a loss to where to keep looking for info.
I think I need to:
Parse the XML into SVG.
Render the SVG.
...but I'm not sure. For what I could see how this is done in the iPhone/iPad apps I bought, the animations all look surprisingly similar so there must be a common library that these guys are using that I'm failing to find (probably because I don't know exactly what I'm looking for!)
Any pointers that anyone can give me will be greatly appreciated.
Cheers!

This ended up being SO MUCH easier than I originally thought. The XML provided by the KanjiVG project not only contains all the kanji "parts" but the SVG data aswell!
So you get this:
<kanji midashi="会" id="4f1a">
<strokegr element="会">
<strokegr element="人" position="top" radical="general">
<stroke type="㇒" path="M52.25,14c0.25,2.28-0.52,3.59-1.8,5.62c-5.76,9.14-17.9,27-39.2,39.88"/>
<stroke type="㇏" path="M54.5,19.25c6.73,7.3,24.09,24.81,32.95,31.91c2.73,2.18,5.61,3.8,9.05,4.59"/>
</strokegr>
<strokegr element="云" position="bottom">
<strokegr element="二">
<stroke type="㇐" path="M37.36,50.16c1.64,0.34,4.04,0.36,4.98,0.25c6.79-0.79,14.29-1.91,19.66-2.4c1.56-0.14,3.25-0.39,4.66,0"/>
<stroke type="㇐" path="M23,65.98c2.12,0.52,4.25,0.64,7.01,0.3c13.77-1.71,30.99-3.66,46.35-3.74c3.04-0.02,4.87,0.14,6.4,0.29"/>
</strokegr>
<strokegr element="厶">
<stroke type="㇜" path="M47.16,66.38c0.62,1.65-0.03,2.93-0.92,4.28c-5.17,7.8-8.02,11.38-14.99,18.84c-2.11,2.25-1.5,4.18,2,3.75c7.35-0.91,28.19-5.83,40.16-7.95"/>
<stroke type="㇔" path="M66.62,77.39c4.52,3.23,11,12.73,13.06,18.82"/>
</strokegr>
</strokegr>
</strokegr>
</kanji>
And if you create your SVG file out of only the path attributes of the stroke nodes then you get a nice SVG drawing! Like this:
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" version="1.1" baseProfile="full">
<path d="M52.25,14c0.25,2.28-0.52,3.59-1.8,5.62c-5.76,9.14-17.9,27-39.2,39.88" style="fill:none;stroke:black;stroke-width:2" />
<path d="M54.5,19.25c6.73,7.3,24.09,24.81,32.95,31.91c2.73,2.18,5.61,3.8,9.05,4.59" style="fill:none;stroke:black;stroke-width:2" />
<path d="M37.36,50.16c1.64,0.34,4.04,0.36,4.98,0.25c6.79-0.79,14.29-1.91,19.66-2.4c1.56-0.14,3.25-0.39,4.66,0" style="fill:none;stroke:black;stroke-width:2" />
<path d="M23,65.98c2.12,0.52,4.25,0.64,7.01,0.3c13.77-1.71,30.99-3.66,46.35-3.74c3.04-0.02,4.87,0.14,6.4,0.29" style="fill:none;stroke:black;stroke-width:2" />
<path d="M47.16,66.38c0.62,1.65-0.03,2.93-0.92,4.28c-5.17,7.8-8.02,11.38-14.99,18.84c-2.11,2.25-1.5,4.18,2,3.75c7.35-0.91,28.19-5.83,40.16-7.95" style="fill:none;stroke:black;stroke-width:2" />
<path d="M66.62,77.39c4.52,3.23,11,12.73,13.06,18.82" style="fill:none;stroke:black;stroke-width:2" />
</svg>
Copy the above SVG XML and paste it into a plain text file. Name this file something that ends in .svg and drag it into Firefox. There it is, a graphic representation of the Kanji!
So now that I have all the "raw" SVG info it's just a matter of finding the appropriate SVG renderer.

I wrote a javascript renderer for KanjiVG data a few years back that animates stokes. It might serve as a working example for you or even a solution depending on what you want to do.
The approach I took was to break the KanjiVG stroke data into a set of javascript data files, write my own code for drawing cubic and quadratic curves and then write an event queue function that takes kanji, looks them up and enqueues the rendering of each stroke in an array.
The source is not obfuscated in any way and contains the odd comment. Best of luck!

I'm interested in this as well. Have you gotten any further?
I am able to display the kanji from an svg file this way by creating a UIwebview.
In this example my file is k1.svg, and the image was drawn after hitting a button (the sender). I'm working on getting it animated now
-(void) doSVG:(id)sender {
NSString *filePath = [[NSBundle mainBundle]
pathForResource:#"k1" ofType:#"svg"];
NSURL *fileURL = [[NSURL alloc] initFileURLWithPath:filePath];
NSURLRequest *req = [NSURLRequest requestWithURL:fileURL];
//[kanjiView setScalesPageToFit:YES];
[yourWebView loadRequest:req];
}
My question to you is, have you found an easy way to get all the svg info out of the xml file from kanjiVG?

There is no need to translate the KanjiVG data into SVG data, because it already is SVG data. From their wiki:
Any KanjiVG file is 100% SVG-compliant and can be opened by one's favorite SVG viewer/editor to be seen as-is.
The reason the data looks so different is that they're using SVG Groups to store extra information. But the KanjiVG data itself should still render fine using any standards-compliant SVG library.

You can also consider "AnimCJK project" (https://github.com/parsimonhi/animCJK) as source for kanji svg data. The principle is slightly different from "KanjiVG project" (http://kanjivg.tagaini.net/) and the underlying font is different (kaisho style), but extracting the path data is simple. Using a regex such as #<path[^>]+id="z[0-9]+d[0-9]+"[^>]+d="([^"]+)"[^>]+># does the job.

Resources