El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Diseño web responsive: Imágenes

Uso de elementos SVG

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Ampliaremos las posibilidades del elemento picture, descubriendo que también podemos incluir imágenes en formato vectorial empleando este etiquetado. De esta forma veremos que también nos puede servir de cara a ofrecer compatibilidad con navegadores antiguos.
03:42

Transcripción

(hombre) A la hora de trabajar con el elemento picture, hemos visto que, generalmente, he mostrado los ejemplos empleando imágenes en formato JPG. Lo único que quiero recordar es que también podemos usar formatos como PNG, GIF o incluso, si queremos, también podemos emplear imágenes en formato vectorial como por ejemplo, SVG. ¿Cómo podríamos incluir una imagen en formato SVG dentro de un elemento picture? Bueno pues vamos a aprovechar este ejemplo. Vamos a abrir el documento HTML dentro de nuestro navegador para ver cuál es el contenido que tenemos ahora mismo. Vamos a desplegar también el modo que nos permite modificar el tamaño de la ventana. Ahora mismo, tenemos diferentes imágenes cargadas y lo que vamos a hacer es lo siguiente. Vamos a dirigirnos al código y vamos a escribir surs y en vez de escribir srcset o midia, vamos a poner type y vamos a escribir... image barra SVG+XML Y ahora ya podemos trabajar como queramos. Podemos poner en este caso srcset, vamos a escribirlo aquí, srcset, y ponemos la ruta, en este caso, vamos a poner barra..., rocket.SVG que es una imagen que yo ya tengo dentro de la carpeta de imágenes aquí como ejemplo. Es una imagen en formato SVG, Volvemos al código, podríamos dejarlo así, pero para que se vea en el ejemplo, vamos a aprovechar una de las condiciones que ya teníamos incluidas dentro de este ejemplo. Voy a borrar esta de aquí, para que no interfiera, y vamos a guardar. Vamos a dirigirnos al navegador, vamos a recargar y vamos a ver qué ocurre. En principio esta imagen como no la hemos tocado pues tendría que permanecer igual. Vamos a ir haciendo más pequeña la pantalla del navegador y aquí tenemos la imagen que nosotros hemos incluido en formato SVG. Es así de fácil, emplear imágenes en formato vectorial como SVG dentro del elemento picture. Si quisiéramos usarla de manera individual, sin cargar otras imágenes, bueno pues no pasaría nada. Eliminamos esta de aquí, podemos incluso quitarle esta condición, la dejamos así, guardamos. Vamos a recargar el navegador y aquí tendríamos nuestra imagen. Al ser una imagen en formato vectorial es evidente que no va a perder cálidad en ninguno de los casos. Podemos emplear este elemento picture para incluir imágenes en formato SVG y también para incluir un fullback. En este caso bueno pues va a ver navegadores, en los que a lo mejor el formato SVG no esté perfectamente soportado, y bueno pues podemos incluir una imagen con el contenedor picture. Ponemos un surs con nuestra imagen SVG y luego hacemos el fullback con el etiquetado IMG, donde incluiríamos, pues por ejemplo en este caso, una versión de esta imagen, pero en formato JPG.

Diseño web responsive: Imágenes

Aprende los conceptos básicos sobre la creación y el uso de imágenes en un entorno digital responsive, donde lo que importa es el usuario y los contenidos que le interesan.

1:54 horas (24 Videos)
Actualmente no hay comentarios.
 
Fecha de publicación:25/10/2016

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.