Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. SVG
Design

Archivos SVG: De Illustrator a la Web

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Web and Interface Design With Vector.
Create a Set of Glossy Labels and Save them for Web
Quick Tip: How to Create a Simple Web Button Set Using the Appearance Panel

Spanish (Español) translation by Jorge Montoya (you can also view the original English article)

Scalable Vector Graphics (SVG) es un formato de imagen vectorial que inició su vida en 1998. Siempre se desarrolló con la web en mente, pero apenas ahora la web realmente ha comenzado a ponerse al día. No se puede negar su relevancia hoy, así que echemos un vistazo a los conceptos básicos de tomar un SVG de Illustrator hacia el navegador web.

Nota: Estoy usando Adobe Illustrator CC para demostrar cosas aquí, pero otras versiones tienen opciones y herramientas similares (si no idénticas).

¿Por qué SVG es útil?

El formato SVG fue desarrollado y sigue siendo mantenido, por el World Wide Web Consortium (W3C).  El W3C se compone de un grupo de gente inteligente, que se esfuerza por normalizar la web, haciéndola un lugar abierto y accesible para todos.

SVG es bueno para la web, especialmente en estos días, ya que supera el problema de la resolución de la pantalla. No importa cuan densamente empacados estén los píxeles de su nuevo teléfono inteligente, los vectores siempre se mostrarán tan nítidos como la nieve recién caída, lo que no siempre es cierto en las imágenes rasterizadas.

El tamaño del archivo siempre es un problema con la web (nadie quiere esperar a que una imagen de 5Tb se cargue en el navegador a través de una conexión móvil) y así SVG es un formato vectorial simplificado. Está construido con XML, y una gran cantidad de "cosas" innecesarias se eliminan, produciendo un archivo relativamente ligero.

Por último, dados estos bloques de construcción de XML, el contenido de un archivo SVG puede ser manipulado y estilizado como cualquier otro elemento en una página web. Las partes dentro de un SVG pueden ser aisladas, los colores pueden ser cambiados, el grosor del borde puede ser alterado, la transparencia, podemos incluso aplicar ciertos filtros (como el desenfoque), incluso animar - todo a través de CSS y JavaScript.

¿Cuándo Usaría SVG?

Las ventajas de una calidad de línea nítida y la capacidad de manipular un elemento gráfico se explican por sí solas, pero  ¿dónde puede usted sacar provecho de esto? Aquí hay una lista rápida de situaciones en las que SVG alcanza su madurez:

Gráficos de todos los días: Si está utilizando un gráfico en un sitio web, considere si podría ser como formato SVG. Si es así, ¿por qué no usarlo? La fotografía sería un ejemplo donde SVG no tiene sentido, pero para todo lo demás, piense acerca de ello.

Demonstrating crisp font specimens Why bother with fuzzy raster formats
Demostración de especímenes de fuentes nítidas. ¿Por qué molestarse con formatos de rejilla borrosos?

Íconos: Sitios web de todo el mundo están salpicados de iconos; Son universalmente entendidos (cuando se usan correctamente) y acortan el tiempo que tarda un usuario en procesar una interfaz. Los íconos en estos días suelen aplicarse a sitios web a través de fuentes web, pero también se pueden inyectar en una página como SVG. Íconos perfectamente limpios y nítidos para todo el mundo, encantador.

I havent finished this set of SVG icons yet but youre welcome to download and use them
Todavía no he terminado este conjunto de iconos SVG pero usted está autorizado a descargarlos y usarlos..

Logos: Si hay una cosa que una empresa debe mantener preciosa, es su identidad. SVG ofrece la mejor manera de mostrar la marca en la web, simple y sencillo. Los colores pueden ser precisos, la calidad de la línea es inmaculada y el mismo archivo puede ser utilizado repetidamente en un sitio web, pero alterado dependiendo de sus circunstancias. Perfecto.

Recognise this logo

¿Reconoce este logotipo?

Decoración: No necesito vender esta idea a un grupo de artistas del vector, ¿verdad?

SVG decoration courtesy of fixateit
Decoración SVG cortesía de fixate.it

Animación: A través de CSS3 y JavaScript todo un mundo de animación se ha abierto a la web. SVG es el vehículo perfecto también, por todas las razones que he enumerado hasta ahora. ¿Puede imaginar botones que se animan cuando se pasa el cursor sobre ellos? ¿Íconos que le dan retroalimentación personalizada directa? El cielo es realmente el límite.

