La mejor guía para SVG

Imagine que puede insertar una imagen en una página web, escalar esa página a cualquier tamaño y nunca perder calidad de imagen. Bien tu puedes. Es totalmente posible, simplemente no lo hemos estado haciendo todo lo que deberíamos.

Las imágenes con tamaños fijos, como archivos JPG, GIF y PNG, tienen su lugar en la Web, pero su naturaleza intrínsecamente estática entra en conflicto con la forma en que funciona la Web. A medida que avanzamos hacia diseños fluidos y receptivos, más irritante resulta tener que lidiar con imágenes que, fundamentalmente, no responden. Es frustrante más allá de toda creencia cuando me doy cuenta de que se está volviendo una mejor práctica crear y publicar varias versiones diferentes de cada imagen en su sitio.

Me doy cuenta de que hay buenas razones técnicas para esto. Pasará mucho tiempo antes de que alguien cree una fotografía infinitamente escalada, por ejemplo. Sin embargo, las fotos no son el todo y el final de todas las imágenes. Los gráficos vectoriales han recorrido un largo camino. Han recorrido un largo camino todavía.

Pueden ser más difíciles de adquirir, porque no todos los diseñadores web son ilustradores. Las fotos son abundantes y es fácil encontrar buenas imágenes de stock. Los gráficos vectoriales, por otro lado, a menudo son de baja calidad, o tal vez simplemente no puede encontrar el correcto. Contratar ilustradores es costoso.

Pero a medida que el soporte para gráficos vectoriales crece en línea, también lo hará su uso. Es hora de que todos aprendan cómo implementarlos en sus sitios web y utilizarlos de forma creativa. Imágenes tan receptivas como nuestros sitios web son el futuro.

Conoce el archivo SVG ...

¿Qué es SVG y por qué debería usarlo?

Muy bien, para los novatos entre nosotros, SVG significa Scalable Vector Graphics. Los archivos SVG son cosas bastante simples, en teoría. Son solo archivos de texto con un montón de XML adentro. Cada bit de información visual en un archivo SVG está definido por un código legible por el hombre, que luego es calculado y procesado por su navegador, software de gráficos, etc.

Esto significa que, aunque los archivos SVG no son tan complejos como, por ejemplo, una fotografía formateada como JPG, son infinitamente más flexibles. Se pueden modificar manualmente en un editor de texto. Pueden ser alterados por código, como JavaScript y CSS. Se pueden comprimir hasta tamaños ridículamente pequeños.

En otras palabras, están diseñados específicamente para ser utilizados junto con otras tecnologías web. Son perfectos para nosotros.

A finales de los años 90, Macromedia y Microsoft (y otras compañías) introdujeron VML , y luego Adobe (y otras compañías) presentaron PGML como posibles soluciones para imágenes vectoriales en sitios web al W3C (y posiblemente como alternativas al antiguo formato PostScript). El W3C dijo: "No, haremos lo nuestro; ¡pero gracias por las ideas! "El resultado fue el Grupo de trabajo SVG.

En septiembre de 2001, SVG 1.0 se convirtió en una recomendación oficial del W3C, y el resto es historia. Más o menos Internet Explorer quedó rezagado al adoptar el formato SVG, sin sorprender a nadie. Desde entonces, ha habido actualizaciones orientadas a dispositivos móviles, y más con aclaraciones.

Incluso ahora, el Grupo de Trabajo SVG está creando SVG 2 que incluirá una mayor integración de integración con cosas como HTML5, CSS y el formato de fuente WOFF.

Tiene soporte

La única versión de Internet Explorer de la que tienes que preocuparte ahora es IE8. Eso es. Todos los demás tienen soporte SVG más o menos completo. Sí, puede encontrar errores en ocasiones, incluso en los "buenos" navegadores, pero aún así vale la pena. No solo trabajar a su alrededor mantendrá sus habilidades para resolver problemas, sino que cuanto más usemos esta tecnología, más desarrolladores de navegadores la respaldarán.

