Colored Retangles inside a VF Page rerendered as pdf

Question

I'm trying to draw 3 colored rectangles in a Visualforce page rerendered ad PDF. (below the code I use inside the VF page). The problem is when the page is render the rectangles are not printed. How can I do that in a page that has to be render as PDF? thank you for help

<div style="height:80% " >
            <svg width="10" height="10"><rect x="0" y="0" width="10" height="10" style="fill: #00FF00; stroke: #FFFFFF; stroke-width: 2;" /></svg> Before crash &middot;
            <svg width="10" height="10"><rect x="0" y="0" width="10" height="10" style="fill: #FF0000; stroke: #FFFFFF; stroke-width: 2;" /></svg> Crash &middot;
            <svg width="10" height="10"><rect x="0" y="0" width="10" height="10" style="fill: #FF4500; stroke: #FFFFFF; stroke-width: 2;" /></svg> After crash &middot;
            </div >

Answer 1

The PDF render engine won't support svg images. It only supports HTML 4.1 and CSS 2.1. You'll want to use solid border tables with a background color and bordercolor that match what you've specified for your svg vector images.