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.
I have tried many variants of the following:
But every time I leave out width and height it it puts in the large image I originality designed.
<object data="logo.svg" type="image/svg+xml" width="75" alt="Logo svg" >
<img src="logo.png" width="75" alt="Logo png" />
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.
Any idea of how this is done with the OBJECT tag?
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?"
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.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Tags for this Thread