ALLONLINE STORIES · VOL. I · DIE VEKTOR-REBELLION
SVG
Das Bild wurde zu Code. SVG veränderte das Web, indem Grafiken als Geometrie statt als starres Pixelraster beschrieben werden. Dadurch können sie skalieren, gestaltet, durchsucht und interaktiv gemacht werden.
In die Vektor-Story eintauchen
Lente interactivo: Mueve el cursor / Toca la cuadrícula
PIXEL
Acto I · La Era del Bitmap
La web nació atrapada en una cuadrícula rígida.
Durante los primeros años de Internet, una imagen era un mosaico ciego: una tabla fija de celdas con colores asignados. Al agrandarla o verla en pantallas modernas, la ilusión desaparece y emerge la dura realidad de la pixelación.
Toda imagen tenía un límite físico.Y cada borde ampliado terminaba convirtiéndose en una escalera rota.
Acto II · 1998 · La Batalla de Formatos
Seis gigantes entraron. Ninguno gobernaría solo.
Microsoft empujaba VML. Adobe e IBM defendían PGML. Sun, Netscape y HP tenían sus propias visiones. En lugar de ceder el control a un monopolio privado, el W3C fusionó lo mejor de cada propuesta en un estándar abierto.
No ganó una corporación. Ganó la interoperabilidad de la web abierta.
Septiembre 2001 · La Especificación W3C
Los píxeles se convirtieron en instrucciones.
La pantalla dejó de ser un almacén de puntos estáticos para convertirse en un procesador de geometría. El navegador ahora dibuja trazos, curvas de Bézier, gradientes y transformaciones en tiempo real a la resolución nativa de cualquier pantalla.
Acto III · Anatomía del Documento
Una imagen que se lee como código fuente.
SVG no es un binario opaco; es un documento XML estructurado. Modifica los números del atributo d directamente en el editor o arrastra las manijas en el lienzo para esculpir la geometría en tiempo real.
● XML Editable en Vivo
<svg viewBox="0 0 240 240">
<path
d=""
fill="none"
stroke="currentColor" />
</svg>
💡 Haz clic y escribe nuevos números o arrastra cualquier nodo
P1: [35, 165]C1: [85, 30]C2: [155, 30]P2: [205, 165]
Acto IV · El Duelo de Resolución
El zoom es el tribunal supremo de la nitidez.
Mientras el mapa de bits estira sus celdas hasta deformarse en artefactos borrosos, el motor vectorial recalcula los vectores en el procesador gráfico a 60 cuadros por segundo, manteniendo bordes perfectos hasta el infinito.
Copia Rasterizada (.PNG)Los píxeles se agrandan y se rompen en escaleras.
100%
SVG Vectorial NativoLa geometría se recalcula infinita y nítida.
Acto V · La Matemática del Peso
El peso visual no tiene por qué costar megabytes.
Guardar una imagen 4K en mapa de bits exige registrar 16 millones de valores de color fijos. Un SVG solo necesita 4 coordenadas y una fórmula para lograr el mismo impacto con un 99.5% menos de datos transferidos.
Raster (@3x PNG)
2.4 MB
4,000 × 4,000 px de peso fijo estático, propenso a pixelarse en alta densidad.
Vector (.SVG)
12 KB
Infinitamente escalable con solo unos pocos kilobytes de código comprimible.
Diagnóstico Honesto · Límites del Formato
No toda imagen está destinada a ser geometría.
Una fotografía captura el caos continuo de la luz natural: ruido, texturas orgánicas y gradientes infinitos. Convertir cada degradado en un path genera un SVG pesado y lento de procesar. El buen diseño radica en elegir la herramienta correcta para cada problema visual.
Acto VI · El Despertar en el DOM
Una ilustración que se transforma en interfaz viva.
Al insertarse inline, el SVG deja de ser una imagen aislada para integrarse en el árbol de componentes. CSS puede estilizar sus sombras, JavaScript puede escuchar sus toques y la ilustración reacciona al usuario en tiempo real.
<svg>
<g id="icon">
<path id="curve" />
</g>
</svg>
clickhoverstate
01 · CSS Nativo
El estilo cobra vida propia.
Trazos, rellenos, sombras y transformaciones 3D pueden animarse directamente con CSS puro sin necesidad de exportar pesados archivos de video.
02 · Trazo Dinámico
Líneas que se dibujan en vivo.
Con stroke-dasharray y stroke-dashoffset puedes revelar progresivamente un trazo complejo, creando la ilusión de dibujo caligráfico en tiempo real.
03 · SVG Declarativo (SMIL)
Coreografía dentro del archivo.
La animación declarativa dentro del propio archivo permite que el gráfico viaje con su propia coreografía autónoma sin depender de librerías externas.
04 · JavaScript Reactivo
Geometría que escucha al usuario.
El cursor, el scroll o las APIs de datos pueden manipular los puntos de control en tiempo real, convirtiendo datos crudos en visualizaciones orgánicas.
Mueve el cursor o toca
8 Vértices BézierX: 0, Y: 0
Acto VII · Accesibilidad y Semántica
Visible no es suficiente: debe ser comprensible.
Una imagen sin semántica es un muro ciego para millones de personas. Gracias a los roles ARIA y las etiquetas <title> y <desc>, los gráficos vectoriales transmiten información precisa a los lectores de pantalla.
<svg role="img">
<title>Ingresos trimestrales</title>
<desc>El crecimiento se acelera en Q4</desc>
<g>...</g>
</svg>
<title>Ingresos trimestrales</title>
<desc>El crecimiento se acelera en Q4</desc>
<g>...</g>
</svg>
Lector de Pantalla (Audio Sintetizado)
“Ingresos trimestrales. El crecimiento se acelera en Q4.”
Perspectiva · El Estándar Vivo
Un formato maduro que no deja de evolucionar.
Tres décadas después de su nacimiento, SVG sigue siendo el rey indiscutible de los iconos, interfaces, animaciones y visualizaciones de datos en toda la web moderna.
No es infinito.
Es duradero.Un estándar sobrevive cuando miles de millones de documentos, navegadores y herramientas de diseño logran entenderse entre sí sin intermediarios.
Es duradero.Un estándar sobrevive cuando miles de millones de documentos, navegadores y herramientas de diseño logran entenderse entre sí sin intermediarios.
Von der Geschichte zur Anwendung
Nutze Vektoren, wenn die Idee geometrisch ist.
SVG ist am stärksten, wenn seine Struktur nützlich bleibt: skalierbare Formen, editierbare Attribute und browsernahes Verhalten. Optimiere und barrierefrei gestalte sie — und wechsle zu Raster, wenn das Bild wirklich aus Pixeln besteht.
AllOnline Stories · Zum Lernen gestaltet, zum Erstellen gebaut.