SVG and Images

In order to overlay SVG and images on the same area of the page, you'll have to position them with CSS. One, among many, way to do this is to use absolute positioning. The example below shows how to use an absolutely positioned image as the background for an SVG canvas.

<div style="position:absolute; top:450px; left:50px">
	<img src="oldmain.jpg" width="900" height="350"/>
</div>
<svg width="900" height="350" style="position:absolute; top:450px; left:50px">	
	<rect x="0" y="0" width="900" height="350" fill="white" opacity="0.5" />
	<text x="100" y="100" font-size="40" fill="blue" style="stroke-width:2; stroke:black">Dr. Williams' Office</text>	
	<path d="M 380,110 C 410,300 600,0 680,95" fill="none" style="stroke-width:2; stroke:black"/>
	<circle cx="680" cy="120" r="25"  fill="rgba(0,126,143,0.6)" style="stroke-width:2; stroke:black"/>
</svg>

which results in the example on this page. Note that since the sample is always 450 pixels from the top, and 50 pixels from the left, it will appear to be in a different place depending on the size of the monitor.

In this example, both the canvas and the image have the same size and position, but that's not required.

Also, remember that this is not ideal. SVG is scalable, while the image is not. So viewing this demo on a large monitor would reveal a problem: the text and curve will still look sharp, but the image quality will suffer.