If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

How do you scale a SVG file with an OBJECT tag?

I can't figure out how to change the size of an SVG image loaded with the OBJECT tag. I would like to use the same image in different sizes.
If I use the IMG tag and specify a width, it shrinks the SVG image to fit into the size I specified.
I want to use the object tag so I can have a PNG fallback.

But every time I leave out width and height it it puts in the large image I originality designed.
If I put in width and/or height attributes it does not scale them, it cuts them off, giving me the upper left corner of the logo. I want the whole image shrunk to fit the correct width.

I haven't really worked with SVG much but from what I understand there should be 2 ways to do this. The first (preferred) would be to place your <object> element inside of something like a <div> and then size your <div> element appropriately. Supposedly SVG elements should automatically scale to their parent elements and so this should give you a solution.

Also, SVG files themselves can be edited in any text editor as it uses an XML format. You can edit the default width/height values here.

I think in either case you may end up needing to open up the SVG file anyway to view the width and height values. If you want to use a containing <div> element you will want the SVG to have a default width and height of 100% so it scales with its parent element. This would allow you to control each instance of that SVG image seperately and with some simple inline or CSS styling. However if you just want to set the default width/height and not worry about resizing it with your HTML you can simply set an exact value in the SVG file itself.

"Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

Resolved

OK, thanks! That solved it!
Just in case anybody else is having the same problem I will now give more details.

I had previously tried something similar to both of those methods and could not get them to work.
I had tried several methods of containing the image in a smaller container, but each that I tried simply showed a portion of the full sized image. So if I put the image into a 100 by 100 container, I would see the cropped upper left corner of my image, not the whole image shrunk down to 100 by 100.

Doing a lot more reading, I finally gained an appreciation for the term "viewBox". While some tags (such as the img tag) create a new viewport. The object tag does not. Thus any height and width constraints you put on the object tag are just changing how much of the full sized object you see. Not scaling it at all. I had created my svg file with Inkscape, and Inkscape does not put in a viewBox tag automatically, so if you want one, you must put it in manually.

I was unsurprised that changing the height and width with a text editor did nothing but make the resulting file unrenderable. Each of the images component parts is specified using X Y coordinates. Simply changing the outer total without changing each component did not do any good at all. both a smaller total size measured in pixels, or changing them to read "100%" resulted in an unrenderable image.

What finally worked was adding a "viewBox" tag inside the svg file and changing the svg width and height to 100%. I went ahead and used the height and width of the svg file in my viewBox tag. That did not matter.
Then when my html called in the svg file with and object tag, and the object tag had a width (it only needs a height or a width, not both since it scales proportionality) it showed the entire view, scaled perfectly.