Share
Los gráficos vectoriales escalables (SVG) son un formato de imagen vectorial que comenzó en 1998. Siempre se desarrolló pensando en la web, pero solo ahora la web 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 llevar SVG de Illustrator al navegador web..
Nota: Estoy utilizando Adobe Illustrator CC para demostrar cosas aquí, pero otras versiones tienen opciones y herramientas similares (si no idénticas).
El formato SVG fue desarrollado y continúa siendo mantenido por el World Wide Web Consortium (W3C). El W3C está compuesto por un grupo de personas inteligentes que se esfuerzan por estandarizar la web, lo que la convierte en un lugar abierto y accesible para todos..
SVG es bueno para la web, especialmente en estos días, ya que evita el problema de la resolución de pantalla. No importa qué tan densos sean 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 el caso de las imágenes rasterizadas..
El tamaño del archivo siempre es un problema en la web (nadie quiere esperar a que se cargue una imagen de 5Tb en el navegador a través de una conexión móvil), por lo que SVG es un formato vectorial simplificado. Está construido con XML, y se elimina una gran cantidad de "cosas" innecesarias, lo que da un archivo relativamente ligero.
Por último, dados estos bloques de construcción XML, el contenido de un archivo SVG se puede manipular y diseñar como cualquier otro elemento en una página web. Se pueden aislar partes dentro de un SVG, se pueden cambiar los colores, se puede alterar el peso del trazo, la transparencia, incluso podemos aplicar ciertos filtros (como desenfoque), incluso animar - todo a través de CSS y JavaScript.
Las ventajas de la calidad de línea nítida y la posibilidad de manipular un elemento gráfico se explican por sí mismas, pero ¿dónde puede aprovechar esto? Aquí hay una lista rápida de situaciones donde SVG entra en su propio:
Gráficos de cada día: Si está utilizando un gráfico en un sitio web, considere si podría ser o no 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, piénselo..
Iconos: Los sitios web de todo el mundo están salpicados de iconos; se entienden universalmente (cuando se usan correctamente) y acortan el tiempo que tarda un usuario en procesar una interfaz. Los iconos en estos días a menudo se aplican a sitios web a través de fuentes web, pero también se pueden inyectar en una página como SVG. Iconos perfectamente limpios y crujientes para todos, encantador.
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 llanamente. Los colores pueden ser precisos, la calidad de la línea es inmaculada y el mismo archivo se puede usar repetidamente en un sitio web, pero se modifica según las circunstancias. Perfecto.
Reconoce este logo? Decoración: No necesito vender esta idea a un grupo de artistas vectoriales, ¿verdad??
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. ¿Te imaginas los botones que se animan cuando pasas sobre ellos? ¿Iconos que te dan un feedback personalizado directo? El cielo realmente es el límite..
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..
Vamos a trabajar con una imagen muy básica, para demostrar lo que hace SVG..
Abre Illustrator, comienza un nuevo documento (Archivo> Nuevo documento), asígnele un nombre si lo desea y configure la mesa de trabajo en 300 x 300 px.
En este punto, hace poca diferencia en lo que usas como tu vector de demostración, pero ve por algo relativamente simple. He usado el glifo "No se permiten piratas", disponible de forma gratuita con la fuente "Webdings" (¡nunca pensé que lo usaría para nada!)
Ve a la Glifos panelTipo> Glifos) luego seleccione la fuente "Webdings" para navegar por los diversos caracteres disponibles.
Con el Herramienta de texto seleccionado, haga clic en la mesa de trabajo, luego haga doble clic Tu glifo de elección para hacer uso de él..
Ahora vamos a convertir este glifo tipo en contornos.
Nota: SVG realmente admite objetos de texto, pero para demostrar cosas en un nivel fundamental, optaremos por rutas.
Seleccione el glifo, usando el Herramienta de selección (V):
Luego ve a Tipo> Crear Contornos.
¡Súper! Ahora tenemos un objeto vectorial basado en la ruta.
Para guardar este documento como SVG, vaya a Archivo> Guardar, o Archivo> Guardar como ... En el diálogo que aparece, elige una ubicación, dale un nombre de archivo (si aún no lo has hecho) y, crucialmente, selecciona SVG como el formato:
Luego se te presentará otro diálogo, esta vez con algunas opciones de SVG.
En verdad, ignorar estas opciones en este punto te servirá perfectamente. Los valores predeterminados son todos como los querrías en circunstancias normales.
Cubriremos algunas de estas opciones un poco más tarde, pero por ahora, pulsa DE ACUERDO.
Tenemos un archivo SVG!
Nos saltamos las opciones de SVG porque realmente no necesitas prestarles mucha atención. Sin embargo, por el bien de ser minucioso, echemos un vistazo.
Para empezar, podríamos haber elegido dos posibles formatos SVG en el diálogo de guardar.
SVGZ es un comprimido muy (Con cremallera, Supongo) versión de SVG. Proporciona un tamaño de archivo más pequeño, pero convierte el XML dentro del propio archivo en tonterías, lo que nos impide manipular los vectores a través de CSS y JavaScript si queremos.
El panorama siempre cambiante de la web y el desarrollo continuo de los estándares web significan que SVG siempre está creciendo. Puedes ver esto gracias a la primera opción al guardar un archivo SVG: Perfiles SVG. Las opciones de perfil actualmente son así:
Significan (más o menos) lo siguiente:
Pronto podremos 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 los vectores simples se adhiere a la configuración predeterminada actual de SVG 1.1 y sus gráficos estarán bien, siempre que sea posible, en la web.
Los archivos SVG pueden contener mucho más que solo rutas vectoriales. Los objetos de texto son uno de esos ejemplos, y la Fuente La opción le permite determinar cómo se tratan los objetos de texto..
Parte de la opción de fuente implica Subconjunto. Esto es relevante solo si ha elegido no convertir su texto a contornos.
El subconjunto incrusta los detalles de los caracteres en el archivo SVG, permitiendo que el archivo muestre las 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 se incluirán.
Mientras estamos en el tema de la inserción, las últimas opciones restantes aquí también pueden tener un impacto en el tamaño del archivo.
De la misma manera que con las fuentes, los archivos SVG pueden contener imágenes de mapa de bits. Donde ves Ubicación de la imagen elija "incrustar" para que las imágenes se incluyan dentro del archivo en forma de código, o elija "enlace" para que las imágenes sean simplemente referenciadas. Esto funciona de manera muy similar a la colocación de 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 se mantendrán los detalles de todas las capas, filtros y efectos, símbolos, etc. Nuevamente, mantenga esto sin marcar si su SVG está listo para la producción y el tamaño del archivo es importante.
Nota: Se recomienda mantener un archivo .AI en funcionamiento para usarlo en la edición..
Finalmente, los tres botones al pie del diálogo de opciones hacen lo siguiente:
Si no estás acostumbrado a trabajar directamente con la web, HTML, navegadores, todo eso, hay algunas cosas que debes tener en cuenta en este momento..
En primer lugar, vamos a demostrar que su navegador puede manejar este formato perfectamente bien. Botón derecho del ratón su nuevo archivo SVG brillante y elija abrirlo con su navegador web estándar:
Los navegadores más antiguos, como Internet Explorer 8 y versiones anteriores, no son compatibles con el formato SVG y, lamentablemente, no funcionan.
Pero mientras use un navegador moderno, el archivo SVG se abrirá y mostrará sin ningún problema.
Lo primero que hay que tener en cuenta es que el archivo SVG ha conservado las dimensiones que originalmente le dimos. Nuestro SVG se abrió a 300 x 300px, el Artboard dictó los límites exteriores y el icono de pirata se coloca como debería estar en el centro.
Hasta ahora hemos creado un archivo SVG y lo hemos abierto en un navegador para verificar 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 tiene por qué ser más complejo que un archivo vacío, con el .html extensión de archivo, guardada desde 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, consulte la Mejor manera de aprender HTML en algún momento..
Aquí está mi archivo, abierto en TextEdit para Mac OS X, pero puede usar cualquier texto o editor de código que desee.
Este archivo se abrirá en un navegador web simplemente como está, pero necesitamos agregar algún código HTML de "marca" para incrustar el SVG. Hay algunos enfoques para hacer esto.
Accentsconagua
![]()
En primer lugar, podemos usar una etiqueta de imagen (que podría estar acostumbrado a usar para archivos JPG, PNG, etc.) que apunta a la ruta exacta del archivo dentro de la src = "" atributo. Pega este fragmento en tu archivo HTML:
Suponiendo que la ruta del archivo sea correcta, su página HTML se abrirá en un navegador como este:
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 que el SVG sea más grande de inmediato, usando el ancho = "" atributo:
Este enfoque es quizás el más fácil, pero tiene sus problemas. Algunos navegadores, por razones de seguridad, restringirán lo que puede hacer el SVG (por ejemplo, con JavaScript). Veamos alternativas.
Utilizando la La etiqueta es similar, pero apuntas a la ruta del archivo de esta manera:
El resultado es precisamente el mismo:
Para los navegadores que no son compatibles con SVG, incluso puede colocar una advertencia dentro del contenido de , para ser mostrado si el SVG no puede ser:
Muchos diseñadores web coinciden en que este enfoque es la forma más confiable y flexible de usar SVG en una página web en este momento.
Hemos hablado sobre los orígenes XML de SVG, y si abre el archivo SVG con su editor de texto verá algo como esto:
Wow, que carga de tonterias! En realidad, una vez que hayas superado el shock inicial, deberías poder ver algo de sentido entre ellos. Podemos usar este código XML en línea, pegando los contenidos directamente en nuestro archivo HTML.
Cuando se familiarice un poco más con la estructura XML de SVG, podrá recortar bits del archivo, lo que ayuda al tamaño del archivo..
Siéntase libre de eliminar el línea, la