Revisa caniuse.com para un análisis más profundo de qué funciona y qué no en qué buscadores.

Todo responde ... o debería ser

La tecnología de Internet ha ido mucho más allá de los sitios web estáticos que solíamos conocer. Es hora de que nuestras imágenes se pongan al día, simple y llanamente. Cuando tenga que hacer un ícono, use SVG. Cuando tenga que usar una ilustración, vaya a SVG si puede. Si desea un fondo de sitio web abstracto, pero aún simple, use SVG.

No soy fanático de la tecnología de pantalla Retina, especialmente porque no tengo una. No son celos Bueno, no son solo celos. El simple hecho es que las pantallas Retina se han ido y han hecho que servir imágenes sea mucho más complicado. SVG, al ser infinitamente escalable, puede ayudar a minimizar el problema.

Accesibilidad

Los usuarios con impedimentos visuales generalmente navegan por la web con todo lo que se amplía un poco. Cuando las imágenes normales se acercan, pierden calidad. SVG no hará eso, entonces ¿por qué no aprovecharlo para brindar a los discapacitados visuales una experiencia de calidad?

Puede ayudar a proteger su sitio web a futuro

La tecnología siempre está cambiando. Lo que está aquí hoy podría desaparecer en un momento, pero SVG probablemente estará presente por un tiempo, aún. Siempre que el W3C establezca los estándares mundiales de la industria, parece que SVG continuará siendo el estándar de facto para los gráficos vectoriales en el navegador. Úselo ahora, y sus sitios web se establecerán por un tiempo bueno, largo.

Tutoriales y tutoriales de SVG

Entonces estás convencido. SVG es genial, es el futuro, es hora de aprenderlo. Afortunadamente para todos, este es Internet. Simplemente sabe que la gente ha dedicado horas preciosas a horas creando material de capacitación gratuito para cualquiera que lo desee. Las personas que hacen ese tipo de cosas son las personas que hacen que Internet sea impresionante.

Luego, por supuesto, fuimos y pasamos horas buscando en los diversos tutoriales para encontrar los mejores que hay. Puedes agradecernos después. Por ahora, hay lectura por hacer!

Nota: Tenga en cuenta que los archivos SVG son todos código XML, por lo que muchos de estos tutoriales están enfocados en el desarrollador o simplemente tienen mucho código en ellos. Hemos incluido ambos tutoriales centrados en los aspectos básicos y en usos específicos y creativos para SVG, por lo que no debe omitir esta parte.

