2012-05-15 7 views
6

私は約300 x 150pxの基本的なSVGタイルを作成するアプリを持っています。このタイルを複製して、2枚のA4ページまたは1枚のA3ページで素敵なプリントアウトを作成する必要があります。だから、基本的には、Photoshop/svgではなくsvgでページレイアウト101をやっています。プリンタ出力のためのSVGの作成とスケーリング

誰でも私にこれを始める方法の指針を教えてもらえますか?現時点では、私は非常に単純にそれをやっている:

  1. セット大きなキャンバスを、約1500のx 1500px
  2. 印刷ブラウザからJavaScriptでタイルを4×6回を複製

これは多かれ少なかれ控えめですが、見栄えが良くありません。それは、A4ページの物理的なサイズでキャンバスをセットアップするのに役立つでしょうか?私がこれを行うと、タイルは現在ピクセル単位で作成した複雑なグラフィックであるという問題があります。私がこれを行っても、ブラウザはおそらくキャンバスのサイズを無視してしまうでしょう。それとも、私はpdfに最初に変換すべきですか?私がこれを行うならば、私はまだpdfにうまく変換するsvg 'ページ'を設定する方法を工夫する必要があります。そして、どのツールも実際にsvg 1.2ページのものをサポートしていますか?

私のsvgコードは完全にJavaScriptであるため、Inkscapeは使用できません。

+0

あなたは、いくつかのスクリーンショットを提供することができますそれが良く見えない方法を示すために? Jsfiddleを提供することができれば理想的です。人々は何がうまくいかないのかを感じ取ることができます。また、どのようにSVGからPDFに変換していますか?おそらくあなたはサーバー上でそのビットをやっているのだろうか? – halfer

+0

A4に印刷された10ptのテキストが14ptとして出てきて、右余白が途切れていて、ページ区切りが失われていて、あなたがそこにいるWord文書を想像してみてください。投稿する前にpdf変換を試していなかったが、今wkhtmltopdfを試してみた。キャンバスを297x210mmに設定し、スマートスケーリングなしでwkhtmltopdfを実行し、マージンをゼロにすると、出力は1つのA4ページに収まりますが、中心にはなりません。問題は、ビューボックスを論理的に設定し、ピクセルで設計できるようにすることです。私は画素をあきらめてptsとcmに移動しなければならないかもしれないと思う。 – EML

答えて

1

これにキャンバスを使用しないでください!

SVGのポイントはスケーラブルなグラフィックスです。ブラウザで自分自身でSVGを拡大/縮小し、そこから印刷することができます。

あなたがSVGを拡張したい場合は、あなたがしなければならないすべてはCSSスケール適用のいずれかです:

http://jsfiddle.net/simonsarris/xYZyf/

やSVGの規模を:

http://jsfiddle.net/simonsarris/xYZyf/1/

+0

CSSスケールは、2014年7月現在のWebkitベースのブラウザでは機能していないようです –

関連する問題