Diseño web responsive: Imágenes

Opciones de exportación y optimización de archivos SVG

¡Prueba gratis durante 10 días

nuestros 1203 cursos !

Prueba gratis Mostrar modalidades de suscripción
En este vídeo veremos las opciones más comunes que tenemos a la hora de exportar y optimizar archivos de imagen en formato vectorial SVG. Veremos algunos recursos adicionales que nos pueden servir para evitar incompatibilidades.
05:07

Transcripción

Cuando estamos hablando de trabajar con ficheros SVG, recordemos que estamos hablando de ficheros en formato vectorial. A la hora de trabajar con ellos, podremos usar programas como Illustrator, Sketch, Photoshop. Hay un montón de opciones disponibles. Por norma general, cuando trabajemos con estos archivos, tendremos que familiarizarnos con conceptos como trazos, rellenos, fuentes de íconos, incluir los SVG en línea. Vamos a centrarnos, no obstante, en las opciones de exportación para tratar de sacar lo mejor de nuestros archivos SVG. Vamos a abrir por ejemplo Illustrator. Tengo aquí, pues un archivo con contenido vectorial y para guardarlo como SVG podría dirigirme a Exportar y Exportar como. Vamos a dejarlo aquí, por ejemplo, que lo reemplace y ahora nos aparece un cuadro de diálogo nuevo, específico de opciones a la hora de exportar en formato SVG. Vamos a centrarnos en las más importantes, por ejemplo, en Minimizar. Esta opción nos permitirá reducir el tamaño del archivo en la medida de lo posible, bueno pues eliminando un código que no sea del todo necesario dentro de lo que sería el archivo en sí. Si marcamos la opción Flexible indicaremos que dentro de los datos incluidos en el archivo SVG nos incluyan valores de altura o anchura. Ahora hay situaciones en las que no vamos a necesitar estos datos realmente porque a la hora de usar SVG en web, bueno pues usaremos CCS o usaremos estilos para definir el tamaño y aspecto de los ficheros SVG. Dentro del selector de fuente, podemos escoger la opción de SVG o convertir en contornos. Convirtamos a trazos o a contornos el contenido si hemos incluido capas de texto editable, y de esta manera bueno pues, los usuarios puedan ver el archivo sin necesidad de las fuentes que nosotros hemos utilizado. Hay otras opciones adicionales que, bueno, en este caso no necesitamos entrar en profundidad para verlas, hemos visto las más interesantes. Dependiendo del programa, tendremos unas opciones u otras a la hora de exportar. No hay miedo de usar un programa u otro; simplemente lo que tendremos que ver es si tenemos todas las opciones necesarias, por ejemplo, Photoshop, bueno pues, las últimas versiones, Photoshop nos permite de manera nativa exportar también contenido en formato SVG. Si vemos el cuadro de diálogo, bueno, evidentemente es diferente, podemos seleccionar el formato SVG aquí, y bueno apenas tenemos las mismas opciones que tenemos incluidas dentro del cuadro de diálogo que nos ofrecía Illustrator. También hay que tener en cuenta que si queremos exportar contenido en formato SVG, en formato vectorial, desde Photoshop, evidentemente tenemos que trabajar con formas vectoriales. Si tenemos una fotografía, de nada vale que la exportemos en formato vectorial porque el contenido en sí no se va a poder escalar sin perder cantidad. Para poder exportar de manera efectiva dentro de Photoshop contenido vectorial estamos jugando con por ejemplo, formas vectoriales que hayamos creado mediante las formas personalizadas, líneas, polígonos, lo que nosotros necesitemos porque este contenido luego sí que lo podemos exportar en SVG y podemos trabajar con él de manera vectorial. Mismamente yo tengo este corazón que he exportado en SVG en Photoshop. Vamos a abrirlo que lo tengo por aquí de manera reciente, hago clic en OK, y aquí tengo el corazón que puedo escalar sin ningún tipo de problema, sin que se pierda calidad en la forma porque es un contenido totalmente vectorial. Para terminar este vídeo, me gustaría recomendar un par de enlaces sobre todo el que estaba viendo al principio de este video. Es "SVG on the Web" que es una guía práctica con todo lo que podamos necesitar saber a la hora de trabajar con el formato SVG: tips de optimización, cómo guardarlos, un montón de información, es súper útil. Si no lo conoces hasta ahora, se puede acceder a este documento en "SVG on the Web.com" y tenemos toda la información. También dentro de este artículo, este recopilatorio, hacen mención a SVGOMG o SVGOMG que es un optimizador online de archivos SVG. Vamos a dar clic para verlo, simplemente lo que tendríamos que hacer es abrir nuestros archivos SVG para intentar reducir al máximo su peso. Hay una demo para que podamos ver todas las opciones que hay aquí disponibles que podemos marcar y desmarcar a la hora de exportar y optimizar nuestros archivos SVG, y aquí abajo vemos un pequeños indicador de cuánto espacio podemos llegar a reducir nuestro archivo, cuánto podemos recuperar. Con estos dos últimos enlaces, yo creo que tenemos todo lo necesario, además, para trabajar de manera eficiente con nuestros archivos en formato SVG.

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.