• Uso de SVG: Chris Coyier ha estado escribiendo tutoriales de CSS y HTML fáciles de entender durante años en css-tricks.com. Su Primer en SVG no es diferente Incluiré enlaces a muchas explicaciones y tutoriales básicos, pero aquí es donde comenzaría. Este tutorial incluye instrucciones básicas para los usuarios de Adobe Illustrator.
• Cómo comenzar con SVG: Sería negligente si no incluyese La contribución de WDD a la educación SVG. La siempre fantástica Sara Vieira cubre la creación de gráficos, la exportación, la limpieza del código, el traslado de atributos de presentación a archivos CSS y mucho más.
• Independencia de resolución con SVG: si está relacionada con la web, entonces Smashing Magazine probablemente tenga un artículo al respecto. Ellos cubren el conceptos básicos del formato SVG con su estilo habitual y atención al detalle.
• Gráficos vectoriales escalables (una serie de artículos): Hongkiat.com es otro recurso para la calidad de la web y el aprendizaje relacionado con los gráficos. En lugar de solo proporcionar un artículo extenso, publicaron una serie completa de ellos por Thoriq Firdaus. El inglés a veces es un poco escaso, pero las instrucciones aún son claras y fáciles de entender.
• Sara Soueidan: estilo y animación de gráficos vectoriales escalables con CSS: esto es un video de una presentación dado en CSSconf EU 2014. En él, Sara Soueidan proporciona una serie de consejos, trucos e incluso algunos hacks para aplicar estilos y animaciones a SVG en la web. Es media hora, así que póngase cómodo y conserve algo para tomar notas con la mano. Vale la pena tu tiempo.
• Exportación de SVG para la web con Adobe Illustrator CC: los usuarios de Adobe Illustrator deberían mira esto. Uno de los blogs de Adobe da instrucciones detalladas, y me refiero a muy detalladas, sobre cómo exportar archivos SVG para la Web. Aprenda a optimizarlos hasta el tamaño de archivo más pequeño para la Web.
• SVGBasics: Esto todo el sitio web está dedicado a enseñar a las personas cómo crear gráficos SVG desde cero con XML. Recomiendo esto para quién trata con el back-end real o incluso front-end de cualquier sitio web. Saber cómo funciona el código puede ser de gran ayuda para resolver problemas sobre la marcha.
• Tutorial de SVG por Jakob Jenkov: Otro desarrollador centrado conjunto de tutoriales, aquí. La gran diferencia? El autor incluyó versiones de video de cada sección. Si aprendes mejor al tener tanto visuales como audio para tus lecciones, este es un buen lugar para comenzar.
• La introducción simple a la animación SVG: el título lo dice todo. David Walsh explica cómo configurar tu Elementos SVG para animación, qué atributos usar para diferentes elementos, qué bibliotecas usar y más. No es una guía completa, pero le presentará los conceptos básicos necesarios para comenzar a animar.
• Una introducción a la animación SVG: Este tutorial entra un poco más de detalles sobre cómo hacer para animar tus objetos SVG. Además de eso, aborda algunos problemas comunes con los que te puedes encontrar al animar, por lo que vale la pena leerlos.
• Cómo: exportar varios iconos a archivos SVG desde Adobe Illustrator: ¿ crear un conjunto de iconos SVG en Illustrator? ¿Manteniéndolos todos en un solo archivo de Illustrator? Exportarlos a todos a sus archivos separados en un solo clic.
• Animar texto con rutas SVG: hace exactamente lo que dice en el título. Enciende tu animación tal vez usarlo en un logotipo. Ciertamente se ve lo suficientemente cool ...
• Animación de los iconos de SVG con CSS3 y JavaScript: uno de los mayores usos de SVG es para los iconos, y con buenas razones. Cree un archivo, úselo en cualquier lugar de su sitio o aplicación, en cualquier tamaño. ¿Qué más podrías pedir? Este tutorial le muestra cómo animar esos íconos en el vuelo estacionario.
• Creación de una infografía SVG escalable: las infografías son una de las formas favoritas de Internet para consumir información en estos días. Por qué no hacerlos infinitamente escalables? Agregue un poco de animación, y muy bien podría volar algunas mentes.
• Hacer un botón SVG HTML Burger: di lo que quieras sobre el botón hamburguesa, probablemente no vaya a ninguna parte. Usted también puede usa SVG y animación para que sea el botón de hamburguesa más brillante y genial que puedas. Éste cubre cómo animar caminos y trazos para hacer que un botón se convierta literalmente en otro, así que échale un vistazo.
• Ejemplos y tutoriales de Snap.svg: Esta es una guía a utilizar la biblioteca JavaScript de Snap.svg (consulte la sección "Herramientas" a continuación) a continuación. Está diseñado para ayudarlo a comenzar a crear elementos SVG en JS y animarlos, hacerlos interactivos, etc.
• Introducción a Raphaël.js: Raphaël.js es una de las grandes bibliotecas de JavaScript relacionadas con SVG, y Este artículo te enseña cómo usarlo. (Nuevamente, vea la sección de Herramientas a continuación).
• Icono de SVG animado: a la gente parece gustarle mucho los íconos animados, por lo que también puedes aprender todos los enfoques para hacerlos lo más que puedas. aquí Vemos la biblioteca Snap.svg en acción una vez más, a medida que el autor crea, y luego anima, un botón de "reproducción" del reproductor multimedia.
• Recortar en CSS y SVG: la propiedad y el elemento de la ruta de recorte: aquí hay una buen artículo largo acerca de cómo usar el recorte SVG para hacer imágenes dentro de las formas, y las imágenes dentro de un texto enorme. Puede considerar usarlo para crear grandes titulares que sean amigables con los motores de búsqueda porque los robots de los motores de búsqueda pueden leerlos.
• Haciendo que SVG responda con CSS: aunque los archivos SVG son infinitamente escalables, los métodos utilizados para colocarlos dentro de una página web a veces pueden causar problemas. Este tutorial de codrops explica cómo solucionar los diversos problemas que puede encontrar.
• Efecto Shaper Hover con SVG: crea un aspecto suave y con clase efecto de vuelo animado para vistas previas de imágenes. ( Mira la demostración. )
• Un manual de SVG para los navegadores de hoy del W3C: no es el último, y ciertamente no menos importante, tenemos un recurso proporcionado por las personas que crearon el formato SVG completo en primer lugar: el W3C. No es un tutorial básico o una introducción. De acuerdo con el prefacio, fue creado para programadores profesionales, diseñadores gráficos con "una fuerte inclinación técnica" y otros a los que no les importa llegar a lo esencial.
• Tutorial SVG de MDN: al igual que SVGBasics, este es un lugar extenso conjunto de tutoriales, proporcionado por Mozilla Developer Network. Sin embargo, por extenso que sea, el tutorial en sí se considera "en desarrollo". Por ejemplo, esto se puede ver actualmente en la página "Filtros", que está vacía. Según la página en sí, el tutorial se encuentra en una etapa temprana de desarrollo. Si puedes, ayuda ayudando y escribiendo un párrafo o dos. Puntos extra por escribir una página completa.

