All geek questions in one place

Create and scale SVG for print

I have an application that creates a svg base tile that is about 300 x 150 pixels. I need to duplicate this tile to create a good printout on two A4 pages or on one A3 page. So basically, I am just doing page layout 101, in svg, and not in Photoshop / independently.

Can someone tell me how to start this? At the moment, I am doing this very naively:

  • set a large canvas of about 1500 x 1500 pixels
  • duplicate 4 x 6 times in JavaScript
  • print from browser

This is more or less acceptable, but it does not look very good. Would it help to create a canvas with a physical A4 page size? If I do this, I will have a problem with the fact that the tile is a complex graphic that I have currently created using pixel elements. Even if I do, the browser will apparently ignore the size of the canvas. Or do I need to convert to pdf first? If I do this, I still need to decide how to set up the svg page, which converts well to pdf. And do any tools really support svg 1.2 page material?

Please note that I cannot use Inkscape, since my svg code is completely JavaScript.

+6
source share
1 answer

Do not use canvas for this!

An SVG is a scalable graphic. You can simply scale the SVG yourself in the browser and then print from there.

If you want to scale SVG, then all you have to do is either apply the CSS scale:

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

Or SVG scale:

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

+1
source

Source: https://habr.com/ru/post/915782/

More articles:


All Articles