Related
The following code snippet illustrates my problem:
<style>
div {
background-color: #00FF00;
width: 80px;
}
svg {
background-color: #FF0000;
vertical-align: top;
width: 100%;
height: auto; // PROBLEM
}
rect { fill: #0000FF; }
</style>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100"
shape-rendering="geometricPrecision"
text-rendering="geometricPrecision"
image-rendering="optimizeQuality"
fill-rule="evenodd"
clip-rule="evenodd"
preserveAspectRatio="xMidYMid meet"
width="100"
height="100"
>
<rect width="90" height="90" x="5" y="5" />
</svg>
</div>
The SVG should be a red square (with a blue square drawn into it), which scales down with respect the its parent div tag while preserving its aspect ratio. The above example works fine in Firefox, Chrome (for Desktop and Android), Safari and Edge. It renders a 80x80px red square:
Only Internet Explorer 10 and 11 stretch the SVG vertically to about twice its intended height, so 80x160px:
The SVG is scaled to 80x100px if I remove / comment the "height: auto" statement in the stylesheet. Yet, this breaks Chrome, which also scales the SVG to 80x100px in this case. Firefox and Edge seem to be able to deal with removing this statement.
Interestingly, the aspect ratio of polygons etc. in the SVG is always perfectly maintained, check the blue square, while the polygons are usually drawn in the vertical center of the SVG which is being stretched. It's the "SVG-container"/SVG-tag, which causes trouble and consumes more space than it should.
How can I solve this cross-browser?
I built a small JSFiddle to demonstrate the issue.
There is a closely related question entitled "SVGs not scaling properly in IE - has extra space". The key difference is that I do in fact provide a width and a height directly in the svg-tag, which I need to do for Android browser compatibility. IE breaks nevertheless. The canvas-approach described by Paul LeBeau seems to follow different assumptions.
This question is a variation of the following older questions, yet not identical:
Cross browser SVG preserveAspectRatio
SVG in img element proportions not respected in ie9
SVG scaling in Internet Explorer
The following gist is interesting but not helpful either:
Fix SVG in tags not scaling in IE9, IE10, IE11 (it really is about SVGs in img-tags and removing the width and height parameters in the SVG tag does not work for me)
There is an approach called the "padding hack", which is described here:
CSS tricks: How to Scale SVG
Making SVGs Responsive with CSS
This answer is only for reference - I am still looking for a better, less complicated (and less idiotic) way to do this.
Ok, along the lines of the "padding hack", the following seems to work across browsers:
<style>
div#outer {
background-color: #00FF00;
width: 80px;
}
div#container {
position: relative;
height: 0;
width: 100%;
padding: 0;
padding-bottom: 100%; /* 100% * height/width */
}
svg {
background-color: #FF0000;
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
rect { fill: #0000FF; }
</style>
<div id="outer">
<div id="container">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100"
shape-rendering="geometricPrecision"
text-rendering="geometricPrecision"
image-rendering="optimizeQuality"
fill-rule="evenodd"
clip-rule="evenodd"
preserveAspectRatio="xMidYMid meet"
width="100"
height="100"
>
<rect width="90" height="90" x="5" y="5" />
</svg>
</div>
</div>
There is also an updated JSFiddle.
Another Solution is the Padding-Bottom Hack (Padding-Bottom: Width/Height*100)
Here an example with responsive svg-clippath and ie11+up support
<svg class="clipper" width="0" height="0">
<defs>
<clipPath id="clippath" clipPathUnits="objectBoundingBox" transform="scale(0.01, 0.01136364)">
<path d="M78.24,5.09S75.53.46,70.15.46H29.85s-5.38,0-8.09,4.63L1.66,39.37S-1,44,1.66,48.63l20.1,34.28s2.71,4.63,8.09,4.63h40.3s5.38,0,8.09-4.63l20.1-34.28s2.71-4.63,0-9.26Z"></path>
</clipPath>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 88" preserveAspectRatio="xMidYMin slice" style="width: 100%; padding-bottom: 88%; height: 1px; overflow: visible">>
<image xlink:href="http://www.domain.de/image-with-aspect-ratio-100-88.jpg" x="0" y="0" height="100%" width="100%" style="clip-path: url(#clippath);">
</image>
</svg>
I have some responsive inline SVGs I made. Their sizes render as I want them to in Chrome, Firefox and Edge, but in Safari they escape their containers/are cut off. For some reason their containers doesn't stretch to accommodate them. The following screenshot demonstrates the unwanted, cut-off Safari rendering:
There are known issues with SVG rendering in Safari, and I have tried all the fixes out there I have found to the best of my ability (here, here, here, and here), but I can't manage to make the containers fit the SVGs in Safari. It is in part because things are a little complicated with my javascript and I'm still a beginner, forgive me if my codepen is a bit messy.
This is my codepen. :http://codepen.io/ihatecoding/pen/Bzgqqa
What my jquery does: it makes SVGs as large as possible until they take up 1/3 of the screen height, at that point it won't let them get taller.
To help you focus on what matters :
The SVGs are all of class .areaSVG
The SVG parents/containers are always .ey-col-svg
The entire footer is #indexFooter
The main background image that is supposed to resize according to the height of the landing footer is #section0img
The current version that is working the best has the following format for the svg container:
.ey-col-svg {
display: block;
max-height: calc(30vh - 1vw - 63px);
text-align: center;
box-sizing: content-box;
padding: 0;
margin: -2vh 0 0 0;
}
This is the css for the SVGs before the javascript makes them visible and adjusts their height:
.areaSVG {
overflow: visible;
display: none;
box-sizing: content-box;
margin: 0;
padding: 1.6vh 0 1vh 0;
}
Again, to repeat The javascript I have currently implemented adjusts the height of the SVGs (whose class is areaSVG).
This is the most relevant part of my jQuery script; it controls the size of the the SVGs. As I mentioned above, this script makes the SVGs as large as possible until they take up 1/3 of the screen height, and at that point it won't let them get taller:
function resizeSVG() {
// the row
var $linksRow = $('.ey-nav-bar');
// the text
var $areaText = $('.ey-text-content');
//the entire row below "research Area"
// the actual svg container
var $area = $('.areaSVG');
var scale = 0.6;
//the wrapper containing the svg div, its height and its width
var $eyCol = $(".ey-col-svg");
var eyWidth = $eyCol.width();
var eyHeight = $eyCol.height();
//the window
var winHeight = $(window).height();
var winWidth = $(window).width();
//max Height caclulated based on window
var maxHeight = .33 * winHeight;
// if the height of the column is less than the width, and below the max height
if (eyHeight < eyWidth && eyHeight < maxHeight)
//make the height of the svg the max heihgt
$area.height(maxHeight);
// use the scaling factor times the width of the svg wrapper
var imageWidth = scale * $eyCol.width();
// get the hight of the column
var imageHeight = $eyCol.height();
// will be the dimensions used to size lenth and width of the svg
var tot;
//apsect ratio of the screen (horizontal/vertical)
var ratio = winWidth / winHeight;
// if the screen is landscape or if the user has left the landing section
tot = imageWidth > imageHeight ? imageHeight: imageWidth;
maxTextHeight = maxHeight * .07;
maxTotHeight = maxHeight * .5;
if (tot < maxTotHeight)
{ $area.css("height", tot);
}
else
{
$area.css("height", maxTotHeight);
$areaText.css("height", maxTextHeight);
}
minLinksHeight = maxHeight * .8;
var linksHeight = $linksRow.height();
}
(Note: the resulting SVG heights are subsequently used by another function, not seen here, to control the size of the main image).
This is my introductory formatting code for each inline svg:
<svg class="areaSVG notFixed index" viewBox="20 0 37 75" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
Any help would be very appreciated, I really would like to see this to render properly in Safari!
I figured out a combinations of CSS settings that now make the SVGs Render in entirety in Safari (as well as in Chrome, Firefox, and Edge); Safari no longer clips them/cuts them off. My sizing and calculations are not perfect, but the display settings work, you will need to tweak the size according to your own needs adjusting the height of the SVG container/parent. My javascript (which controls other aspects of the page) are wonky, but the SVG settings are more or less correct. I hope this helps someone.
Here is the codepen: http://codepen.io/ihatecoding/pen/zBgqgp
The inline html declaration of the SVG
I adjusted my viewBox and removed my overflow: visible setting according to the suggestions of #Paul Lebeau Note that the preserveAspectRatio is intentionally not specified because it should remain with the default setting, xMidYMid meet (unlike other Safari SVG fixes which change it to none).
Here is the code:
<svg class="areaSVG notFixed index" viewBox="0 0 80 80" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
The CSS
If you are not using my javascript to resize the svgs, use the following css settings for the SVG container (.ey-col-svg) and the SVG itself (.areaSVG):
/* the SVG parent/container */
.ey-col.svg {
display: block;
height: auto;
text-align: center;
box-sizing: border-box;
padding: 0;
}
/* the SVG itself */
.areaSVG {
display: inline-block;
max-height: 15vh;
box-sizing: content-box;
margin: 0;
}
Notes about my javascript
If you are using my messy javascript, please note both the container and the SVG will both initially have the setting display: none in the CSS, and then the javascript will change both of them to have the same displays settings I have shown above [with the container (.ey-col-svg) set to display: block and the SVG (.areaSVG) set to display: inline-block].
Also, my javascript in my codepen has changed. It now works better if I adjust the height of the container (.ey-col-svg) instead of the of SVG (.areaSVG) itself. Another option that might work better for users is changing the max-height of the container, instead of the height (as I have done).
The viewBox attributes in your SVGs are wrong. I am not sure whether it is the cause of your issues, but you should fix them anyway.
The viewBox is supposed to describe the extent of the elements in your SVG. All of the SVG contents are supposed to fall within the extent of the viewBox. But yours doesn't. At 37x75 it is a lot narrower than the contents.
In the following example I have added a <rect> element the same size as your viewBox so you can see how it compares.
/*this is the container for the bottom svg */
.areaSVG {
/* this is the height setting I would like to be a percentage */
/*height: 30%; <------ there*/
overflow: visible;
display: none;
/* margin: 0 26% 0 26%;*/
box-sizing: content-box;
margin: 0;
padding: 1.6vh 0 1vh 0;
/* margin:2vh 0;*/
/* border: 1px solid Yellow;*/
}
#circle-background {
/* filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12,
Color='#444')";
filter: url(#f1);*/
-moz-filter: box-shadow(3px 3px 2px rgba(0, 0, 0, 0.5));
-webkit-filter: box-shadow(3px 3px 2px rgba(0, 0, 0, 0.5));
filter: box-shadow(3px 3px 2px rgb(0, 0, 0, 0.5));
fill: Gainsboro;
}
.fillDark {
fill: #939598;
/*DimGray*/
}
.fillWhite {
fill: White;
}
.strokeDark {
stroke: #939598;
/*DimGray*/
}
.strokeWhite {
stroke: White;
}
<svg class="areaSVG fixed" viewBox="20 0 37 75" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="height: 50px; display: inline-block;">
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="3" dy="3"></feOffset>
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="2"></feGaussianBlur>
<feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
</filter>
</defs><path id="circle-background" opacity="0.4196" fill="#FFFFFF" enable-background="new " d="
M4.193,37.492c0-18.987,15.419-34.38,34.44-34.38c19.021,0,34.439,15.393,34.439,34.38c0,18.987-15.418,34.381-34.439,34.381
C19.613,71.873,4.193,56.48,4.193,37.492L4.193,37.492z" filter="url(#f1)"></path>
<path id="sclera" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
M11.41,38.895c27.619-31.029,41.313-9.542,49.646-2.012c-4.306,6.07-12.69,27.49-46.392,9.919c0,0-5.375-3.548-5.641-4.75
C12.787,37.379,11.41,38.895,11.41,38.895z"></path>
<ellipse id="iris" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" cx="38.196" cy="36.63" rx="16.202" ry="15.686"></ellipse>
<ellipse id="pupil" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" cx="38.529" cy="36.954" rx="5.628" ry="5.449"></ellipse>
<path id="eyelid" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
M56.955,26.227c5.438,2.787,12.803,9.595,12.803,9.595s-2.338,3.235-5.677,2.588c-4.027,3.396-13.345,29.705-49.417,8.393
c33.702,17.571,42.086-3.849,46.392-9.919c-8.333-7.53-22.026-29.018-49.646,2.012c0,0-2.94,1.806-4.112-1.456
c-1.172-3.261,2.481-0.477,4.009-2.911c1.527-2.434,3.674-3.557,7.682-6.792c-4.008,0.646-7.348,3.558-7.348,3.558
c10.521-10.835,31.379-17.498,53.107-4.205C64.748,27.089,59.404,26.119,56.955,26.227z"></path>
<rect x="20" y="0" width="37" height="75" fill="none" stroke="red"/>
</svg>
A better viewBox that covers the eye design and its drop shadow would be:
viewBox="0 0 80 80"
If you update all the SVGs you get this:
http://codepen.io/anon/pen/KrOVoJ"
I can't tell if it now works in Safari, because I don't have a Mac.
I have a div that has it's height set to 320 pixels, then it's child is set to 100% width of that.
The child of that is a SVG file which I set the width to 200% of the container.
In chrome and firefox that works fine, I get a nice image like this:
The HTML looks like this:
<div class="kit-template ng-isolate-scope front">
<div class="svg-document ng-scope">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 259.5 131.4" enable-background="new 0 0 259.5 131.4" xml:space="preserve" class="ng-scope">
<!-- Removed for brevity -->
</svg>
</div>
</div>
and the CSS/SASS looks like this:
.kit-template {
overflow: hidden;
position: relative;
height: 320px;
.svg-document {
width: 100%;
overflow: hidden;
margin: 0 auto;
/*position: absolute;
bottom: 0;*/
svg {
width: 200%;
path, polyline, polygon, rect {
cursor: pointer;
}
}
}
}
Like I said, this works fine in both Chrome, Firefox and IE Edge. But in IE11 I get this:
And if I inspect the element, I can see that the SVG looks like it has padding left and right on it, but I can assure you it doesn't.
Does anyone know why this is happening and how I can fix it?
Update 1
I have created a very simple version on codepen so you can see the issue.
Here it is:
http://codepen.io/r3plica/pen/Kdypwe
View that in chrome, firefox, Edge and then IE11. You will see that only IE11 has the issue.
What you can do is add the height="320" attribute to your SVG tag. So IE can render correctly. I believe IE11 is thrown off by using width 200% in your CSS. But since xml:space="preserve" is the default, setting only the height will keep the proportions of your SVG jacket.
Test codepen example in IE11:
http://codepen.io/jonathan/pen/MarvEm
<svg height="320" viewBox="0 0 248.2 142.8" enable-background="new 0 0 248.2 142.8" xml:space="preserve">
Also remove the XML namespace tag since it is not needed inside an HTML page. And you can also remove some of the SVG attributes like version, xmlns, xmlns:xlink, x, and y, since those are not needed as well.
I was having SVG image display issue in IE11. The issue was inner svg image was having width and height mentioned. Due to this it was failing to scale properly on IE11 and it was working fine on IE edge, chrome, firefox very fine.
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
To fix the issue I removed width="120" height="120" and its working fine.
When I observed svg image was having width="120" height="120" viewBox="0 0 120 120" but in IE11 it was only showing width="120" height="120".
output was:
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120">
I'm having trouble with a svg pattern background that is not repeating on the x-axis in IE11 (and probably other IEs) and the Android native browser.
Apparently I should add preserveAspectRatio: "none slice" to the svg element, but what if the svg is used as background-image?
CSS
header.logoheader:after {
background-image: url('patroon5.svg');
background-size: auto 100%;
background-repeat: repeat-x;
content: "";
display: block;
height: 100px;
left: 0;
position: absolute;
top: 40px;
width: 100%;
}
(I'm using the :after selector so the transparent pattern covers the div)
In my HTML there is no svg element to add the preserveAspectRatio to. I'm thinking this is because of the :after selector.
Anyone got an solution?
You can either edit the background image svg file to include it or alternatively use an SVG fragment identifier i.e.
background-image: url('patroon5.svg#svgView(preserveAspectRatio(none))');
Had this kind of problem before on IE. To fix it you have to edit your svg file then remove the set width and height assuming you have viewBox set in there. Then add preserveAspectRatio="xMinYMid" as an attribute.
e.g.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
preserveAspectRatio="xMinYMid" viewBox="0 0 1024 1024" enable-background="new 0 0 1024 1024" xml:space="preserve">
I'm using SVG's as icons in the following way
The SVG's are saved from in Illustrator CC
<div class="social">
<img src="img/icon_twitter.svg">
<img src="img/icon_facebook.svg">
</div>
This is the CSS. The social div is the wrapper of the 2 's
.social {
position: absolute;
left: 40px;
bottom: 40px;
}
.social img {
width: 50px;
margin-right: 10px;
}
Here are the screenshots with the results, The first one is normal ( chrome )
The other one's are weirdly stretched in the height.
Chrome
Internet Explorer 11
Safari
Here's the SVG code
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.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" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 28.4 28.4" enable-background="new 0 0 28.4 28.4" xml:space="preserve">
<path fill="#FFFFFF" d="M14.2,0C6.4,0,0.1,6.3,0.1,14.1c0,7.8,6.3,14.1,14.1,14.1s14.1- 6.3,14.1-14.1C28.4,6.3,22,0,14.2,0z
M18,14.1h-2.4c0,3.9,0,8.7,0,8.7h-3.6c0,0,0-4.8,0-8.7h-1.7V11h1.7V9c0-1.4,0.7- 3.7,3.7-3.7l2.7,0v3c0,0-1.6,0-2,0
c-0.3,0-0.8,0.2-0.8,0.8V11h2.8L18,14.1z"/>
</svg>
Solution
In my CSS i only specified width: 50px; for the image element that holds the SVG.
I also had to specify a height: 50px; It's working now!
In your SVG remove the height and widthattr this will make it responsive
read more at MAKING SVGS RESPONSIVE WITH CSS
Solution
I also have to specify the height attribute in my CSS
In my css i was had
width: 50px;
But you also have to specify the height. It's not preserving the aspect from itself.
Thanks everyone!