Iconic demonstrating SVG feedback
Demostración de Iconic acerca de la retroalimentación SVG

Así que eso es lo que es SVG. Un formato vectorial, desarrollado con la web en mente. Echemos un vistazo a cómo podemos usarlo.

Guardando un archivo como SVG

Vamos a trabajar con una imagen realmente básica, para demostrar lo que hace SVG.

Nuevo Documento

Abra Illustrator, comience un nuevo documento (Archivo > Nuevo Documento), dale un nombre si lo deseas, y configure el Espacio de trabajo en 300 x 300px.

svg-new-document

Elija una Imagen

No hace mucha diferencia lo que use como su vector de demostración en este punto, pero utilice algo relativamente sencillo. Yo he usado el glifo "No Pirates Allowed", disponible gratuitamente con la fuente "Webdings" (¡Nunca pensé que utilizaría esto para algo!)

Vaya al panel de Glifos (Texto > Glifos) luego seleccione la fuente "Webdings" para buscar entre las varios caracteres.

svg-webdingst

Con la Herramienta de Texto seleccionada, haga clic en la Espacio de trabajo y a continuación, haga doble clic en el glifo elegido para utilizarlo.

Convierta a Contornos

Ahora vamos a convertir este glifo tipográfico en contornos.

Nota: SVG de hecho admite objetos de texto, pero para demostrar las cosas en un nivel fundamental, optaremos por rutas.

Seleccione el glifo, utilizando la Herramienta de Selección (V):

svg-select

Luego, vaya a Texto > Crear contornos.

svg-outlines

¡Súper! Ahora tenemos un objeto vectorial basado en rutas.

Guardar

Para guardar este documento como SVG, vaya a Archivo > Guardar, o Archivo > Guardar como.. En el diálogo que aparece, elija una ubicación, le da un nombre de archivo (si no lo ha hecho) y crucialmente, seleccione SVG como el formato:

svg-save

A continuación, se le presentará otro diálogo, esta vez con algunas opciones de SVG.

svg-options

En honor a la verdad, ignorar estas opciones en este punto le servirá perfectamente bien. Los valores por defecto son los que usted desea en circunstancias normales.

Cubriremos algunas de estas opciones un poco más tarde, pero por ahora, presione Aceptar.

svg-file

¡Tenemos un archivo SVG!

Entonces, Esas Opciones SVG

Nos saltamos las opciones SVG porque realmente no necesita prestar mucha atención a ellas. Sin embargo, por el bien de ser exhaustivo, echemos un vistazo.

SVG vs SVGZ

Para empezar, pudimos haber elegido dos posibles formatos SVG en el diálogo de guardar.

svg-save-dialogue

SVGZ es una versión muy comprimida (Zipped, supongo) de SVG. Da un tamaño de archivo más pequeño, pero convierte el XML dentro del archivo mismo en un sinsentido, que nos impide manipular los vectores a través de CSS y JavaScript si quisiéramos.

Perfiles SVG

El paisaje siempre cambiante de la web y el continuo desarrollo de estándares web, hacen que SVG esté siempre creciendo. Usted puede ver esto gracias a la primera opción al guardar un archivo SVG: Perfiles SVG. Las opciones de perfil se ven actualmente así:

svg-profiles

Significan (más o menos) lo siguiente:

  • SVG 1.0: La primera (2001) encarnación de SVG
  • SVG 1.1: Prácticamente lo mismo que SVG 1.0, excepto que SVG 1.1 se puede dividir en subtipos adicionales, siendo estos..
  • SVG Tiny 1.1: Este es el primer subtipo de SVG 1.1 y está optimizado con la web móvil en mente. Es una forma muy simple de SVG, diseñada para "dispositivos móviles altamente restringidos". Tiny no admite degradados, transparencias, recortes, máscaras, símbolos, patrones, texto de subrayado, texto tachado, texto vertical o efectos de filtro SVG.
  • SVG Tiny 1.1+: Un ligero desarrollo de SVG Tiny 1.1, añadiendo soporte para degradados y transparencia.
  • SVG Basic 1.1: Este es el segundo subtipo de SVG 1.1 y permite características para dispositivos móviles más capaces, como los teléfonos inteligentes. Basic no admite recortes no rectangulares y algunos efectos de filtro SVG.
  • SVG Tiny 1.2: Esta fue la intención inicial de ser la próxima especificación completa para SVG, pero terminó siendo un desarrollo del subtipo Tiny. No me pregunte cuál rayos es la diferencia.

