svg video

Estructura de un svg basico con video

svg video A la hora de insentar videos y hacer diseño paginas web me he decantado por utilizar el formato de dibujo vectorial svg.

Aunque este formato fue diseñado hace años como formato de dibujo vectorial, se ha modificado para poder insertar dentro del codigo xml videos, audio, imágenes, texto, css incluida animaciones, y javascript.

Vamos una joya si no fuera porque da problemas en varios exploradores . Esperemos que vallan solucionando los problemas de compatibilidad

Así pues con un mismo archivo, sin librerías externas ni archivos externos, podemos generar “cualquier tipo de animación “ con estos objetos ¡ increíble!

Muchos problemas que he tenido, se hubieran solucionado más rápidamente si hubiera utilizado una herramienta online de validación de textos svg o si hubiera probado previamente en varios exploradores el resultado final

MI consejo utilizarlos y explorar https://validator.w3.org/

Vallamos por partes como dijo jack el destripador

<svg class="img-responsive" version="1.1" preserveAspectRatio="none" xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" 
x="0" y="0"
 width="500" height="320"
 viewBox="0 0 500 320">	
<rect width="500" height="320" stroke="blue" stroke-width="4px" fill="yellow"></rect>
	
</svg>	

Aquí podremos verla estructura básica de un grafico svg donde podemos ver:

 la cabecera necesaria para su visualización en las páginas web unas coordenadas x e y donde se ubica el svg dentro del contenedor que lo contenga,

Ancho y alto del gráfico svg

La propiedad viewbox es una especie de zoom de lo que vemos dentro del svg y modifica el tamaño del contenido del svg

Se ha colocado un rectángulo  dentro del  grafico svg para visualizar lo que sería el fondo de este grafico

Ahora colocaremos dentro de nuestro grafico un video

<svg class="img-responsive" version="1.1" preserveAspectRatio="none" xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="500" height="320" viewBox="0 0 500 320">	

<rect width="500" height="320" stroke="blue" stroke-width="4px" fill="yellow"></rect>

<foreignObject width="480" height="300"  >  
  
<video  width="480" height="300" autoplay="autoplay" loop="loop" muted="muted"  preload="auto"  >
<source src="https://animacionesweb.online/videos/Spaceship-33411g.mp4" type="video/mp4"></source>
</video>

 </foreignObject>


</svg>	

La etiqueta foreignObject es como si fuera un contenedor dentro del grafico svg, para que el código svg pueda entender que allí tiene un video o cualquier objeto html.

Cuando escribimos en html5 el código de un video directamene en la pagina web la etiqueta «foreignObject» no se pone.

Este contenedor debe llevar una medida de ancho y alto que normalmente debería coincidir con el espacio que queremos que ocupe el video

Deja un comentario