How to tame SVGs as background-images

Question

I have the following goal: I wanted to place a heart within a container - scaled and positioned.

First I wanted to use an icon font but I've discarded the idea. Second option to load the heart as an image I've discarded too - I have to use the heart a few times on my recent project and I wanted to save http requests. Therefore I wanted to go with the SVG as a background-image option. But the problem is, somehow I am unable to tame that beast. I've built a sample pen to illustrate the issues and parts I don't understand.

The un-base64-encoded optimized SVG looks like that:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960"><polygon points="756,168.4 593.5,168.4 480,258.3 366.5,168.4 204,168.4 30,349 480,791.6 930,349"/></svg>

The sample code you can find from my codepen.

Basically I have three related questions (normally I prefer to post separate issues but those three questions are basically way too connected therefore I hope it's ok):

The sizing: .heart1 has a width and height of 100% and everything displays fine. If you use suiting px values all is fine too but if you try to enter ems the heart isn't shown anymore. Why?
The green box: .heart1 has a width of 100% but if you drag the browser window bigger the heart only grows to some point and then only the green box keeps on growing. I thought SVGs are more or less able to scale to "infinity"?
The yellow box: My basic goal was to make the heart a bit smaller than the width of the yellow box, center it horizontally within and give the heart some top margin. Width and height of .heart2 are set to 75%. But somehow I am unable to position the heart within the box neither with top, left and/or right properties nor in background:url with "no-repeat center 2em" e.g. . It just doesn't react.

Pls check http://stackoverflow.com/questions/8919076/how-to-make-a-svg-element-expand-or-contract-to-its-parent-container , http://stackoverflow.com/questions/8515524/how-do-i-scale-an-svg-polygon-in-ems — Prasanna Aarthi, Jan 10 '14 at 04:16

score 0 · Answer 1 · answered Jan 10 '14 at 19:55

I use a block of code shown below to fit svg in a DIV. It works best in a DIV with the same width/height. As you can see below it uses getBBox() to change its viewBox, plus changes the svg width/height values. It works cross browser: IE10+/CH31/FF23

var bb=mySVG.getBBox()
var bbw=bb.width
var bbh=bb.height

//--use greater of bbw vs bbh--
if(bbw>=bbh)
    var factor=bbw/divWH
else
    var factor=bbh/divWH

var vbWH=divWH*factor

var vbX=(bbw-vbWH)/2
var vbY=(bbh-vbWH)/2
//---IE/CH---
if(!isFF)
{
    var ViewBox=mySVG.viewBox.baseVal
    ViewBox.x=vbX
    ViewBox.y=vbY
    ViewBox.width=vbWH
    ViewBox.height=vbWH
}
else
    mySVG.setAttribute("viewBox",vbX+" "+vbY+" "+vbW+" "+vbH)

//--requred for FF/CH---
if(!isIE)
{
    mySVG.setAttribute("width","100%")
    mySVG.setAttribute("height","100%")
}
else
{
    mySVG.removeAttribute("width")
    mySVG.removeAttribute("height")
}

The svg is centered both left/right and top/bottom within the DIV, plus maintains its aspect ratio. This should help get you started.

How to tame SVGs as background-images

1 Answers1