Herramientas SVG

Una de las muchas ventajas de la naturaleza abierta de SVG es que cualquiera puede crear software para ello. No hay restricciones de licencia ni tarifas que pagar, solo un estándar abierto para que las personas lo usen. Como era de esperar, muchos desarrolladores han hecho exactamente eso.

Herramientas para crear y usar el formato SVG abundan. Van desde grandes paquetes de software que incluyen la opción de exportar SVG como una idea de último momento, hasta aplicaciones de dibujo vectorial que usan SVG como su formato principal, y más.

Una búsqueda rápida en Google de "Herramientas SVG" arroja "Aproximadamente 37,000,000 resultados", para que sepa que hay mucho por ahí.

¿Dónde, entonces, deberías comenzar?

Aplicaciones Premium

Los grandes nombres en la creación de gráficos son compatibles con SVG. Ilustrador Adobe,Corel Draw, incluso varios productos de Xara - Sí, Xara todavía es una cosa - todos pueden importar, editar y guardar archivos en el formato. (Sin embargo, se sabe que Illustrator ha puesto algunas cosas raras en los archivos SVG, por lo que debe tener cuidado con la configuración de exportación).

Inkscape

Si aún no está usando un paquete de gráficos vectoriales, Inkscape es un lugar fantástico para comenzar Creado en 2003 como una bifurcación de otro proyecto de código abierto llamado Sodipodi (que se basó en otro proyecto de OSS), Inkscape se ha convertido en el estándar para el software gratuito de gráficos vectoriales multiplataforma. No es tan completo como Adobe Illustrator, pero es más que suficiente para la mayoría de los proyectos vectoriales.

Serif DrawPlus Starter Edition

Serif es una empresa que crea una buena creación de gráficos y software de autoedición. Todas sus principales ofertas de software vienen con "Starter Editions" gratuitas, y su aplicación de dibujo vectorial no es una excepción.

Sin embargo, no dejes que la "Edición de principiante" te engañe. Puede que no tenga todo lo que hace la versión pro, pero puede hacer el trabajo en la mayoría de los casos. A menos que sea ilustrador de oficio, esta aplicación puede satisfacer sus necesidades ... siempre que esté en Windows. Lamentablemente, no es multiplataforma. Además, es necesario registrarse para la descarga.

