CODEWITHSUNDEEP
csssvgzooming
Zyrac
Zyrac

Reputation: 43

Browser zoom and .svg pictures

I'm using .svg pictures which I made in Adobe Illustrator and I'm attaching them to a background with this css:

(the container)

.numbertable {
    position:relative;
    display: inline-block;
    padding-bottom: 80%;
    vertical-align: middle;
    width:41%;
    }

(the picture)

.my-svg{ /* svg into : object, img or inline */
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%; /* only required for <img /> */
}

I then use the object command in html:

<object class="my-svg" type="image/svg+xml" data="/img/composite/scale2.svg" width="100%" height="100%"></object>

After much effort, I finally managed to make them look good in I.E. and Chrome using 100% (default) zoom, but when I switched to Firefox they apparently use different default zoom and the pictures are too big.

You can see it on the website: http://s23345.sigmabokhald.is/

What can I do to make the .svg pictures scale appropriately with zoom? So that if I zoom out and in (in my browser) then the picture scales appropriately with the background.

Upvotes: 4

Views: 7823

Answers (1)

peter_the_oak
peter_the_oak

Reputation: 3710

I have shortly examined the behavior of your gears in the Mozilla and Chrome browser. (Lovely design, by the way :-) )

In my opinion, the gears stick to the size of your <object> box. This means, if you allow this box to "resize" if the browser zooms in and out, the gears adopt. By setting your <object> to 0,0/100%,100%, the gears cannot adopt.

You have this .limit.tight definition, which is a good sample for how the gear box should behave. So if I alter .my-svg like accordingly this: 

.my-svg {
  display: block;
  margin-left: auto;
  max-width: 960px;
}

I didn't change anything else. It works also with Chrome. Here is how the gears appear if I zoom with Mozilla:

150% Zoom

30% Zoom

Settings

I hope this is at last a good start, even if there could be more work for more browsers.

Upvotes: 2

Related Questions