Trying to rebuild this a better way

Beginners
1

Hi. Although I got this working long ago, I have been spending the last week or so trying to rebuild this using a more solid method (…as my current solution, although working, is a bit of a house of cards, unfortunately).

I tried Canvas, but that was a bit of a disaster, and far too much trouble than it’s worth.

So, I’m now trying this using SVG… just the tag, not vector graphics.

So, the thing I’m trying to rebuild (better) is a block of animation that is also responsive.

In this bit of code below, I illustrate the basic structure I currently have. It’s a ‘background’ image (not in the true HTML sense, but a raster image that is serving as the background for the animation), and (in this example) a single smaller image that is then being animated via Greensock’s animation library/system.

So, two key things need to be possible…

  1. The smaller images need to go on top of the larger (background) image.

  2. The whole thing needs to properly scale down together when the screen size gets smaller (responsive).

Currently (in my ‘working’ version) I’m doing that using relative/absolute positioning methods… but since everything is independent of the background, I have to use all kinds of hacks to get the ‘actors’ to scale down with the background image.

That’s why I was trying Canvas, and now the SVG tag, as they allow all the elements to be fused together as one element which (hopefully) would then be easier to scale responsively.

The code below does everything properly, as far as placement and animation… but the whole thing isn’t responsive.

I’m new to the SVG tag, and so I’m not even sure if the ‘canvas’ (for lack of better words) will behave as I hope, and scale down responsively. So far, it doesn’t seem to.

I get very confused about what and where to put various properties, such as centering, in the various levels of containers (row, column, and the actual ‘image’ item(s))… and so I suspect I’m kind of going around in circles, sometimes getting it correct, but with some other aspect messing it up.

I’m really hoping someone can look at this demo code, and point out to me what needs to be altered in order for this to work as it is now, but with the SVG ‘canvas’ properly scaling down responsively as the screen gets smaller. (I know how to do responsive sites fine… it’s just when using an SVG tag that it seems to be getting very confusing/frustrating.

<div class="container text-center">
<div class="row">
    	<div class="col-12 offset-0">
            	<svg class="svg">
                    	<image x="40" y="0" href="img/background.png" class="background"/>
                    	<image x="70" y="0" href="img/actor.png" class="actor"/>
                	</svg>
            </div>
</div>

Technical note: The SVG ‘canvas’ is intentionally 80 pixels wider than the background image, which I have placed 40 pixels (x) from the origin… this is so the ‘actor’ can overhang the left and right edges of the background image without being clipped (by the edge of the SVG canvas itself).

Again, I’m not even sure the SVG canvas WILL scale with the containing element/DIV. New to this…

2

you mentioned raster image as if you were trying to do collision detection.

is that a requirement here?

3

Hello again! No, not at all. I’m just saying rasterized to emphasis that I am not talking about vector shapes… since I am using the SVG tag, people will probably assume it will all be vectors… which may or may not change things as far as a solution.

This is just the same thing I’ve been asking in my other posts… but now in the context of me having tried Canvas, and am now using SVG (…the tag, not the drawing capabilities). Just trying to do an image-based animation… small images animating over a large background image… but have it scale responsively.

I got everything working (…SVG gives me the ability to position the smaller ‘actor’ images overtop of the larger ‘background’ image without the need for relative/absolute positioning (and, hence, avoiding taking everything out of the flow, and complicating the scaling/positioning further). Putting everything between the SVG tags solves all that… but (so far) I have not been successful in getting that SVG ‘canvas’ to responsively scale.

4

scaleability is the signature feature of SVG… It would seem a natural fit.

you may have to end up with all vector graphics tho, not just using it a backdrop.

5

Well, that’s exactly why I emphasized raster images… this is not using vector images.

These are detailed graphics, nothing that can be vector based. It’s not logos or anything like that, but detailed scenes.

I’ve got everything working, except that the < svg > item (and it’s contents) do not appear to be responsive.