How to show an image inside shapes like back of an phone case(with transparent hole for camera) in the webpage?


I am working on a project in which I am developing a web application where artist can upload there artwork which will be printed on various smartphone phone cases(A small version of websites like RedBubble.com or Society6.com).

So as one of its module, what I want to achieve is:

1- Admin can upload the phone case shapes(just the back of the case with transparent camera hole) from admin panel.

2- Artist can upload the artwork and which will be displayed on all available phone cases as final product to the customer.

I have searched a lot about this and came out with the following idea but now I am totally lost:

1- Admin can create shapes using software like InkScape which will give them SVG files and its code.

2- These files can be stored in the database(content of the file or the file name, I was unable to figure out).

3- Artist will upload his/her artwork and will be stored in the database as jpg file.

So now, I have both, the shape(SVG) and the artwork(JPG) stored in the database.

I just cannot figure out how to display the final product which will be the selected artwork on the selected phone case shaped SVG. Or am I going totally wrong?