Karbon

Parte de la suite de Office Calligra, que es principalmente para Linux, Karbon es un editor de gráficos vectoriales con todas las funciones. Tiene todas las herramientas básicas, y algunas cosas más. La instalación en Mac y Windows es difícil actualmente, aunque no imposible.

Diseño de impresión

El nombre suena como un paquete de software de los 90, lo sé, pero en realidad es bastante nuevo. De hecho, es el sucesor de la vieja aplicación de ilustración sK1, que ha sido descontinuada. Diseño de impresión se encuentra actualmente en la etapa de "vista previa" y tiene versiones de Linux y Windows. Aún no está listo para su uso en producción, pero es un proyecto que vale la pena ver.

SVG-edit

El nombre es un poco en la nariz, tal vez, pero el software es más que capaz. SVG-edit Está basado completamente en tecnologías web, específicamente HTML5, JavaScript y CSS. Esto significa que no hay funcionalidad del lado del servidor. Además, es de código abierto, lo que significa que puede descargarlo, colocarlo en su propio servidor o incluso usarlo desde el escritorio.

Que tiene una lista de características el tiempo suficiente para que muchas aplicaciones de escritorio sean celosas y se ejecuten más rápido que la mayoría de ellas, así que denle un giro.

Janvas

Janvas es la única aplicación basada en la web en esta lista que no es estrictamente gratuita. Hay un período de prueba de treinta días, después del cual una suscripción cuesta 26 euros por año. Si ninguno de los otros editores SVG basados ​​en la web te hace feliz, sin embargo, en realidad podrías considerarlo.

Las herramientas de dibujo son avanzadas y lo suficientemente familiares, cada variable se puede editar en la barra lateral y puede guardar sus documentos en Google Drive. Puede crear plantillas, colaborar en el dibujo de documentos e incluso incluir archivos CSS y JS creados para interactuar con los gráficos.

En general, es una oferta sólida.

Mondrian

Pequeña. Pulcro. Sencillo. Mondrian es otro más fuente abierta ofreciendo, y es mucho más pequeño que la mayoría. Ni siquiera tiene una herramienta de texto ... pero hace dibujos simples muy bien. Puede abrir archivos desde el disco duro o una URL, tomar un código incrustado para su sitio web, o simplemente guardar su dibujo como SVG o PNG. Puede que no sea tan avanzado como otras aplicaciones, pero se siente agradable de usar, y la herramienta de pluma se siente natural.

Dibujar SVG

Dibujar SVG es otro editor SVG basado en web con todas las características que siempre deberías necesitar. Su punto más fuerte parece ser la gran velocidad con la que carga y dibuja cosas. Lamentablemente, sin embargo, la interfaz de usuario tiene graves fallas. Aún así, está allí y funciona, en caso de que alguna vez lo necesite.

Bibliotecas SVG

¡Los desarrolladores se regocijan! Tenemos algunos enlaces aquí para ti también. Después de todo, SVG no es solo otro formato de gráficos. Es código. Es un código que puede vincularse o incorporarse. Se puede interactuar y cambiar sobre la marcha. ¡Con matemáticas!

Snap.svg

Chasquido es una biblioteca JS para generar e interactuar con SVG. Está diseñado para navegadores modernos. Sí, eso significa que solo es compatible con IE9 + ... pero si los navegadores más antiguos no son de su incumbencia, vaya por ello.

Raphaël

Raphaël, a diferencia de Snap, es compatible con navegadores más antiguos. De hecho, puede funcionar con IE6 +, Safari 3+ y Chrome 5+. Si está desarrollando algo para un sistema empresarial donde los usuarios pueden estar en máquinas más antiguas, por ejemplo, Raphaël podría ser su mejor opción.

jQuery SVG

Como SVG y jQuery? No estoy realmente sorprendido. Es posible que jQuery haya perdido algo de la atención que alguna vez tuvo, pero sigue siendo una biblioteca de referencia para muchos de nosotros.

