CODEWITHSUNDEEP
csshtmlsvg
zkanoca
zkanoca

Reputation: 9918

Understanding svg's viewbox attribute

I am trying to use Turkey's map which was created before here.

I have changed the dimensions of svg element 

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" 
     width="800" 
     height="600"
     style="shape-rendering:geometricPrecision;
            text-rendering:geometricPrecision; 
            image-rendering:optimizeQuality; 
            fill-rule:evenodd; 
            clip-rule:evenodd" 
     viewBox="0 0 180 180">

When I change viewBox values to

viewBox="0 0 200 200"

the map is rendered in smaller size.

If I set the values to "0 0 10 10" image is not displayed.

If I set the values to "0 0 50 50" a huge image comes overflowing the page

If I set the values to "0 0 100 100" image is fine.

But I don't understand how it is working.

Upvotes: 5

Views: 1930

Answers (2)

Sirko
Sirko

Reputation: 74036

An SVG canvas is basically an endless plain, where you can put all your objects in.

The width and height you define the size of the image as shown in the browser. This works pretty much like with any other image you can include in HTML.

With the viewBox attribute on the other hand you select the part of that plain, you currently want to view.

So with a value of "0 0 10 10" you set the upper left point of the shown image to the point 0/0 and from there select 10 units to the right and bottom for your image. In your example in those upper 10 times 10 units area there is nothing, hence you see just a transparent area, which you perceive as "not being displayed".

With a value of "0 0 50 50" the shown area gets bigger and you'll start to see the upper left corner of the picture. The first parts of the map become visible.

Finally with "0 0 100 100" you can see pretty much half of the upper map.

The area you select using viewBox is the scaled to the height and width of the SVG element. With both combined you can enabled stuff like zooming into an SVG. You can control the scaling with the attribute preserveAspectRatio.

You can add the following code at the bottom of the SVG file and see the displayed boxes (make sure to set the viewBox="0 0 180 180" before):

 <rect x="0" y="0" width="100" height="100" style="stroke: blue; stroke-width: 1; fill: white; opacity: 0.8" />
 <rect x="0" y="0" width="50" height="50" style="stroke: green; stroke-width: 1; fill: none;" />
 <rect x="0" y="0" width="10" height="10" style="stroke: red; stroke-width: 1; fill: none;" />

 <text x="5" y="97" style="fill: blue; font-size: 5px;">100x100</text>
 <text x="5" y="47" style="fill: green; font-size: 5px;">50x50</text>
 <text x="5" y="15" style="fill: red; font-size: 5px;">10x10</text>

So to conclude the purpose of viewBox is to select that part of the endless SVG plane, that should actually be rendered. If you choose the wrong values here, you might just see an empty space.

Links:

Upvotes: 7

Wayne Smith
Wayne Smith

Reputation: 4868

Viewbox with the width and height values are how you can do zooming, and panning with SVG.

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" 
     width="800" 
     height="600"
     viewBox="0 0 800 600">

no scaling 800 pixels width in the viewbox equals 800 pixel width on the screen

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" 
     width="800" 
     height="600"
     viewBox="0 0 1600 1200">

Everything is scaled down so that a line 1600 pixels wide only shows up as 800 pixels wide.

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" 
     width="800" 
     height="600"
     viewBox="400 300 400 300">

Zoom into the bottom right hand 1/4 of the 800 by 600 screen making that portion fill the entire svg, don't show anything above the 300 pixel line or to the left of the 400 pixel line.

Upvotes: 1

Related Questions