How to set svg print (in mm for CorelDraw) and real/preview (in px) sizes?

Question

I have a basic SVG file, that has a fix 50mm x 25mm print size (so if I open it with CorelDraw the document size will be this.)

<svg 
    width=50mm
    height=25mm
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
>
    <g>
        <text
            x=0
            y=55
            font-family="Verdana"
            font-size=55
            fill="black"
        >NOS?</text>
        <line
            class='v_pos'
            stroke="green"  
            x1=0 
            y1=55 
            x2=500
            y2=55
            stroke-width="1"  
        />
    </g>
</svg>

How can I achieve 500x250 px size in the browser? The ratio does not change, but I need a fixed canvas size in the web-browser too.

I need reword/extend the problem:

I'd like to export the graphics (created in browser) to CorelDraw, as it can read SVG files. The canvas in browser is for example 500x250px, and every object are measured first in pixel. After the export everything must be resided, started from the canvas (to 50x25mm) followed by the objects:

So the questions are:

• witch attribute is responsible for canvas width and height in CorelDraw?
• is there any fast way (preserveAspectRatio, viewBox, style media) of resizing containing objects, or I have to convert every object's width,height,x,y, etc. attributes one by one?

Thank you for any advice!

Answer 1

There are two different size aspects of a SVG image: how much do you want to see from the infinite canvas, and how big should the resulting image be. The first one is defined by the viewBox, which contains x and y coordinates for the top-left corner, and a width and a height. The second one is defined using the width and height attributes or style properties.

So, you use the viewBox attribute to say that you're interested in the area inside the (0px, 0px) and (500px, 250px) rectangle, since that is what you see in the browser: viewBox="0 0 500 250"

Then, since you want the image to be displayed as 50mm wide and 25mm high, you set the width and height accordingly. You can do that either setting them as attributes on the root svg element, which means that you have to set them only when exporting, since otherwise they will apply in the browser as well, or you can set them using a style element valid only for print media.

For browsers, if you're defining the viewBox you don't need to specify the width and height explicitly, since by default the area defined in the viewBox is displayed pixel per pixel.

Answer 2

When dealing with different media, use stylesheet media selectors. And SVG has support for that natively, using the media attribute of the <style> element. The basic syntax would be:

<style media="something" type="text/css">
  svg:root {
    width: 50mm;
    height: 25mm; 
  }
</style>

Now, depending on what you want to do, you can:

1. Use media="print" to specify the size for print media, letting the default width and height specified in the attributes set on the root <svg> element be used in all other cases
2. Use media="screen" to specify the target width and height just for browsers when using a screen to display, where screen is defined as: "Intended primarily for color computer screens".