jQuery SVG, entonces, es muy posiblemente el plugin que estás buscando. Tiene funciones para animaciones, hacer gráficos e incluso extensiones. Así es, extensiones para un plugin. El soporte del navegador es IE9 +, pero las versiones anteriores de IE se pueden usar con los complementos de navegador apropiados instalados.

Sin embargo, no dependería de los usuarios que tengan esos complementos.

SVGMagic

SVGMagic es una solución instantánea, jQuery, para navegadores antiguos (IE 7 y 8). En lugar de crear manualmente imágenes de respaldo para cada uno de los archivos SVG que utiliza, este complemento puede generarlos sobre la marcha. Maneja bien las imágenes de fondo también.

¿Cómo hace algo de esto? Detecta si el navegador del usuario puede manejar SVG o no. Si es así, se va a dormir. Si no, contacta con un script PHP del lado del servidor y le dice que cree un archivo PNG de las imágenes SVG en cuestión con las dimensiones necesarias.

Una vez hecho esto, el script PHP envía las URL a estas imágenes temporales de retorno al plugin jQuery, y las URL predeterminadas son reemplazadas. Obviamente, esto lleva tiempo, por lo que puede especificar opcionalmente que se muestre una imagen de marcador de posición mientras se lleva a cabo la conversión.

Una advertencia: actualmente no puede manejar demasiadas imágenes a la vez. No querrá utilizar esta técnica en páginas con más de unos pocos archivos SVG.

SVG.JS

Por último, aquí hay una opción para los contadores de bytes. SVG.JS pesa solo 11.8kbs cuando se aplica gzip. A pesar de su pequeño tamaño, admite una cantidad impresionante de características (como se enumeran en la página del proyecto):

• Animaciones sobre tamaño, posición, transformaciones, color
• Extensión indolora gracias a la estructura modular
• Varios plugins útiles disponibles
• Api unificada entre tipos de formas con movimiento, tamaño, centro
• Vinculando eventos a elementos
• Soporte completo para máscaras de opacidad y trazados de recorte
• Trazados de texto, incluso animados
• Grupos de elementos y conjuntos
• Gradientes dinámicos

Leer el documentación para más información.

Stock SVG

No todos son ilustradores. Al menos, ciertamente nunca he sido bueno en eso. Por lo tanto, las ilustraciones de valores se convierten en un recurso invaluable. Sin embargo, puede ser difícil encontrar cosas buenas. Lo que no parece que las imágenes prediseñadas de Microsoft a menudo son de alcance limitado o costosas.

No pierdas la esperanza, sin embargo. Hay muchas cosas que son de buena calidad. Si no se adapta perfectamente a tus necesidades, bueno, es arte vectorial. Lo más probable es que pueda ajustarse para satisfacer sus necesidades si tiene conocimientos básicos de software de gráficos vectoriales.

Sin embargo, SVG puede hacer más que simples ilustraciones. También puede crear patrones, grandes fondos de fantasía que no consumen ancho de banda, y más. Echemos un vistazo a lo que las personas han hecho para el resto de nosotros:

SVG Clipart en openclipart.com

SVG, como formato abierto, tiene muchos entusiastas de código abierto como fanáticos. Como resultado, es uno de los principales formatos utilizados en lo que podría ser la colección más grande de imágenes prediseñadas gratis allí afuera.

Y mucho de esto es clipart-ish. Y mucho de su trabajo amateur. Sin embargo, hay algunos gráficos de calidad, si miras. Oye, es gratis.

SVG Stock

SVG Stock es un sitio pequeño, con una colección relativamente pequeña pero excelente. Se trata principalmente de íconos y maquetas de dispositivos, pero todos son de alta calidad. Si necesitas cualquiera de esas dos cosas, comienza aquí.

Recursos de SVG en deviantart.com

