I have several bitmaps in *.png format
I want to use one image as background

enter image description here

Other raster images I want to use as animation characters

For example, a hare with a guitar jumping under a Christmas tree to music:

enter image description here

  body { background-image:url(https://i.stack.imgur.com/EgAH7.jpg); background-size:cover; } 
 <div> <img src="https://i.stack.imgur.com/3xzEW.png" > </div>

How to make a character animation and at the same time ensure that the layout was 100% adaptive.

  • @PaulVarshavsky everything is right :) I have a check mark and the advantages in the bag with gifts are. give a solution and it will be all yours :) - Alexandr_TT

1 answer 1

One of the possible techniques for solving the issue of adaptability.
This solution was used at the New Year contest.

This technique allows you to easily scale and position images, both raster formats and vector ones within svg.

  • Add both bitmaps inside the svg file. With this solution, we are guaranteed complete adaptability. In the svg file header, we add only the viewBox Christmas tree of equal size, which will act as a background.

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 1280 1024" preserveAspectRatio="xMinYMin meet" border="1"> <!-- Фон --> <image height="100%" width="100%" xlink:href="https://i.stack.imgur.com/EgAH7.jpg"/> <!-- Заяц --> <image id="zayka" xlink:href="https://i.stack.imgur.com/3xzEW.png" width="100%" height="100%" opacity="1" /> </svg>

  • Reduce the size of the image of the hare for this set for the image

    <image width="40%" height="40%" />

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 1280 1024" preserveAspectRatio="xMinYMin meet" border="1"> <!-- Фон --> <image height="100%" width="100%" xlink:href="https://i.stack.imgur.com/EgAH7.jpg"/> <!-- Заяц --> <image id="zayka" xlink:href="https://i.stack.imgur.com/3xzEW.png" width="40%" height="40%" opacity="1" /> </svg>

  • Position the image transform="translate(200 650)"

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 1280 1024" preserveAspectRatio="xMinYMin meet" border="1"> <defs> <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%"> <feDropShadow dx="5" dy="5" stdDeviation="2"/> </filter> </defs> <image id="zayka" height="100%" width="100%" xlink:href="https://i.stack.imgur.com/EgAH7.jpg"/> <image id="zayka" transform="translate(200 650)" xlink:href="https://i.stack.imgur.com/3xzEW.png" width="40%" height="40%"> </image> </svg>

  • Add a tween animation command forward.

    <animateTransform attributeName="transform" type="translate" values="200 650;400 650; 200 650" dur="4s" />

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 1280 1024" preserveAspectRatio="xMinYMin meet" border="1"> <defs> <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%"> <feDropShadow dx="5" dy="5" stdDeviation="2"/> </filter> </defs> <image id="zayka" height="100%" width="100%" xlink:href="https://i.stack.imgur.com/EgAH7.jpg"/> <g fill="transparent" stroke-width="3" transform="translate(0 100)" filter="url(#shadow)"> <image id="zayka" transform="translate(200 650)" xlink:href=" https://i.stack.imgur.com/3xzEW.png" width="30%" height="30%"> <animateTransform attributeName="transform" type="translate" values="200 650;400 650; 200 650" dur="4s" repeatCount="indefinite" /> </image> </svg>

  • Complicate the animation, add bouncing to the horizontal movement of the hare
    Add a music track and select the temporal attributes of the animation to get into the rhythm of the music

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 1280 1024" preserveAspectRatio="xMinYMin meet" border="1"> <defs> <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%"> <feDropShadow dx="5" dy="5" stdDeviation="2"/> </filter> </defs> <image id="zayka" height="100%" width="100%" xlink:href="https://i.stack.imgur.com/EgAH7.jpg"/> <g fill="transparent" stroke-width="3" transform="translate(0 100)" filter="url(#shadow)"> <image id="zayka" transform="translate(200 650)" x="0" xlink:href=" https://i.stack.imgur.com/3xzEW.png" width="30%" height="30%"> <!-- Анимация подпрыгивания зайца --> <animateTransform attributeName="transform" type="translate" values="200 650;200 620;200 650;180 620;180 650;180 620;200 650" dur="1.3s" repeatCount="indefinite" /> <!-- Анимация горизонтального перемещения --> <animate attributeName="x" dur="15s" values="200;250;300;350;300;250;200" calcMode="linear" repeatCount="indefinite" /> </image> </svg> <audio src="https://svg-art.ru/files/potap_i_nastya_-_novyy_god.mp3" autoplay="autoplay"></audio>

Music card is ready!
The solution is adaptive, universal.

You can replace the image with your photo and send it to someone :)

  • I posted this topic as an aid in mastering the svg technique, but it will not be difficult for me to repeat this technique with my pictures of the animation characters and adopt them. Waiting for new answers here, a tick and pluses for the answers are guaranteed! - Alexandr_TT