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 500×250 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.