Getting SVG to scale using a browser / device window

Question

TASK I have svg that I would like to scale using a browser window.

Parameters

a) Maintain proportions (here is a square)

b) to set the browser / device window to 80%

c) But up to a maximum of 800 pixels.

d) I'm not interested in javascript solutions

The code is still (although I tried many combinations) The root element of the SVG, the save factor is saved by default.

svg viewBox="0 0 800 800" 

with respect to html and viewport HTML (attachment with an object)

 object type="image/svg+xml" id="svgobject" data="question0final.svg" 

CSS, everyone tried, among others ...

 #svgobject{ position:absolute; top:0; left:0; height:100%; width:100%} 

(C; How to scale the SVG image to fill the browser window? )

 #svgobject{width:80%; max-width:800px; margin-right: auto; margin-left: auto;} 

I read some good resources, but can't handle my errors.

FYI here are some of the best links I've found on SVG positioning

Am I using <img>, <object>, or <embed> for SVG files?

http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-SVG-Positioning.html

http://www.alistapart.com/articles/using-svg-for-flexible-scalable-and-fun-backgrounds-part-ii

http://www.w3.org/TR/SVG/coords.html

http://coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/

https://developer.mozilla.org/en/CSS/Scaling_of_SVG_backgrounds

(I find that SVGs as backgound CSS seem pixelate)

Answer 1

Scaling an object will not work. You should get a link to the svg element.

 var svgs1 = $('object[id ^="svgobject"]'); var svgDoc = document.getElementById(svgs1[0].id).contentDocument; var svgRoot = svgDoc.documentElement; 

You now have the svg element in the svgRoot variable. So, calculate the scale value as follows:

 var desiredWidth=500; //this is your desired width var scaleVal=desiredWidth/$(window).width(); //now you have scale value $(svgRoot).css("-webkit-transform","scale("+scaleVal+")"); 

This way you can scale the svg component in relation to the screen size.