CoderScissorhands CoderScissorhands - 1 month ago 12
HTML Question

Safari not rendering SVGs to the desired size/height (SVGS are clipped)

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:

SVGS don't fit

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. :

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

  • The SVG parents/containers are always

  • The entire footer is

  • The main background image that is supposed to resize according to the height of the landing footer is

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

.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
of the SVGs (whose class is

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

// 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);


$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="" xmlns="" xmlns:xlink="">

Any help would be very appreciated, I really would like to see this to render properly in Safari!

Update: I've found this article that suggested explicit declaration of height and width inline in the svg. I tried it and it did help things, though it hurt others. I'll report back.


I figured out a combinations of 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:

The inline html declaration of the SVG

The inline html settings for the SVG that work for me have a preserveAspectRatio declared with the setting xMidYMid meet. I also adjusted my viewBox and removed my overflow: visible setting according to the suggestions of @Paul Lebeau

Here is the code:

 <svg class="areaSVG notFixed index" viewBox="0 0 80 80"  perserveAspectRatio="xMidYMid meet" xmlns:svg="" xmlns="" xmlns:xlink="">


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):

.ey-col.svg {
    display: block;
    height: auto;
    text-align: center;
    box-sizing: border-box;
    padding: 0;

.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).