I'm trying to have a SVG graphic inside an <img /> tag that would fit (without crop) inside the tag with preserved aspect ratio. I created the SVG in Inkscape. It worked as expected on all browsers except for Internet Explorer 9.
To make it work on IE 9 I had to add the viewBox="0 0 580 220" and preserveAspectRatio="xMidYMid meet" and remove the width="580" and height="220" SVG properties.
<svg viewBox="0 0 580 220" preserveAspectRatio="xMidYMid meet">...</svg>
This seemed to work everywhere, just until I tried it on Webkit, where the <img /> tag gets stretched vertically although the aspect ratio of the SVG is indeed preserved.
When I put back the width="580" and height="220" properties, it works on Webkit but on IE 9 the aspectr ratio is lost.
Is there a cross browser solution for this behavior?
Seems like I found the solution:
You need to keep the width and height properties in the SVG.
<svg
width="580"
height="220"
viewBox="0 0 580 220"
preserveAspectRatio="xMidYMid meet"
>...</svg>
And to make it work on IE 9 you need to specify at least one dimension of the <img /> tag.
<img src="your.svg" style="width: 100%" />
This seems to be working everywhere.
I solved it by setting the following CSS to the :
width: 100%;
max-width: (desiredwidth in px)
The solution in my case was using Peter Hudec's answer, but because of using width: 100%; on the <img /> tag, which broke the layout on every non-IE9 browser, I added a IE9-only CSS hack (width: 100%\9\0;). Hope this addition will help someone. :-)
Even using the preserveAspectRatio="xMidYMid meet" was not neccessary.
(I wanted to add only a comment, and not answer, but no reputations yet to do so :-)
Just thought that I would add how I stepped into a solution. I had trouble figuring out some of the issues at first.
Edit your SVG file to remove the hard-coded height and width attributes. (with simple text editor)
Apply width:100% css to your svg image to make IE display it like other browsers. (as big as it's container)
Use css on your image container for consistent results!
I made a page to describe it in more detail at http://ivantown.com/posts/svg-scaling-with-ie/
Just an additional suggestion: Using an attribute selector based on the .svg filename suffix might be useful in cases where you need this behavior on all your svg content, and don't have control over the markup.
For example
img[src$=".svg"] {
width:100%;
}
Related
When I change the width or height of the SVG it ends up looking like this instead of scaling properly. (getting cropped)
the problem only happens when the inline SVG is in React. I have tried to fix this for like 7 hours but I've got nothing to work.
The SVG tag is this:
<svg baseprofile="tiny"
fill="#ececec"
stroke="black"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width=".2"
version="1.2"
viewbox="0 0 2000 857"
xmlns="http://www.w3.org/2000/svg">
However, this is probably not relevant since I tested it without any properties and it still won't scall properly. (In pure HTML and CSS I can get this to work easily)
Adding Overflow: visible; does make it show the cropped area but it's still not scaled down.
The problem was that vanilla HTML is okay with it being "viewbox" but React requires it to be in camelCase as "viewBox"
I have been developing a web page "game" on my PC based in HTML, SVG, and Javascript. It has a large image of the earth loaded into the SVG views through the SVG <image> tag. Testing on my PC this works with no problem, however recently I published it to a public web page (http://rbarryyoung.com/EarthOrbitalSimulator.html) and discovered that only the bottom right quarter of the SVG is rendering on both SVG views on my iPhone and iPad. Like this:
At first, I thought that it was just the image in the SVG viewports, but then I realized that the entire SVG viewport was black except for the lower-right quadrant. The SVG viewport is correctly fully sized, it just appears as if there is some black mask over 3/4s of it (or only 1/4 of it renders).
Here's what I think are the relevant HTML code lines, the containing Div tag for the first SVG view (line 67):
<div id="divSvg1"
style="position:relative; z-index:1; margin:15px;
top:100px;
width:640px; height:640px;
background-color:black;
float:left;"
>
The SVG tag (line 104):
<svg id="svgEa"
style="width:100%; height:100%;"
viewBox="-7500 -7500 15000 15000"
preserveAspectRatio="xMidYMid meet"
clip-path="url(#svgEaClip)"
transform="scale(1.0,1.0)"
version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- NOTE: All internal units are in KM (or %) -->
And the embedded Image tag (starting at line 160):
<g id="gEaAll" transform="scale(1.0,1.0)" >
<!-- ... -->
<g id="gEaSurfaceFacingBottom" class="eaSurfaceFacing">
<g id=gEarthImage>
<!-- ... -->
<image x="-6413" y="-6413" width="12826" height="12826" href="eosImages/globe-arctic 8bit.png" />
</g>
</g>
The second SVG view is a shadowed (<use..> tag), zoomed view of the first with the same problem.
I have tested this on my PC, on both screens in Chrome, Edge, and IE, where it works correctly on all of them. I have also tested this on my iPhone with both Safari and Edge and my iPad with Safari, Chrome, and Edge with the same failure on all of them. I have tried just a bare <img> tag of the PNG file outside of SVG and that works fine on these platforms.
I do not have any Android platforms to test with, so if anyone wants to try it and let me know, I can add those results here.
I have researched this, and though there's a bunch of stuff about iOS not rendering images, mostly those are a complete failure to render, rather than this very specific partial rendering, and much less specific stuff about SVG differences. Ultimately I didn't find anything that seemed to be the same problem.
To summarize then, my question is: what is causing this problem or what have I done wrong, and how can I fix it? (I do understand that I will need to have a different style/CSS layout for mobile, but I still need to know what needs to be changed to make this render correctly)
Add X and Y coordinates for your <rect />. In your case, your Clip-Path Rectangle is not in an exact coordinate.
Here is the code working for me
<clipPath>
<rect x="-7500px" y="-7500px" width="100%" height="100%" />
<cliPath>
replace this code with your <clipPath> on line 114 and 301.
Here is the Screenshot
Moreover here is a live demo that worked on my Mac Safari as well in windows Chrome, where I took one part of your code.
Update
Check the answer by #fussionweb.
Orignal answer:
You can try the -webkit- prefix before clip-path. It seems to be a safari issue related to clip-path.
of I have an SVG object placed in a container. It has the following CSS on its class.
.container{
position: relative;
}
.svgObj{
position: absolute;
top: 0;
left: 0;
width: 2em;
height: 2em;
}
So, the problem is that the svg doesn't end up in 0:0 of the container but rather more like in 200px south of that.
The queer thing is that if I substiute the SVG tag for a DIV with the same class, it displays exactly where I want it to.
The problem is only apparent in IE (only tried 11, but likely there in earlier versions as well).
Well, fwiw the problem is also visible in Minori.
Works fine in Safari, Chrome, FF, Opera, well the bigs, except IE.
Any ideas are most welcome.
The HTML code looks like so
<div class="container">
<svg class="svgObject" data-x="0" data-y="0" data-text="My Obj" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<a id="h-72417" href="#">
<path d="M12 4a8 0z"></path>
<path d="M12 4a8 0-16z"></path>
</a>
</svg>
</div>
Never mind the path values, I shortened them here to save space. It shouldn't matter. The data attributes aren't relevant either. As stated, just switching SVG for DIV and adding a "hello" instead of the paths makes it work as expected.
Thanks.
I know this is an old question, but I came across it as I was searching for an answer to this issue myself. The solution that worked for me was to add preserveAspectRatio="xMinYMin meet" to the tag. This essentially makes the SVG responsive and shifts the contents to the top left of the SVG container.
I found the answer here: http://thenewcode.com/744/Make-SVG-Responsive
Thanks for answering this ceindeg, even after the fact.
For anyone else who's having this problem, an even better solution than the preserveAspectRatio attribute is to just simply make sure you have the width and height set inside the main SVG tag. Most browsers don't need them, but IE is different (of course).
My problem is the following : I try to display an image in a SVG section thanks to the <image> tag. The following code is an example.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
<image xlink:href="http://2.bp.blogspot.com/-auWhmIJyACw/TaHzOV8pN1I/AAAAAAAAAPY/2nGmNaJRaBs/s1600/roger-federer-widescreen-wallpaper-001.jpg" preserveAspectRatio="xMinYMin slice"></image>
</svg>
My problem is that it doesn't work on Safari and Firefox. It seems to come from the image tag which is not working. I don't know if it's a syntax or a xlink error.
There is a codepen if you want to make your tests : http://codepen.io/vavouweb/pen/VaMNqg
In SVG 1.1 the attributes width and height are mandatory for images.
The unfinished SVG 2 specification proposes that requirement be removed but only Chrome and possibly IE edge have implemented that suggestion at the moment as far as I know.
I have some SVG files that specifies width and height as well as viewbox like this:
<svg width="576pt" height="432pt" viewBox="0 0 576 432" > ...
but how to display them in the browser at a size I decide? I want them smaller and have tried:
<object width="400" data="image.svg"></object>
but then I get visible scrollbars.
It works if I change the SVG files to set width and height to 100% instead, but I want to decide the size in the HTML regardless of what sizes are used in the SVG file. Is this possible ?
You can add "preserveAspectRatio" and "viewBox" attributes to the <svg> tag to accomplish this.
Open the .svg file in an editor and find the <svg> tag.
in that tag, add the following attributes:
preserveAspectRatio="xMinYMin meet"
viewBox="0 0 {width} {height}"
Replace {width} and {height} with some defaults for the viewBox. I used the values from the "width" and "height" attributes of the SVG tag and it seemed to work.
Save the SVG and it should now scale as expected.
I found this information here:
https://blueprints.launchpad.net/inkscape/+spec/allow-browser-resizing
None of the answers given here worked for me when I asked this back in 2009. As I now had the same issue again I noticed that using the <img> tag and width together with an svg works fine.
<img width="400" src="image.svg" />
<body>
<div>
<object type="image/svg+xml" data="img/logo.svg">
<img src="img/logo.svg" alt="Browser fail" />
</object>
</div>
img/logo.svg
...
<svg
width="100%"
height="100%"
viewBox="0 0 640 80"
xmlns="http://www.w3.org/2000/svg"
version="1.1" />
This setup worked for me.
You can reach into the embedded svg using JavaScript:
var svg = document.getElementsByTagName('object')[0].\
contentDocument.getElementsByTagName('svg')[0];
svg.removeAttribute('width');
svg.removeAttribute('height');
Since your svg already has a viewBox, Firefox should scale the 576 pixel width in the viewBox to the 400 pixel width in your document. Other svgs might benefit from a new viewBox derived from the advertised width and height (these are often the same numbers). Other browsers might benefit from different svg tweaks.
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.
Set the missing viewbox and fill in the height and width values of the set height and height attributes in the svg tag
Then scale the picture simply by setting the height and width to the desired percent values. Good luck.
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">
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.
Let see. I had to refresh my memory on SVG, I haven't used it much these years.
From what I found today, it seems that if you specify dimension of objects without units, they have a fixed size (in pixels, I think). Apparently, then, there is no way to resize them when you resize the SVG (it only change the viewport/canvas size).
Unless, as pointed out, you specify the size of the SVG in percentage OR specify a viewBox (eg. viewBox="0 0 600 500").
Now, if you have no way to change the exported SVG, you are out of luck, I fear. What library do you use?
Here is a PHP solution using QueryPath based on Jim Keller's answer.
Once QueryPath is loaded just pass your svg script to the function.
function scaleableSVG($svg){
$qp = qp($svg, 'svg');
$width = $qp->attr('width');
$height = $qp->attr('height');
$qp->removeAttr('width')->removeAttr('height');
$qp->attr('preserveAspectRatio', "xMinYMin meet");
$qp->attr('viewBox', "0 0 $width $height");
return $qp->html();
}