Ah DeviantArt, esa comunidad gigante sigue siendo fuerte. Dirígete a la categoría de imágenes de stock y busca SVG (o haz clic en el enlace de arriba). De nuevo, la calidad variará, pero hay cosas buenas allí si tienes tiempo para mirar.

Galería de patrones SVG

Una pequeña galería llena de Patrones basados ​​en SVG. Está diseñado como una vitrina de exposición, pero los archivos fuente están ahí para su conveniencia.

Patrones SVG de svgeneration.com

svgeneration.com incluye muchos patrones SVG para su uso. El sitio viene con opciones de edición para cada patrón, y puede editar el código directamente en el sitio para ver sus cambios en acción. No solo es un gran recurso para los patrones prefabricados, sino que también se puede aprender mucho sobre cómo se fabrican.

SVG Clipart

El arte en este sitio es claramente estilo de dibujos animados anticuado. Francamente, no será lo que todos buscan, pero está ahí para aquellos que quieren ese toque clásico en sus ilustraciones.

SVG Studio

SVG Studio está ofreciendo miles de ilustraciones con una sensación claramente moderna. Puede comprarlos en pequeños subconjuntos o descargar todo su catálogo a la vez. Eso le costará 500 USD, lo que, para 3000 ilustraciones, no es tan malo.

SVG en los sitios de stock más grandes

No puedo decir mucho sobre el arte ofrecido en cada sitio, porque varía mucho según el colaborador sin un estilo general. Los nombres más grandes son istockphoto.com,shutterstock.com,bigstockphoto.com, y canstockphoto.com.

Inspiración SVG

Podemos leer todas las presentaciones que queremos y seguir todos los tutoriales. Podemos convertirnos en expertos en todos y cada uno de los aspectos de la especificación de SVG, y aún así podemos ser increíblemente aburridos al respecto. Debemos analizar todo el potencial de cualquier tecnología para aprovecharla al máximo.

Sin embargo, a menudo es más fácil decirlo que hacerlo. A menudo es útil contar con un punto de referencia, algo increíble de ver, y mostrarnos exactamente qué tipo de cosas increíbles podemos hacer con lo que tenemos. Eso es lo que les gusta a los sitios Webcreme hizo para el diseño web en general. Eso es lo CSS Zen Garden, y todas las galerías de CSS que vinieron después, hicieron diseños de CSS.

Hasta el momento, no he encontrado ningún sitio de la galería dedicado a lo que se puede lograr a través de SVG combinado con otras tecnologías web, y eso podría ayudar. Mientras tanto, aquí hay un escaparate de cosas increíbles que hemos encontrado:

Anuncio de visualización instantánea

Este ejemplo es parte del Snap.svg colección en CodePen. ¿Necesita un ejemplo perfecto de cómo SVG podría utilizarse para revolucionar los anuncios en línea? Eso es todo.

Piénselo: algunas empresas publicitarias siguen vendiendo anuncios según el tamaño de píxel. Esto no tiene sentido en la era de la variación infinita en los tamaños de pantalla, y las pantallas Retina para arrancar. Hasta que se nos ocurra un mejor sistema que los anuncios visuales, SVG al menos podría ayudarnos a hacer que los anuncios se ajusten a la naturaleza receptiva del diseño web.

Vea la pluma Anuncio de visualización instantánea por CJ Gammon ( @cjgammon ) en CodePen .

Interfaz de escritorio Jtop

La Mozilla Developer Network, una entidad con la que me encuentro cada vez que investigo tecnologías web en general, también ha producido algunas cosas interesantes hechas con SVG. Por ejemplo, fueron y hicieron una interfaz de escritorio completa basado completamente en tecnologías web como HTML5, JS, SVG y CSS. Es rápido, personalizable, y casi me gustaría que fuera parte de un sistema operativo real.

Un tiempo de reflexión