Pronto, estaremos en capacidad de añadir SVG 2.0 a esta lista. En realidad, los matices de estos perfiles son en gran medida irrelevantes para nosotros. SVG es capaz de manejar todo tipo de cosas, pero para vectores simples se adhieren a la configuración predeterminada actual de SVG 1.1 y sus gráficos estarán bien, siempre que sea posible, en la web.

Fuentes

Los archivos SVG pueden contener mucho más que rutas vectoriales. Los objetos de texto son un ejemplo de este tipo, y la opción Fuente le permite determinar cómo se tratan los objetos de texto.

svg-fonts
  • Adobe CEF: Este utiliza el uso de font-hinting para mostrar una tipografía más refinada. Sin embargo, no está soportado por todos los visores de SVG.
  • SVG: Soporte máximo, reconocido por todos los visores SVG, pero carente del refinamiento de Adobe CEF.
  • Convertir a contornos: Elimina todas las funciones de edición, pero conserva el texto exactamente de la misma manera, dondequiera que se vea. Produce en un archivo ligeramente más grande, ya que los caminos deben ser descritos, en lugar de sólo indicar qué caracteres están presentes.

Parte de la opción de fuente implica Subconjunto. Esto es relevante sólo si ha decidido no convertir su texto en contornos.

svg-subsetting

El subconjunto incorpora detalles de los caracteres en el archivo SVG, permitiendo que el archivo muestre fuentes que pueden no estar presentes en el sistema del usuario. Incrustar fuentes enteras (obviamente) da como resultado archivos mucho más pesados, aunque puede elegir cuántos glifos deben incluirse.

Opciones

Mientras estamos en el tema de la incrustación, las últimas opciones restantes aquí también pueden tener un impacto en el tamaño del archivo.

svg-embed

De la misma manera que con las fuentes, los archivos SVG pueden contener imágenes de mapa de bits. Dónde se ve Ubicación de la imagen Elija "incrustar" para que las imágenes se incluyan en el archivo en forma de código o elija "enlazar" para que las imágenes estén referenciadas simplemente. Esto funciona de la misma manera que colocar imágenes dentro de Illustrator y tiene un gran impacto en el tamaño del archivo final.

La última casilla de verificación aquí le permite conservar las capacidades de edición de Illustrator si es necesario. Esto significa que los detalles de todas las capas, filtros y efectos, símbolos, etc se mantendrán. Una vez más, mantenga esta opción desmarcada si su SVG está listo para la producción y el tamaño del archivo es importante.

Nota: Se recomienda guardar un archivo .AI que se utilice para su edición.

Par de botones

svg-final

Por último, los tres botones al pie del diálogo de opciones hacen lo siguiente:

  • Más opciones: Dejemos esto por ahora, ¿de acuerdo?
  • Código SVG..: Lanza el código XML, contenido en el archivo SVG, directamente en un editor de texto.
  • Globo: Lanza el archivo SVG directamente en un navegador web. Sólo para que pueda comprobarlo.

Utilizando SVG en la Web

Si usted no está acostumbrado a trabajar directamente con la web, HTML, navegadores, todo eso, hay algunas cosas a tener en cuenta en este momento.

Navegadores Web

En primer lugar, vamos a demostrar que su navegador puede manejar este formato perfectamente bien. Haga clic derecho sobre su nuevo y brillante archivo SVG y elija abrirlo con su navegador web estándar:

svg-browser

Los navegadores antiguos, como Internet Explorer 8 y versiones anteriores, no admiten el formato SVG y lamentablemente no funcionarán.

More details of SVG and browser support can be found on caniusecom
Se pueden encontrar más detalles acerca de SVG y el soporte de navegadores en caniuse.com.

Pero mientras utilice un navegador moderno, el archivo SVG se abrirá y mostrará sin ningún problema.

svg-in-browser

Lo primero que hay que tener en cuenta es que el archivo SVG ha conservado las dimensiones que originalmente le dimos. Nuestro SVG se ha abierto a 300 x 300px, el Área de Trabajo ha dictado los límites externos, y el ícono del pirata se coloca como debe ser en el centro.

svg-in-browser-artboard

Incorporación de SVG Dentro de una Página Web

Hasta ahora hemos creado un archivo SVG y lo hemos abierto en un navegador para comprobar que funciona. Ahora es el momento de utilizar correctamente nuestro archivo dentro de una página web.

