This project is read-only.

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 or

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?