Probablemente no se sorprenderían si les dijera que es bastante bueno para los íconos y los sistemas de íconos. Los sistemas de iconos SVG pueden, y tal vez deberían ser bastante fáciles. Soy fanático de simplemente alinear esos retoños, particularmente cuando son bastante simples.
¿Pero qué más?
¡Logos es un ejemplo clásico! Mucha gente sumerge los dedos de los pies de esta manera.
No tiene que alinear el SVG si no lo desea. podría ser un <img> o background-image también.
Sin embargo, estas son cosas realmente simples. En esencia, SVG es simplemente un formato de imagen basado en vectores capaz de casi cualquier cosa. Mucho más arriba en la escala de complejidad, Bustle crea diagramas de flujo increíblemente geniales usando SVG.
Intenta hacer clic en esos diagramas de flujo y ver todas las animaciones maravillosas. SVG es muy flexiblemente escalable. En ese ejemplo anterior, parte de lo que está sucediendo allí es una animación de viewBox específicamente.
Hablando de diagramas interactivos, casi cualquier cuadro o gráfico que verá es SVG o comenzó su vida de esa manera. Por ejemplo, la increíblemente popular biblioteca d3.js está basada en SVG. Cualquier cosa creada con d3 es SVG. De hecho, la mayoría de las bibliotecas de gráficos se basan en d3. Aquí está Highcharts:
Sin embargo, los gráficos son muy comerciales. ¡¿Qué hay del arte?! Por supuesto, SVG es excelente para el arte. Las herramientas creativas para artistas, como ilustradores que trabajan en sus elegantes tabletas Wacom, que trabajan en Adobe Illustrator, pueden exportar su trabajo y mostrarlo como SVG.
También hay bibliotecas de animación como GSAP que son excelentes para ayudar a animar SVG y permiten a los artistas vectoriales dar vida a sus creaciones:
Vea el Pen Li´l Vikings de Fabio (@FabioG) en CodePen.
Greensock tiene algunas características pagas bastante dulces que tal vez quieras ver.
¡SVG es genial para pequeños diagramas demostrativos! Aquí hay una pequeña cosa de Rachel Nabors:
Vea la ilustración SVG de Pen Key Press con animación CSS de Rachel Nabors (@rachelnabors) en CodePen.
O juegos! Aquí hay uno de Sarah Dranser:
Vea el juego Pen React – Elephant Taco Hunt de Sarah Drasner (@sdras) en CodePen.
¿No es lo suficientemente práctico para ti? ¿Qué tal el hecho de que un solo archivo SVG pueda encapsular todos los scripts y estilos necesarios para un banner publicitario interactivo? Aquí está Chris Gannon explicando:
Y un anuncio de demostración que hice una vez:
Vea el anuncio SVG de Pen Wufoo de Chris Coyier (@chriscoyier) en CodePen.
Los mapas son otro caso de uso sorprendente. amCharts tiene muchos gratuitos para ti, sin mencionar que a Wikipedia le encanta el formato SVG, especialmente para cualquier cosa geográfica.
¿Quieren más? Tengo una gran colección de ejemplos de cosas increíbles que se pueden hacer con SVG.
¿Quieres empezar a aprender SVG? Tengo el libro justo para ti:
Ahora es el momento de comprar también, porque durante los próximos dos días el 25% de las ganancias van a RAICES:
El Proyecto de Representación Legal, Defensa y Educación proporcionará representación universal para los niños no acompañados liberados en Texas. El año pasado, hubo más de 13,000 niños que no fueron representados en la corte de inmigración de Texas.
👍