Para empezar necesitamos una página web. Esto no necesita ser nada más complejo que un archivo vacío, con la extensión de archivo .html, guardado desde dentro de un editor de texto normal. No debemos preocuparnos por tener ningún código dentro de este archivo, pero si está interesado en los conceptos básicos de HTML, eche un vistazo a La Mejor Manera de Aprender HTML en algún momento.

Aquí está mi archivo, abierto en TextEdit para Mac OS X, pero usted puede utilizar cualquier editor de texto o de código de su preferencia.

svg-text-editor

Este archivo se abrirá bien en un navegador web así como está, pero tenemos que añadir algún código de "marcado" HTML para incrustar el SVG. Hay algunos enfoques para hacer esto.

El Enfoque de Etiqueta <img>

En primer lugar, podemos usar una etiqueta de imagen (a la que usted puede estar acostumbrado a usar para archivos JPG, PNG, etc.) que apunte a la ruta exacta del archivo dentro del atributo src = "".  Pegue este fragmento en su archivo HTML:

Asumiendo que la ruta del archivo es correcta, su página HTML se abrirá en un navegador de la siguiente manera:

svg-in-browser-html

Sí, sé que el efecto general en esta etapa es precisamente el mismo que cuando abrimos el SVG directamente en el navegador web, pero ¡ahora tenemos mucho más poder! Por ejemplo, podemos hacer inmediatamente el SVG más grande, usando el atributo width = "":

A beautiful crisp SVG infinitely scalable
¡Un hermoso y nítido SVG infinitamente escalable!

Este enfoque es quizás el más fácil, pero tiene sus problemas. Algunos navegadores, por razones de seguridad, restringirán lo que usted puede hacer con el SVG (con JavaScript, por ejemplo). Veamos alternativas.

El Enfoque de Etiqueta <object> 

El uso de la etiqueta <object> es similar, pero usetd apunta a la ruta del archivo así:

El resultado es precisamente el mismo:

svg-in-browser-html

Para los navegadores que no soportan SVG, puede incluso colocar una advertencia dentro del contenido del <object>, que se mostrará si el SVG no es possible:

Muchos diseñadores web coinciden en que este enfoque es la forma más fiable y flexible de usar SVG dentro de una página web en este momento.

El Enfoque En Línea

Hemos hablado sobre los orígenes XML de SVG, y si abre el archivo SVG con su editor de texto verá algo como esto:

svg-xml

¡Vaya, qué montón de tonterías! De hecho, una vez que haya superado el choque inicial, debería ser capaz de ver algo de sentido en el archivo. Podemos usar este código XML en línea, pegando el contenido directamente en nuestro archivo HTML.

Cuando se familiarice un poco más con la estructura XML de SVG, podrá recortar bits del archivo, lo cual ayuda al tamaño del archivo.

Siéntete libre de eliminar la línea <!DOCTYPE>, el comentario <!-- Generator: Adobe Illustrator e incluso la declaración <?xml si a usted le parece.

Todo lo que realmente necesita es una versión simplificada, que comprende sólo un par de etiquetas XML:

Nuestro SVG:

El Enfoque de Fondo CSS

Utilizando CSS (la sintaxis de estilo utilizada en combinación con HTML) también podemos dictar que nuestro archivo SVG actúe como una imagen de fondo de un elemento en nuestra página web.

Estamos llegando a los límites de este tutorial ahora, pero si está interesado en aprender los conceptos básicos de CSS, eche un vistazo a La Mejor Manera de Aprender CSS.

Podemos usar un archivo CSS separado, enlazándolo desde nuestro documento HTML, o podemos usar etiquetas <style> directamente dentro de nuestro HTML. directamente dentro de nuestro HTML. Nuestros estilos se verían así: Nuestros estilos se verían algo así:

Esta regla de estilo establece que nuestro archivo SVG debe mostrarse como fondo de nuestro elemento HTML.

Conclusión

¡Esa descripción cubre lo básico! En este tutorial cubrimos la creación de SVG y el uso básico de SVG para la web.

Si siempre se había preguntado qué es SVG, pero nunca supo por qué debería usarlo, espero que este tutorial le haya abierto los ojos. El potencial para este formato es enorme y está creciendo todo el tiempo gracias a la imaginación y la magia técnica de la gente en la web y las industrias gráficas.

Tenemos más tutoriales sobre animación e interacción con gráficos SVG en camino, así que ¡permanezca atento!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.