Traído a nosotros por ShinyDemos (que a su vez es traído a nosotros por la gente de Ópera ) Un tiempo de reflexión Literalmente superpondrá un reloj a través de una transmisión en vivo desde su cámara web. Bueno, si le das tu permiso, y de hecho tienes una cámara, de todos modos. Pero el punto es que muestra cómo las máscaras SVG pueden superponerse en casi cualquier cosa.

oblurlay

Mediante una combinación de CSS, SVG y jQuery, oblurlay crea exactamente lo que su nombre sugiere: una superposición borrosa, estilo iOS. Es un plugin de jQuery, por lo que la implementación no es difícil, y muestra cómo los filtros SVG se pueden aplicar a todo tipo de cosas, no solo a los objetos SVG.

Demostraciones de Codrops

Codrops (mencionado anteriormente en la sección de tutoriales) ha producido un buen número de demos fascinantes, impresionantes y simplemente bonitas para mostrar lo que SVG puede hacer. Cada uno merece su propia sección en este artículo, pero hay tantos que los incluyo en uno. Si no observa nada más de esta sección de "Inspiración", mire estos. Vea las demostraciones y descargue los archivos fuente. Entonces vete a agradecer a los chicos de Codrops. Ellos lo merecen.

Nota: no todos estos están enfocados en SVG, pero todos usan gráficos SVG de alguna manera.

Efectos de carga de página : un conjunto de efectos de carga de página creativa que utilizan animaciones SVG con Snap.svg. La idea es mostrar una superposición con una animación de forma interesante mientras se carga contenido nuevo.

Ideas para sutiles efectos de desplazamiento : algo de inspiración creativa y sutil efecto de desplazamiento usando técnicas modernas de CSS, incluyendo traducción 3D y pseudo elementos. También usan SVG. Ve a ver el manifestación para el segundo conjunto de efectos.

Animación de dibujo SVG : un pequeño experimento que explora el uso de animaciones de dibujo de líneas SVG para preceder a la aparición de gráficos o elementos del sitio web, simulando la carga de ellos.

Efectos de menú fuera de la lona : algo de inspiración para los efectos y estilos de menú fuera de la lona usando transiciones CSS y animaciones de ruta SVG.

Tooltip Styles Inspiration : una pequeña colección de diversos estilos y efectos de descripción emergente para su inspiración. Usando CSS transforma, border-radius y SVG shapes podemos crear tooltips de aspecto moderno e interesante.

Estilos de notificación Inspiración : algunas ideas y efectos simples para notificaciones web discretas. Se utiliza un pequeño script para mostrar algunos estilos y se usan animaciones CSS para los efectos.

Inspiración para elementos personalizados seleccionados : alguna inspiración para diseñar una versión personalizada del elemento seleccionado. Hay muchas posibilidades y hoy estamos explorando algunas ideas sobre cómo dejar que el usuario seleccione una opción de estilo.

Inspiración para los estilos de anclaje en línea : algo de inspiración para estilos de anclaje en línea creativos y modernos y efectos de desplazamiento usando diferentes técnicas como transiciones de pseudo-elemento y SVG.

Estilos de navegación con flecha : algo de inspiración para los estilos de navegación de flecha y los efectos de desplazamiento usando iconos SVG para las flechas, y transiciones CSS y animaciones para los efectos.

Efecto Wobbly Slideshow : las diapositivas de esta presentación se tambalean a medida que se mueven. El efecto se basa en la toma Dribbble de Sergey Valiukh y se hizo usando Snap.svg y rutas morphing SVG ... Tenga en cuenta que esto es muy experimental y solo se prueba en las últimas versiones de navegadores modernos.

Envolviendolo

SVG, aunque todavía no es uno de los formatos de imagen más utilizados, está bien documentado, cuenta con un gran respaldo y es una gran parte del futuro de Internet. Si aún no lo está usando como parte de su proceso de diseño, es probable que sea hora de comenzar.

Foto principal, imagen de vector transparente a través de Shutterstock.

• ← 10 plugins gratuitos de WordPress para febrero de 2015
• 21 herramientas de colaboración para agilizar su trabajo en equipo →