I am making a puzzle program. Each puzzle will have 9 pieces and I may end up having 30 puzzles meaning that I will need 9*30= 270 images. This number may grow as the program grows. I am also considering responsive web. The puzzle pieces(images) will also be animated on some events and user interactions. My concern is having lots of images(http requests) slow down the page.
I’ve thought about css image sprits but I can’t have the images as background image because they are puzzle piece shape and not rectangular.
I also thought about having one svg image for each puzzle but wasn’t sure how I can place parts of an svg image in different positions on the page.
For sure, if I want to use svg I have to illustrate the images in svg which is not a problem because they haven’t been created yet.
Well, I think if you have an svg element it will appear in the exact path shape and not in a rectangular shape. But if I use background image it will cover part of a rectangle, where I cannot detect whether the user clicked on the uncovered or covered area! This won’t happen with svg (<g></g>), right?
Viewing 2 posts - 1 through 2 (of 2 total)
The forum ‘CSS’ is closed to new topics and replies.