How do I scale a stubborn SVG embedded with the <object> tag?

Question

I have some SVG files that specifies width and height as well as viewbox like this:

Answer 1

1. Set the missing viewbox and fill in the height and width values of the set height and height attributes in the svg tag

2. Then scale the picture simply by setting the height and width to the desired percent values. Good luck.

3. You can set a fixed aspect ratio with preserveAspectRatio="x200Y200 meet, but it's not necessary

e.g.

 <svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="10%" 
   height="10%"
   preserveAspectRatio="x200Y200 meet"
   viewBox="0 0 350 350"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.0 r9654"
   sodipodi:docname="namesvg.svg">

Answer 2

I encountered a problem where iOS on an iPad would not correctly resize SVG images in a <object> tag.

The CSS style would increase or decrease size of the <object> container, but the image inside of it would not be modified (on iPad, iOS 7).

The SVG images were exported from Adobe Illustrator, and the solution turned out to be replacing the width and height in this:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="481.89px" height="294.843px" viewBox="0 0 481.89 294.843" 
enable-background="new 0 0 481.89 294.843"
xml:space="preserve">

with:

width="100%" height="100%"

I needed to use the <object> tag because the <img> tag does not currently support embedding bitmapped images in SVG's.

Answer 3

Just use CSS to make the browser resize the SVG! Like so: <object style="width:30%"> See http://www.vlado-do.de/svg_test/ for more details. I just also tried it locally with an SVG that has its width and height given in "pt". It works well in Firefox.