{eleqtriq} SVG Backgrounds

It is possible to define "background-position: right bottom" for background images. But not every browser allows to define a right and bottom margin as well. Wrapped into an SVG the width and height of the SVG can help us establish a margin around our bitmap that works in every browser.

CSS:


background: red url('../svg/bottomright.svg') no-repeat right bottom;

SVG:


<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="360px" height="270px" xml:space="preserve">
	<defs>
		<image id="image" xlink:href="../img/gene.png" width="324" height="231"/>
	</defs>
	<use xlink:href="#image"/>
</svg>