es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

URIs de datos: ¿es posible tener múltiples formatos superpuestos?

02 Aug, 2023 Programación

Digamos que tengo un archivo gif de fondo como este:

data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7

Y un archivo SVG:

data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3e
%3cpath d='M22 38V51L32 32l19-19v12C44 26 43 10 38 0 52 15 49 39 22 38z'/%3e
%3c/svg%3e

Y quiero poner el archivo SVG delante del archivo GIF, pero hacerlo todo dentro de una única URL de datos URI. ¿Cómo puedo hacer esto?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr esto, necesitarías usar un SVG para posicionar la imagen de fondo GIF. Aquí están los pasos:

    1. Codifica tanto la imagen de fondo GIF como el SVG en URIs de datos. 
      background-image: url('data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'),
url('data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' %3e%3cpath d='M22 38V51L32 32l19-19v12C44 26 43 10 38 0 52 15 49 39 22 38z'/%3e %3c/svg%3e');
    2. En el SVG, usa el elemento rect para crear un contenedor para la imagen de fondo que tenga las mismas dimensiones que el SVG. 
      <svg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 50 50'>
  <rect width='100%' height='100%' fill='url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7)'>
  </rect>
  <path d='M22 38V51L32 32l19-19v12C44 26 43 10 38 0 52 15 49 39 22 38z'></path>
</svg>
    3. Usa CSS para posicionar la imagen de fondo dentro del contenedor SVG. 
      rect {
  background-position: center;
  background-size: cover;
}

    ¡Y listo! Ahora tienes un SVG que posiciona un GIF de fondo.

Comments are closed.