Good Afternoon,
I know this question has been asked over and over but I can't seem to find the answer to fix my problem in any of the post i've searched.. which is a lot!
So I have a container Div which I want my SVG to scale to (100%).
I currently have HTML of
<div class="svg-lrg">
<object data="../images/sodium-sync-1.svg" width="416px" height="164px" type="image/svg+xml"></object>
</div>
I have also changed the HTML to try width="100%" as well as no width specified at all.
Div CSS is
.svg-lrg
{ width:100%;
height: auto;
margin: auto;
text-align: center;}
SVG info (or at least what I think is the important bit)
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
preserveAspectRatio="xMinYMin meet" version="1.1" viewBox="0 0 416 164">
I have the width and height set to 100% within the SVG.
It weirdly will be the correct size if changes are made to on the google console but on initial load or refreshing the page it's too small!
I've tried clear all css styles putting it within a Div, incase something on the template is upsetting it
.clear
{all: unset;}
Still no joy...
Any ideas?
Thanks :)
Just use this:
HTML:
<div class="svg-lrg">
<object data="../images/sodium-sync-1.svg" width="100%" height="100%" type="image/svg+xml"></object>
</div>
Setting both the width and height to 100% will scale the image to the parent (<div>).
PS.: Your code wasn't working because you were trying to scale the <div>, not the <object>.
Related
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 3 months ago.
I'm trying to understand why my SVG will resize when I change the width of its parent but it won't resize when I change the height.
I just made a very simple jsFiddle. You can try resizing the little window at the bottom right corner.
From what I understand, it's key that the parent has 100% width and height so that a window resize is detected and inner svg can adjust. It's also key to specify the viewBox attribute to allow the svg to resize according to its parent div.
But why is it not resizing accorindg to height?
div {
height: 100%;
width: 100%;
}
<div>
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="100" />
</svg>
</div>
http://jsfiddle.net/7dz60fkh/
You need to give the html, body and svg elements the same percentage sizes too so they all resize in lock step.
div, html, body, svg {
height: 100%;
width: 100%;
}
<div>
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="100" />
</svg>
</div>
SVGs are way more different than pixel images such as jpeg, png ..etc.
The hard part is that you shouldn't think of them like you would with "normal" images, to make things short SVG aren't IMAGES but DOCUMENTS that contains info.
When you include an HTML file with an , you don’t expect the
text inside to scale when you change the size of the frame. Same with
SVG. By default, it will be drawn at the size specified in the code,
regardless of the size of the canvas.
If your svg has something called a viewbox ( which is your case ) then it will be scaled to fit it's defined viewport so increasing the height of the img won't make the icons any taller. You'll just end up with the img in a wider box.
I think mainly your problem is that your SVG have fixed values defined in them. Open up the SVG files and make sure they either:
have no width and height defined, OR have width and height both set to "100%".
you can read more about SVGs in this article, it'll help you understand how things work hopefully
The goal is to make the HTML embedded inside a SVG element occupy the full width and height of the root SVG element, which itself is embedded inside a HTML document.
However, as you can see from the Codepen, the width attribute seems to work, but the height attribute fails to affect the root SVG element. The embedded div is not 2688 pixels tall as a result.
Ultimately, the SVG root element and its contents should be 1242x2688.
What's wrong?
https://codepen.io/anon/pen/zyJZbr
<svg id="rootSVGBox" width="1242" height="2688" viewBox="0 0 1242 2688">
<foreignObject width="100%" height="100%">
<div id="testBox" style="width: 100%; height: 100%; background:#00B9FC" xmlns="http://www.w3.org/1999/xhtml">
Why is this height wrong?
</div>
</foreignObject>
</svg>
In Firefox, your example works.
On a sidenote, this question offers a solution by absolutely positioning the div inside the svg element :
#testBox {
position:absolute;
}
<svg id="rootSVGBox" width="1242" height="2688" viewBox="0 0 1242 2688">
<foreignObject width="100%" height="100%">
<div id="testBox" style="width: 100%; height: 100%; background:#00B9FC" xmlns="http://www.w3.org/1999/xhtml">
This is 100% height.
</div>
</foreignObject>
</svg>
I am trying to use an svg from an external source in my html. Let's say I have this svg:
https://upload.wikimedia.org/wikipedia/commons/0/09/America_Online_logo.svg
I found many ways to do this, including:
<img src="your.svg"/>
<object data="your.svg"/>
<iframe src="your.svg"/>
<embed src="your.svg"/>
<div style="background:url(your.svg)">...</div>
But unfortunately, the styling I have to use applies to svg tags. If I use this for example:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/0/09/America_Online_logo.svg"/>
</svg>
It won't show up on my page, I just get an empty white square! Is there anyway I can do this inside svg tags? Thanks!
You have to specify a width and height for your svg to display properly:
<svg width="90" height="90">
<image xlink:href="your.svg" src="yourfallback.png" width="90" height="90"/>
</svg>
Update
You can do this via CSS too of course, but you have to be sure that your <image> tag has width and height set in your CSS if you don't specify the html attributes directly:
svg {
width: 150px;
height: 150px;
}
image {
width: 100px;
height: 100px;
}
This will set the size of your actual image (the svg) to 100px * 100px, but has a "wrapper" of 150px. Regarding to your comment to your original question, maybe that's why you don't see your image, because you dont have set a width / height and only styles which apply to your wrapping element (<svg>)
Example Fiddle: https://jsfiddle.net/7334vrmq/
Hope this helps.
I currently have an SVG file, the standard text at the top is there as follows:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="400px"
height="400px" viewBox="0 0 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve">
.......
</svg>
I've tried changing the width and height to 50%, 100%, 10% etc... and in Chrome it just takes up the whole screen, as if it's 100%, no matter what I try. It's as if there is an issue with using percent.
In Internet Explorer, the image doesn't take up the whole page, it's alot smaller at 100%.
I understand that I could place this into a div element and then resize that but this issue is bothering me. Obviously, I want to use percentages to get a responsive layout, which does happen, it just doesn't get any smaller than 100%, whatever I do.
I'm not using an img tag in the html. I'm using an object tag like so:
<body>
<object>
<embed src="Loading.svg">
</object>
</body>
Any help with this would be appreciated.
Thanks.
I'm experimenting with using SVG in HTML, something I'm not too familiar with. It's embedded as an object in the html.
The SVG is scalable through CSS. When the window is at full size (i.e. large enough that the SVG is at its maximum allowed width through CSS) it looks normal in Firefox, Chrome, and Safari. When the browser window is small, the actual SVG image and what I assume is its container scales down appropriately in both Firefox and Chrome. However, in Safari (desktop and iOS) the SVG image itself scales down but its "container" stays at its original, maximum height. In other words there's too much space on the top and bottom of the actual image in narrow widths in Safari.
I currently have width, max-width, and max-height values assigned via CSS. Applying a height value other than "auto" gives me the problem across all browsers. I've removed the width and height values from the SVG itself to make it adjust to the browser size.
I want to know how to make Safari scale the SVG image in the same manner as Firefox and Chrome.
Thanks for any input you can offer!
Please check out this example: http://jay-bee-why.com/demos/svg-scaling.html
And to see the actual site: http://twowordsfor.com (edit: now deprecated)
Here's how I've embedded the SVG in the HTML:
<div class="container">
<object data="image.svg" type="image/svg+xml" id="logo">
<img src="image.png">
</object>
</div>
This is the CSS:
.container {width:99.8%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:30px;}
#logo {width:100%; max-width:974px; max-height:300px; display:block; margin:0px auto 0px auto;}
And this is the top of the SVG file:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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"
viewBox="0 0 967 135" enable-background="new 0 0 967 135" xml:space="preserve">
Here is how this looks now:
.container {width:99.8%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:30px;}
#logo {width:100%; max-width:974px; max-height:300px; display:block; margin:0px auto 0px auto;}
<div class="container">
<object data="https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg" type="image/svg+xml" id="logo">
</object>
</div>