How to layer a number over an SVG background

I have the following SVG html code. I want to have a grid with three of the SVG images and a "1", "2", and "3" over each one to signify three steps.

How do I do this?

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1009 1133" style="enable-background:new 0 0 1009 1133;" xml:space="preserve">
<style type="text/css">
.st0{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_1_);}
</style>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="729.2153" y1="747.2716" x2="123.1247" y2="262.401" gradientTransform="matrix(-1 0 0 -1 1009 1134)">
<stop offset="0" style="stop-color:#4D4D4F"/>
<stop offset="1" style="stop-color:#000000"/>
</linearGradient>
<path class="st0" d="M556.1,13.8l401.4,231.7c31.9,18.4,51.6,52.4,51.6,89.3v463.4c0,36.8-19.7,70.9-51.6,89.3l-401.4,231.7
c-31.9,18.4-71.2,18.4-103.1,0L51.6,887.5C19.7,869.1,0,835,0,798.2l0-463.4c0-36.8,19.7-70.9,51.6-89.3L452.9,13.8
C484.8-4.6,524.2-4.6,556.1,13.8z"/>
</svg>