CRUD ¿Qué es?

CRUD ¿Qué es?

Cuando empiezas a aprender programación, desarrollo web o bases de datos, hay conceptos que aparecen una y otra vez. Uno de ellos es CRUD, una palabra breve que resume una parte esencial del funcionamiento de muchísimas aplicaciones digitales.

Cada vez que creas una cuenta, editas tu perfil, consultas un listado de productos, publicas una entrada o eliminas un comentario, estás utilizando operaciones CRUD, aunque no las veas directamente. Por detrás, la aplicación está creando, leyendo, actualizando o eliminando información en una base de datos.

En este artículo vamos a ver qué es CRUD en informática, cuáles son sus operaciones básicas, cómo se relaciona con las bases de datos y por qué es tan importante en el desarrollo de aplicaciones web.

Qué significa CRUD en informática

CRUD es un acrónimo formado por cuatro palabras en inglés: Create, Read, Update y Delete. En español, estas operaciones se traducen como crear, leer, actualizar y eliminar.

Estas cuatro acciones representan las operaciones básicas que se pueden realizar sobre los datos dentro de una aplicación. Dicho de otra forma, CRUD describe las funciones mínimas que necesita un sistema para gestionar información.

Por ejemplo, imagina una aplicación sencilla para organizar tareas. Para que sea útil, debería permitirte:

  • Crear una nueva tarea.
  • Consultar las tareas existentes.
  • Modificar una tarea ya creada.
  • Eliminar una tarea que ya no necesitas.

Eso es CRUD en su forma más simple.

Aunque el término se utiliza mucho en desarrollo web, también aparece en aplicaciones móviles, paneles de administración, sistemas empresariales, gestores de contenido, APIs, bases de datos relacionales y bases de datos NoSQL.

Lo interesante de CRUD es que no depende de una tecnología concreta. Puedes aplicar este concepto en proyectos creados con JavaScript, PHP, Python, Java, React, Laravel, WordPress o cualquier otro entorno de desarrollo.

Si estás aprendiendo desarrollo frontend, entender CRUD también te ayuda a conectar mejor conceptos como formularios, peticiones HTTP, estados de carga, validaciones y consumo de APIs. De hecho, muchos proyectos basados en aplicaciones de página única o SPA giran alrededor de estas operaciones.

Las cuatro operaciones básicas de CRUD

Para entender bien qué es CRUD, conviene analizar cada operación por separado. Aunque juntas forman un patrón muy común, cada una cumple una función concreta dentro del ciclo de vida de los datos.

Create: crear nuevos datos

La operación Create permite añadir nueva información a un sistema. Es el punto de partida cuando queremos registrar algo que antes no existía en la base de datos.

Por ejemplo, cuando una persona se registra en una web, la aplicación crea un nuevo usuario. Cuando publicas una entrada en un blog, se crea un nuevo artículo. Cuando añades un producto a una tienda online, se crea un nuevo registro en el catálogo.

En una base de datos SQL, esta operación suele corresponderse con una instrucción INSERT. En una API REST, normalmente se asocia con el método POST.

INSERT INTO usuarios (nombre, email)
VALUES ('Marta', 'marta@example.com');

Este código añade un nuevo usuario a la tabla usuarios.

Desde el punto de vista de la experiencia de usuario, esta operación suele estar asociada a formularios. La persona introduce información, pulsa un botón y la aplicación guarda esos datos.

Qué hay que tener en cuenta al crear datos

Crear datos no consiste solo en enviarlos a la base de datos. También implica validar la información, comprobar que no haya errores y evitar duplicados innecesarios.

Por ejemplo, si una persona introduce un correo electrónico inválido, la aplicación debería detectarlo antes de guardar el registro. Si el correo ya existe en la base de datos, también debería avisar.

Una operación de creación bien implementada debe cuidar aspectos como la validación de campos obligatorios, el formato correcto de los datos, la seguridad frente a entradas maliciosas y los mensajes de confirmación o error.

Este punto es especialmente importante porque la calidad de los datos empieza aquí. Si permitimos guardar información incompleta o incoherente, después será más difícil consultarla, modificarla o utilizarla correctamente.

Read: leer o consultar información

La operación Read permite obtener información que ya existe en el sistema. Es una de las acciones más frecuentes en cualquier aplicación, porque muchas interfaces se basan en mostrar datos al usuario.

Cuando entras en tu área privada y ves tus datos personales, estás realizando una operación de lectura. Cuando consultas una lista de pedidos, lees registros de una base de datos. Cuando visitas un artículo de un blog, el sistema recupera la información almacenada y la muestra en pantalla.

En SQL, esta operación se realiza con SELECT. En una API REST, normalmente se relaciona con el método GET.

SELECT nombre, email
FROM usuarios;

Este código obtiene el nombre y el email de los usuarios almacenados en la tabla.

Aunque pueda parecer una operación sencilla, leer datos correctamente también tiene su complejidad. No siempre queremos obtener toda la información. A veces necesitamos filtrar, ordenar, paginar o buscar registros concretos.

Leer datos no significa mostrarlo todo

Una buena operación de lectura debe ser eficiente y segura. No tiene sentido cargar miles de registros si la persona usuaria solo necesita ver diez resultados por página. Tampoco es recomendable exponer datos sensibles que no deberían aparecer en la interfaz.

Por ejemplo, en un panel de administración podrías necesitar ver el nombre, el email y el estado de un usuario, pero no su contraseña cifrada, tokens internos o información privada innecesaria.

Por eso, la operación Read suele incluir decisiones como qué campos se devuelven, qué filtros se aplican, cuántos resultados se muestran por página y qué permisos necesita una persona para acceder a cierta información.

Leer datos es mucho más que “mostrar información”. Es entregar la información adecuada, en el momento adecuado y con el nivel de acceso correcto.

En este punto también entran en juego conceptos relacionados con el almacenamiento y la gestión de datos en el navegador. Si te interesa ampliar esta parte desde el lado frontend, puedes leer también el artículo sobre localStorage y sessionStorage en proyectos JavaScript.

Update: actualizar datos existentes

La operación Update permite modificar información que ya existe en la base de datos. Es fundamental porque los datos cambian con el tiempo.

Un usuario puede actualizar su perfil, una tienda puede cambiar el precio de un producto, una empresa puede modificar el estado de una factura y un gestor de contenidos puede editar una entrada ya publicada.

En SQL, esta operación se realiza con UPDATE. En una API REST, suele relacionarse con los métodos PUT o PATCH.

UPDATE usuarios
SET email = 'nuevoemail@example.com'
WHERE id = 1;

Este código cambia el email del usuario cuyo identificador es 1.

La operación de actualización requiere especial cuidado porque modifica información ya existente. Un pequeño error puede sobrescribir datos importantes o afectar a registros que no deberían cambiar.

Diferencia entre actualizar todo o solo una parte

En desarrollo de APIs, suele distinguirse entre PUT y PATCH.

El método PUT se utiliza normalmente para reemplazar un recurso completo. En cambio, PATCH suele utilizarse para actualizar solo una parte del recurso.

Por ejemplo, si tienes un perfil de usuario con nombre, email, ciudad y biografía, una actualización completa podría enviar todos los datos de nuevo. Una actualización parcial solo enviaría el campo que ha cambiado.

Esta diferencia ayuda a diseñar aplicaciones más precisas y eficientes.

Además, una buena operación de actualización debería contemplar validaciones, control de permisos, prevención de cambios accidentales y, en algunos casos, registro de modificaciones.

En sistemas críticos, como aplicaciones bancarias, sanitarias o de gestión legal, actualizar datos requiere todavía más control. No basta con permitir la edición: también hay que saber quién ha cambiado qué, cuándo y por qué.

Delete: eliminar información

La operación Delete permite borrar datos de un sistema. Es una acción sencilla de entender, pero delicada en la práctica.

Cuando eliminas una cuenta, borras una tarea, quitas un producto del catálogo o suprimes un comentario, estás ejecutando una operación de eliminación.

En SQL, se suele utilizar DELETE. En una API REST, normalmente se asocia con el método DELETE.

DELETE FROM usuarios
WHERE id = 1;

Este código elimina el usuario con identificador 1.

Sin embargo, en aplicaciones reales no siempre se elimina la información de forma definitiva. Muchas veces se utiliza lo que se conoce como borrado lógico o soft delete.

Borrado físico y borrado lógico

El borrado físico elimina el registro de la base de datos. Una vez ejecutado, el dato desaparece, salvo que exista una copia de seguridad.

El borrado lógico, en cambio, no elimina el registro realmente. Lo marca como eliminado mediante un campo, por ejemplo deleted_at o activo = false.

UPDATE usuarios
SET eliminado = true
WHERE id = 1;

En este caso, el usuario sigue en la base de datos, pero la aplicación puede tratarlo como si estuviera eliminado.

El borrado lógico es útil cuando queremos conservar historial, evitar pérdidas accidentales o cumplir ciertos procesos internos. Sin embargo, también hay que tener en cuenta la normativa de protección de datos y el derecho de supresión cuando corresponda.

Eliminar datos no debería tomarse a la ligera. Una buena aplicación debe ofrecer confirmaciones claras, evitar acciones irreversibles sin aviso y proteger la información importante.

CRUD y bases de datos: una relación inseparable

CRUD está directamente relacionado con las bases de datos, porque estas operaciones describen la forma en que una aplicación interactúa con la información almacenada.

Una base de datos sirve para guardar datos de manera organizada. CRUD define las acciones principales que realizamos sobre esos datos.

En una base de datos relacional, como MySQL, PostgreSQL, MariaDB o SQL Server, los datos suelen organizarse en tablas. Cada tabla contiene filas y columnas. Por ejemplo, una tabla de usuarios podría tener columnas como id, nombre, email, fecha_creacion y estado.

Las operaciones CRUD permiten gestionar esos registros: crear una fila nueva, leer una o varias filas existentes, actualizar una fila concreta o eliminarla.

En bases de datos NoSQL, como MongoDB, Firebase Firestore o CouchDB, la estructura puede ser distinta, pero el concepto sigue siendo el mismo. En lugar de filas y tablas, podemos hablar de documentos, colecciones o nodos. Aun así, seguimos necesitando crear, consultar, modificar y eliminar información.

CRUD en SQL

En SQL, las operaciones CRUD suelen relacionarse con las siguientes instrucciones:

Operación CRUDAcciónSQL habitual
CreateCrear datosINSERT
ReadLeer datosSELECT
UpdateActualizar datosUPDATE
DeleteEliminar datosDELETE

Esta correspondencia ayuda a entender por qué CRUD es tan importante en informática. No es solo una idea teórica, sino una forma práctica de organizar las operaciones más habituales sobre una base de datos.

CRUD en APIs REST

En el desarrollo web moderno, CRUD también se utiliza mucho al diseñar APIs. Una API permite que diferentes partes de una aplicación se comuniquen entre sí.

Por ejemplo, una aplicación frontend creada con React puede comunicarse con un backend que gestiona los datos. El frontend muestra la interfaz y el backend se encarga de recibir peticiones, consultar la base de datos y devolver respuestas.

En una API REST, las operaciones CRUD suelen asociarse con métodos HTTP:

Operación CRUDMétodo HTTP habitualEjemplo
CreatePOSTCrear un usuario
ReadGETObtener usuarios
UpdatePUT o PATCHModificar un usuario
DeleteDELETEEliminar un usuario

Por ejemplo:

GET /usuarios
POST /usuarios
GET /usuarios/1
PATCH /usuarios/1
DELETE /usuarios/1

Estas rutas representan una forma clara y ordenada de gestionar recursos. Por eso CRUD es tan útil al diseñar arquitecturas web.

Si trabajas con interfaces en React, comprender estas operaciones también te ayuda a organizar mejor componentes, estados y efectos. Puedes complementar esta base con el artículo sobre hooks en React y cómo usarlos en tus componentes.

Ejemplo práctico de CRUD en una aplicación web

Imagina que estás desarrollando una pequeña aplicación para gestionar libros de una biblioteca personal. Cada libro tiene un título, una autora o autor, un año de publicación y un estado de lectura.

La aplicación debería permitir crear libros, consultar el listado, editar información y eliminar registros.

Crear un libro

La persona usuaria completa un formulario con los datos del libro y pulsa “Guardar”. La aplicación envía esa información al servidor y se crea un nuevo registro en la base de datos.

Los campos podrían ser título, autor, año y estado de lectura.

Esta sería la operación Create.

Consultar el listado de libros

Después, la aplicación muestra todos los libros guardados. También podría permitir filtrar por estado, buscar por título u ordenar por año de publicación.

Esta sería la operación Read.

Editar un libro

Si la persona se equivoca al escribir el título o cambia el estado de “leyendo” a “leído”, la aplicación debe permitir modificar ese registro.

Esta sería la operación Update.

Eliminar un libro

Si ya no quiere conservar un libro en la biblioteca, puede eliminarlo. La aplicación debería pedir confirmación antes de borrar el registro.

Esta sería la operación Delete.

Por qué este ejemplo ayuda a entender CRUD

Este ejemplo es sencillo, pero refleja cómo funcionan muchísimas aplicaciones reales. Cambia “libros” por “productos”, “clientes”, “pedidos”, “posts”, “facturas”, “comentarios” o “reservas” y tendrás la misma estructura básica.

La lógica CRUD aparece constantemente porque la mayoría de sistemas digitales necesitan gestionar datos. Por eso es uno de los primeros conceptos que conviene dominar cuando se aprende desarrollo de software.

CRUD no es una arquitectura completa

Aunque CRUD es muy importante, conviene aclarar algo: CRUD no es una arquitectura completa de software. Es un patrón básico de operaciones sobre datos.

Una aplicación puede tener CRUD y, aun así, necesitar muchas otras capas y decisiones técnicas: autenticación, autorización, validaciones, seguridad, diseño de base de datos, lógica de negocio, gestión de errores, rendimiento, escalabilidad y experiencia de usuario.

Por ejemplo, una aplicación bancaria no se limita a crear, leer, actualizar y eliminar movimientos. También debe aplicar reglas complejas, controles de seguridad, auditorías, cifrado y validaciones estrictas.

CRUD es la base, pero no lo es todo.

La diferencia entre CRUD y lógica de negocio

Una operación CRUD responde a una acción básica sobre datos. La lógica de negocio, en cambio, define las reglas específicas de una aplicación.

Por ejemplo, actualizar el estado de un pedido podría parecer una operación CRUD sencilla. Sin embargo, la lógica de negocio puede imponer reglas como:

  • No se puede cancelar un pedido ya enviado.
  • No se puede marcar como pagado si no hay confirmación del pago.
  • No se puede eliminar una factura emitida.
  • No se puede modificar una reserva fuera de plazo.

Estas reglas van más allá de CRUD. Por eso, aunque CRUD es una pieza esencial, una aplicación bien diseñada necesita pensar también en el contexto, las restricciones y las consecuencias de cada acción.

Importancia de CRUD en el desarrollo web

CRUD es especialmente importante en desarrollo web porque muchas aplicaciones actuales se construyen alrededor de la gestión de información.

Un blog necesita CRUD para gestionar artículos. Una tienda online necesita CRUD para productos, clientes y pedidos. Una red social necesita CRUD para publicaciones, comentarios y perfiles. Un CRM necesita CRUD para contactos, empresas y oportunidades comerciales.

Incluso un panel de administración básico suele ser, en gran parte, una interfaz CRUD.

CRUD ayuda a estructurar proyectos

Cuando entiendes CRUD, puedes organizar mejor un proyecto desde el principio. Te ayuda a identificar qué entidades existen, qué datos necesita cada una y qué acciones debe permitir la aplicación.

Por ejemplo, si estás diseñando una aplicación de eventos, puedes empezar detectando entidades como eventos, usuarios, reservas, categorías y ubicaciones.

Después, puedes preguntarte qué operaciones CRUD necesita cada entidad. Quizá los usuarios puedan leer eventos y crear reservas, pero solo una persona administradora pueda crear, actualizar o eliminar eventos.

Este análisis inicial ayuda a ordenar tanto la interfaz como el backend.

También puede ayudarte a planificar mejor el despliegue de proyectos sencillos o portfolios técnicos. Si estás practicando con aplicaciones estáticas o proyectos frontend, puede resultarte útil revisar cómo desplegar proyectos en GitHub Pages.

CRUD mejora la comunicación entre perfiles técnicos

El concepto CRUD también facilita la comunicación entre desarrolladores, diseñadores, perfiles de producto y responsables de negocio.

Decir “necesitamos un CRUD de productos” permite entender rápidamente que se necesita una interfaz para crear, listar, editar y eliminar productos.

Eso sí, conviene no quedarse solo en esa frase. Un CRUD puede parecer simple, pero cada acción puede tener matices importantes: permisos, validaciones, estados, filtros, confirmaciones, mensajes y restricciones.

Buenas prácticas al diseñar un CRUD

No todos los CRUD son iguales. Un CRUD puede ser funcional, pero incómodo, inseguro o difícil de mantener. Por eso conviene aplicar buenas prácticas desde el principio.

Diseña formularios claros

Las operaciones de creación y actualización suelen depender de formularios. Si el formulario es confuso, la experiencia será mala y los datos guardados pueden ser incorrectos.

Un buen formulario debería tener etiquetas claras, campos bien agrupados, mensajes de error comprensibles y ayudas cuando sea necesario.

Evita pedir datos que no sean realmente necesarios. Cuanto mayor sea la carga cognitiva, más probable será que la persona abandone el proceso o cometa errores.

Valida en frontend y backend

La validación en frontend mejora la experiencia porque permite mostrar errores de forma inmediata. Sin embargo, no es suficiente.

La validación importante debe hacerse también en backend, porque el frontend puede manipularse. Si solo validas en la interfaz, la aplicación queda expuesta a errores o ataques.

Por ejemplo, si un campo debe ser obligatorio, compruébalo en ambos lados. Si un usuario no tiene permisos para borrar un registro, esa restricción debe aplicarse en el servidor.

Cuida los permisos

No todas las personas deberían poder hacer todas las acciones. Un usuario normal quizá pueda leer información y editar su propio perfil, pero no eliminar cuentas de otras personas.

Los permisos son fundamentales en cualquier sistema CRUD.

Puedes plantearte preguntas como:

  • ¿Quién puede crear registros?
  • ¿Quién puede verlos?
  • ¿Quién puede editarlos?
  • ¿Quién puede eliminarlos?
  • ¿Hay datos visibles solo para ciertos roles?

Este punto es clave para evitar problemas de seguridad y privacidad.

Evita eliminar sin confirmación

La operación Delete suele ser la más delicada. Por eso es recomendable pedir confirmación antes de borrar datos importantes.

En algunos casos, puede ser útil ofrecer una opción de deshacer. En otros, conviene aplicar borrado lógico en lugar de borrado definitivo.

La interfaz debe dejar claro qué se está eliminando y qué consecuencias tiene esa acción.

Optimiza las consultas de lectura

Las operaciones de lectura pueden afectar mucho al rendimiento. Si una aplicación consulta demasiados datos o no utiliza paginación, puede volverse lenta.

Algunas buenas prácticas son usar paginación en listados largos, permitir búsqueda y filtros útiles, evitar devolver campos innecesarios, indexar columnas consultadas con frecuencia y cachear datos cuando tenga sentido.

Un CRUD eficiente no solo funciona: también responde rápido y escala mejor.

Errores comunes al implementar CRUD

Aunque CRUD parece sencillo, hay errores frecuentes que pueden generar problemas técnicos y de experiencia de usuario.

Crear datos sin validar

Uno de los errores más habituales es permitir que se guarde cualquier dato sin comprobar su formato o coherencia.

Esto puede provocar registros incompletos, duplicados, errores en la interfaz y problemas en futuras consultas.

Mostrar información sensible

Otra mala práctica es devolver más información de la necesaria en una operación de lectura. No todos los datos de la base de datos deberían llegar al frontend.

La aplicación debe exponer solo lo imprescindible.

Actualizar registros sin controlar permisos

Permitir que cualquier usuario modifique cualquier registro es un riesgo importante. Cada operación de actualización debe comprobar si la persona tiene autorización para realizar ese cambio.

Eliminar datos de forma irreversible demasiado pronto

Borrar información sin confirmación, sin copia de seguridad o sin posibilidad de recuperación puede tener consecuencias graves.

Por eso conviene analizar bien cada caso antes de decidir entre borrado físico y borrado lógico.

CRUD y experiencia de usuario

CRUD no es solo un tema de backend o base de datos. También influye directamente en la experiencia de usuario.

Una interfaz CRUD puede ser clara, rápida y agradable. O puede ser frustrante, confusa y propensa a errores.

Por ejemplo, cuando una persona crea un registro, necesita saber si la acción se ha completado correctamente. Cuando edita datos, necesita entender qué ha cambiado. Cuando elimina algo, necesita estar segura de lo que está haciendo.

Mensajes claros y estados visibles

Una buena interfaz CRUD debería mostrar estados como “guardando”, “cambios guardados”, “error al guardar”, “registro eliminado”, “no se encontraron resultados” o “cargando información”.

Estos mensajes ayudan a reducir incertidumbre. La persona usuaria no debería preguntarse si la aplicación ha funcionado o no.

Prevención de errores

El diseño también puede prevenir errores. Por ejemplo, desactivar el botón de envío mientras se procesa una petición evita envíos duplicados. Mostrar una vista previa antes de publicar ayuda a revisar el contenido. Pedir confirmación antes de eliminar reduce accidentes.

Una buena experiencia CRUD no consiste solo en permitir acciones, sino en acompañarlas bien.

Esta relación entre datos, interfaz y claridad también conecta con la usabilidad. Si te interesa profundizar en esa parte, puedes leer el artículo sobre qué es la usabilidad web y cómo facilitar la navegación del usuario.

CRUD en WordPress, frameworks y aplicaciones modernas

CRUD aparece también en herramientas muy populares. WordPress, por ejemplo, utiliza operaciones CRUD constantemente.

Cuando creas una entrada, WordPress guarda un nuevo post en la base de datos. Cuando visitas una página, lee la información. Cuando editas contenido desde el panel, actualiza registros. Cuando envías algo a la papelera, elimina o marca contenido como eliminado.

Lo mismo ocurre en frameworks modernos. En Laravel, Django, Ruby on Rails, Express, NestJS o Spring Boot, el desarrollo de aplicaciones suele incluir controladores, modelos y rutas para gestionar operaciones CRUD.

En frontend, herramientas como React, Vue, Angular o Svelte consumen datos desde APIs que muchas veces exponen endpoints CRUD.

Esto demuestra que CRUD sigue siendo un concepto vigente, incluso cuando cambian las tecnologías.

Si estás construyendo proyectos con React o WordPress desacoplado, comprender bien estas operaciones te ayudará a tomar mejores decisiones sobre estructura, consumo de datos, rutas y gestión de estados.

Por qué CRUD es tan importante para aprender programación

Aprender CRUD ayuda a comprender cómo se conectan varias piezas fundamentales del desarrollo: la interfaz que ve la persona usuaria, la lógica que procesa las acciones, la base de datos que almacena la información y las APIs que comunican frontend y backend.

Cuando entiendes CRUD, empiezas a ver las aplicaciones de otra manera. Ya no percibes una web solo como pantallas, botones y formularios. Empiezas a entender qué ocurre con los datos detrás de cada interacción.

Además, crear un CRUD es uno de los ejercicios más útiles para practicar desarrollo web completo. Permite trabajar formularios, validaciones, rutas, peticiones HTTP, consultas a base de datos, gestión de errores y diseño de interfaces.

Por eso muchos proyectos de aprendizaje empiezan con una aplicación de tareas, una agenda de contactos, un gestor de productos o un pequeño blog. Todos estos ejemplos permiten practicar CRUD de forma clara.

Preguntas frecuentes sobre CRUD

¿Qué es CRUD en pocas palabras?

CRUD es un conjunto de cuatro operaciones básicas para gestionar datos: crear, leer, actualizar y eliminar. Se utiliza en informática, bases de datos, APIs y aplicaciones web para describir las acciones principales que se realizan sobre la información almacenada.

¿CRUD solo se usa en bases de datos?

No. CRUD está muy relacionado con las bases de datos, pero también se utiliza al diseñar APIs, interfaces de administración, aplicaciones web, aplicaciones móviles y sistemas empresariales. Siempre que una aplicación gestione información, es probable que haya operaciones CRUD detrás.

¿Cuál es la diferencia entre CRUD y una API REST?

CRUD describe las operaciones básicas sobre datos. Una API REST es una forma de diseñar servicios web que puede exponer esas operaciones mediante métodos HTTP como GET, POST, PUT, PATCH y DELETE.

Dicho de forma sencilla: CRUD es el concepto y REST puede ser una forma de implementarlo en una aplicación web.

CRUD como punto de partida para entender cómo funcionan las aplicaciones

CRUD puede parecer un concepto básico, pero precisamente ahí está su importancia. Muchas aplicaciones complejas se apoyan en estas cuatro operaciones: crear, leer, actualizar y eliminar.

Entenderlas bien permite construir sistemas más ordenados, interfaces más claras y bases de datos mejor gestionadas.

En informática, no todo empieza con arquitecturas avanzadas, frameworks modernos o patrones sofisticados. Muchas veces, la base está en comprender cómo se mueve la información dentro de una aplicación.

Dominar CRUD no significa saberlo todo sobre desarrollo, pero sí significa entender una de sus piezas esenciales. A partir de ahí, es mucho más fácil avanzar hacia temas como APIs, seguridad, arquitectura, rendimiento, experiencia de usuario y lógica de negocio.

Por eso, si estás aprendiendo programación o quieres reforzar tus fundamentos, CRUD es un concepto que merece algo más que una definición rápida. Es una forma sencilla de observar cómo las aplicaciones crean valor a partir de los datos.

Aplicaciones de página única (SPA)

Aplicaciones de página única (SPA)

Una aplicación de página única o SPA es una aplicación que consta de una sola página cuyos recursos se cargan dinámicamente cuando se requiere y no es necesario recargar toda la página en el navegador al efectuarse cada nueva acción por parte del usuario.

Se trata de un tipo de aplicación que está pensada para páginas donde se prevé que la mayor parte de la información va a permanecer igual y donde sólo se actualizarán algunos fragmentos a la vez. 

El objetivo de una SPA es el de obtener mayor fluidez y agilidad en la navegación, optimizar el uso de recursos y en su conjunto mejorar la experiencia del usuario.

El lenguaje más utilizado para desarrollar una SPA es Javascript ya que podemos utilizarlo tanto del lado del cliente como del servidor con NodeJS.

Mediante el uso de una API, una SPA puede funcionar con servicios de back-end desarrollados en diferentes lenguajes además de NodeJS.

Los 3 frameworks Javascript principalmente utilizados para desarrollar aplicaciones SPA son React, Angular y Vue. La elección de un framework u otro dependerá del proyecto y de las particularidades del mismo.

Algunos ejemplos de páginas SPA más populares son Facebook, Google Maps, Gmail, Netflix, Airbnb, Dropbox, Paypal o Pinterest.

Gráficos SVG, tus aliados en la Web

Gráficos SVG, tus aliados en la Web

Gráficos SVG, tus aliados en la Web

Los gráficos SVG son uno de esos recursos que parecen sencillos a primera vista, pero que pueden marcar una gran diferencia en la calidad visual, el rendimiento y la flexibilidad de una web. Durante mucho tiempo se han utilizado sobre todo para logotipos e iconos, pero su utilidad va mucho más allá.

En una web moderna, donde el diseño debe adaptarse a móviles, tablets, pantallas de alta resolución y distintos modos de visualización, trabajar con imágenes flexibles no es un detalle menor. Es una decisión técnica y visual importante.

A diferencia de formatos como JPG o PNG, los SVG no se construyen a partir de píxeles, sino de vectores. Esto significa que pueden ampliarse o reducirse sin perder nitidez. Por eso son especialmente útiles para iconos, logotipos, ilustraciones simples, gráficos, patrones decorativos, mapas o elementos de interfaz.

Además, al estar basados en código, los SVG pueden integrarse con HTML, CSS y JavaScript. Esto abre la puerta a personalizaciones, animaciones, cambios de color, adaptación a temas visuales y reutilización dentro de sistemas de diseño.

Ahora bien, usar SVG no significa automáticamente mejorar una web. Como ocurre con cualquier recurso frontend, conviene entender cuándo utilizarlo, cómo optimizarlo y qué errores evitar. En este artículo veremos qué son los gráficos SVG, cuáles son sus principales ventajas y desventajas, cómo insertarlos correctamente en una página web y qué buenas prácticas conviene aplicar.

Qué son los gráficos SVG

SVG significa Scalable Vector Graphics, es decir, gráficos vectoriales escalables. Se trata de un formato basado en XML que permite describir imágenes mediante formas, líneas, curvas, colores, textos y coordenadas.

Mientras una imagen JPG o PNG guarda información en forma de píxeles, un SVG describe la imagen mediante instrucciones. El navegador interpreta esas instrucciones y dibuja el resultado en pantalla.

Por ejemplo, un círculo en SVG puede escribirse así:

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#CC2B5E" />
</svg>

Este fragmento genera un círculo. Lo interesante es que ese círculo puede mostrarse en diferentes tamaños sin perder definición, porque no depende de una resolución fija.

Esta es la gran diferencia entre una imagen vectorial y una imagen rasterizada. Si ampliamos demasiado una imagen basada en píxeles, tarde o temprano aparecerá el típico efecto borroso o pixelado. En cambio, un SVG se recalcula y se redibuja, manteniendo sus bordes limpios.

SVG frente a PNG, JPG y otros formatos

Para elegir bien un formato de imagen, no conviene pensar en términos absolutos. SVG no es mejor que PNG o JPG en todos los casos. Cada formato tiene su función.

Un archivo JPG suele ser adecuado para fotografías, imágenes realistas, fondos con muchas texturas y composiciones con gran cantidad de colores. Su compresión está pensada para este tipo de contenido.

Un archivo PNG funciona bien cuando necesitamos transparencia, bordes definidos o gráficos rasterizados con zonas planas de color. Durante años ha sido muy habitual en iconos, capturas de pantalla y elementos visuales con fondo transparente.

Un SVG, en cambio, es especialmente útil cuando la imagen puede representarse mediante formas. Por eso encaja tan bien en logotipos, iconos, gráficos vectoriales, ilustraciones simples y elementos decorativos.

La pregunta más útil antes de elegir un formato sería: ¿esta imagen funciona mejor como píxeles o como formas?

Si hablamos de una fotografía de producto, probablemente tenga más sentido usar JPG, WebP o AVIF. Si hablamos de un icono de búsqueda, una flecha, un logotipo o una ilustración plana, SVG suele ser una opción mucho más flexible.

Ventajas de usar SVG en la web

Los SVG ofrecen muchas ventajas en desarrollo web, pero su mayor valor aparece cuando se usan con intención. No se trata de cambiar todos los recursos gráficos por SVG, sino de identificar en qué casos aportan más que otros formatos.

Escalabilidad sin pérdida de calidad

La principal ventaja de SVG es su capacidad para escalar sin perder calidad. Esto resulta especialmente importante en interfaces responsive, donde un mismo recurso puede mostrarse en tamaños muy diferentes.

Un logotipo puede aparecer pequeño en la cabecera móvil, más grande en el footer y mucho más destacado en una sección hero. Si está en SVG, mantendrá la nitidez en todos esos contextos.

Esto también ayuda en pantallas de alta densidad de píxeles. Con imágenes rasterizadas, muchas veces necesitamos versiones en distintas resoluciones para evitar que se vean borrosas. Con SVG, normalmente basta con un único archivo bien construido.

Esta ventaja conecta directamente con una idea importante de diseño web: la interfaz debe adaptarse al contexto de uso. Si te interesa profundizar en esa parte, también puedes leer el artículo sobre navegación móvil y patrones para mejorar la experiencia de usuario.

Archivos ligeros en iconos e ilustraciones simples

Cuando un gráfico es sencillo, un archivo SVG puede ser muy ligero. Un icono formado por unas pocas rutas suele pesar menos que varias versiones PNG del mismo recurso.

Esto puede contribuir a reducir el peso total de una página, mejorar la carga y facilitar el mantenimiento de los recursos visuales.

Ahora bien, esta ventaja no siempre se cumple. Un SVG exportado directamente desde una herramienta de diseño puede contener metadatos innecesarios, grupos vacíos, estilos repetidos o rutas demasiado complejas.

Por eso es importante optimizar los SVG antes de subirlos a producción. Un SVG limpio puede ser un gran aliado. Un SVG mal exportado puede convertirse en un archivo pesado y difícil de mantener.

Integración con CSS y JavaScript

Una de las características más interesantes de SVG es que puede integrarse muy bien con CSS y JavaScript, especialmente cuando se inserta directamente en el HTML como SVG inline.

Esto permite modificar colores, tamaños, estados, animaciones o comportamientos sin necesidad de crear múltiples archivos.

Por ejemplo:

<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
  <path d="M12 2L2 22h20L12 2z" />
</svg>
.icon {
  width: 2rem;
  height: 2rem;
  fill: currentColor;
}

La propiedad currentColor permite que el icono herede el color del texto. Esto es muy útil en botones, enlaces, menús y componentes reutilizables.

Así, un mismo icono puede adaptarse a distintos estados visuales, como hover, active, modo oscuro o variaciones de color dentro de un sistema de diseño.

Si estás trabajando la parte visual de una interfaz, este enfoque puede combinar muy bien con técnicas CSS más avanzadas, como las que explico en el artículo sobre cómo hacer un texto máscara sobre una imagen.

Coherencia visual en sistemas de diseño

Los SVG son especialmente útiles cuando trabajamos con sistemas de diseño. Permiten crear bibliotecas de iconos y recursos gráficos consistentes, con tamaños, grosores, colores y estilos controlados.

En un proyecto frontend, esto ayuda a mantener una interfaz más ordenada y coherente. No es lo mismo utilizar iconos descargados de distintas fuentes, con estilos mezclados, que trabajar con una colección SVG alineada con la identidad visual del producto.

Además, cuando los SVG se convierten en componentes, por ejemplo en React, pueden recibir propiedades para cambiar el tamaño, el color o el título accesible.

function IconArrow({ size = 24, title = "Flecha" }) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      role="img"
      aria-label={title}
    >
      <path d="M5 12h14M13 6l6 6-6 6" />
    </svg>
  );
}

Este enfoque permite reutilizar iconos de forma más limpia y mantener el código más organizado.

Posibilidades de animación

Los SVG también pueden animarse. Es posible modificar el color, la opacidad, la posición, el trazo, el relleno o incluso simular que una línea se dibuja progresivamente.

Esto permite crear microinteracciones, loaders, gráficos dinámicos o ilustraciones animadas.

Por ejemplo, una animación sencilla de trazo puede dar la sensación de que un icono se está dibujando:

.path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: draw 1.5s ease forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

Eso sí, conviene recordar algo importante: no todo lo que se puede animar debería animarse. El movimiento en una interfaz debe tener una intención clara. Puede ayudar a dar feedback, guiar la atención o hacer más comprensible un cambio de estado, pero también puede añadir ruido.

Si quieres ampliar esta idea, puedes leer la guía básica sobre animaciones CSS, donde explico cómo usar el movimiento de forma más clara y accesible.

Desventajas y limitaciones del uso de SVG

Aunque los SVG tienen muchas ventajas, también tienen limitaciones. Utilizarlos sin criterio puede generar problemas de rendimiento, accesibilidad, mantenimiento o seguridad.

No son adecuados para fotografías

SVG no es el formato adecuado para fotografías ni imágenes muy complejas.

Una fotografía contiene miles o millones de variaciones de color, textura, luz y detalle. Si intentamos convertirla en SVG, el resultado puede ser un archivo enorme, difícil de editar y poco eficiente.

En estos casos, suele ser mucho más recomendable utilizar formatos como JPG, WebP o AVIF, dependiendo de las necesidades del proyecto.

SVG funciona mejor cuando la imagen es gráfica, no fotográfica.

Pueden ser pesados si son demasiado complejos

Un SVG puede ser muy ligero, pero también puede volverse pesado si contiene demasiadas rutas, filtros, máscaras, sombras o efectos complejos.

Esto ocurre con frecuencia cuando exportamos desde herramientas de diseño sin revisar el resultado. El archivo puede incluir información innecesaria, capas ocultas, nombres internos, estilos duplicados o demasiados decimales en las coordenadas.

Antes de subir un SVG a producción, es recomendable limpiarlo y optimizarlo. De esta forma, reducimos su peso y evitamos que el archivo contenga información que no aporta nada al resultado final.

Pueden generar riesgos de seguridad

Un SVG no es solo una imagen. Al estar basado en XML, puede contener código, enlaces, scripts o comportamientos que conviene controlar.

Por eso hay que tener especial cuidado cuando se permite subir SVG desde fuentes externas o usuarios no verificados. En gestores de contenido como WordPress, la subida de SVG suele estar restringida por motivos de seguridad.

La regla general es clara: no insertes SVG de origen desconocido sin revisarlo o sanitizarlo antes.

En un proyecto profesional, los SVG deben tratarse como código. Igual que revisarías un fragmento JavaScript antes de integrarlo, también conviene revisar un SVG antes de publicarlo.

Pueden estar mal implementados a nivel de accesibilidad

Los SVG pueden ser accesibles, pero no lo son automáticamente. Todo depende de cómo se usen.

Si un SVG es decorativo, lo habitual es ocultarlo a los lectores de pantalla:

<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
  <!-- contenido del icono -->
</svg>

En cambio, si el SVG transmite información relevante, necesita un nombre accesible. Para ello podemos usar role="img" junto con aria-label, o incluir un elemento <title> dentro del propio SVG.

<svg role="img" aria-labelledby="icon-title" viewBox="0 0 24 24">
  <title id="icon-title">Icono de búsqueda</title>
  <path d="..." />
</svg>

Uno de los errores más habituales es usar botones con solo un icono visual, pero sin texto ni etiqueta accesible. Por ejemplo, un botón con una lupa puede ser evidente para una persona que ve la interfaz, pero no para quien navega con lector de pantalla.

<button aria-label="Buscar">
  <svg aria-hidden="true" viewBox="0 0 24 24">
    <!-- icono -->
  </svg>
</button>

En este caso, el nombre accesible lo tiene el botón. El SVG solo acompaña visualmente.

Este tipo de decisiones tiene mucho que ver con la usabilidad general de una web. Si te interesa este tema, puedes complementar la lectura con el artículo sobre qué es la usabilidad web y cómo facilitar la navegación del usuario.

Cómo insertar SVG en HTML

Existen varias formas de utilizar SVG en una página web. La mejor opción depende del contexto, del nivel de control que necesites y de cómo esté organizado tu proyecto.

Usar SVG como imagen externa

La forma más sencilla de insertar un SVG es usar la etiqueta img.

<img src="/images/logo.svg" alt="Nombre de la marca" />

Este método es limpio y fácil de mantener. Funciona muy bien para logotipos, ilustraciones o recursos que no necesitan manipularse internamente con CSS o JavaScript.

La ventaja es que el SVG se comporta como una imagen normal. La desventaja es que no puedes modificar fácilmente sus partes internas desde el CSS de la página.

Insertar SVG inline

Otra opción es pegar el código SVG directamente dentro del HTML.

<svg viewBox="0 0 24 24" aria-hidden="true">
  <path d="M12 2L2 22h20L12 2z" />
</svg>

Este enfoque da mucho más control. Permite cambiar colores, animar partes concretas, modificar estados y trabajar con el SVG como parte del DOM.

Es muy útil para iconos de interfaz, componentes reutilizables y animaciones. Sin embargo, si se abusa de SVG inline, el HTML puede crecer demasiado y volverse menos manejable.

Usar sprites SVG

Los sprites SVG permiten agrupar varios iconos en un solo archivo y reutilizarlos mediante symbol y use.

<svg style="display: none;">
  <symbol id="icon-search" viewBox="0 0 24 24">
    <path d="..." />
  </symbol>
</svg>

<svg aria-hidden="true">
  <use href="#icon-search" />
</svg>

Este enfoque puede ser útil en proyectos con muchos iconos, aunque requiere organización. En proyectos actuales, muchas veces se sustituye por bibliotecas de componentes o colecciones de iconos integradas en el frontend.

Buenas prácticas para trabajar con SVG

Para que los gráficos SVG sean realmente útiles, conviene aplicar algunas buenas prácticas desde el principio.

Optimiza los SVG antes de publicarlos

No todos los SVG exportados desde herramientas de diseño están listos para producción. Antes de utilizarlos, revisa si contienen metadatos innecesarios, rutas demasiado complejas, estilos duplicados o dimensiones poco flexibles.

Un SVG optimizado será más ligero, más fácil de mantener y más adecuado para una web rápida.

Esta idea conecta con una regla básica del SEO técnico: una página más ligera y mejor estructurada suele ofrecer una experiencia más fluida. Si estás trabajando la optimización general de tu sitio, también puede interesarte el artículo sobre SEO on page para posicionar tu web en Google.

Usa correctamente el atributo viewBox

El atributo viewBox es fundamental para que un SVG sea escalable y responsive. Define el sistema de coordenadas interno del gráfico.

<svg viewBox="0 0 100 100">
  <!-- contenido -->
</svg>

Gracias al viewBox, el SVG puede adaptarse a diferentes tamaños sin deformarse. Si un SVG no escala como esperas, revisar este atributo suele ser uno de los primeros pasos.

Evita dimensiones rígidas cuando no sean necesarias

En muchos casos, es mejor controlar el tamaño del SVG desde CSS en lugar de dejarlo cerrado con valores fijos de width y height.

.icon {
  width: 1.5rem;
  height: 1.5rem;
}

Esto facilita que el SVG se adapte a diferentes componentes, tamaños de texto y contextos visuales.

Usa currentColor para iconos

Cuando un icono debe heredar el color del texto, currentColor es una solución muy práctica.

.icon {
  fill: currentColor;
}

Esto permite que el mismo icono funcione en botones, enlaces, estados hover, modo oscuro y diferentes temas visuales sin necesidad de duplicar archivos.

Cuida el contraste y la legibilidad

Que un icono esté en SVG no significa que sea automáticamente usable. Si el contraste entre el icono y el fondo es bajo, muchas personas pueden tener dificultades para verlo.

Esto es especialmente importante en botones, menús, avisos, formularios y elementos interactivos. Un buen SVG no solo debe verse bonito. También debe ser claro.

SVG, rendimiento y SEO

Los SVG pueden ayudar al rendimiento de una web, pero no lo hacen por arte de magia. Todo depende del tipo de gráfico, de cómo esté construido y de cómo se integre en la página.

Cuándo SVG puede mejorar el rendimiento

SVG puede mejorar el rendimiento cuando sustituye a imágenes rasterizadas pesadas en elementos simples. Por ejemplo, un icono PNG en varias resoluciones puede reemplazarse por un único SVG limpio y escalable.

También puede evitar la necesidad de cargar diferentes versiones de una misma imagen para distintos dispositivos o densidades de pantalla.

En una estrategia frontend bien pensada, esto ayuda a reducir duplicidades y simplificar la gestión de recursos visuales.

Cuándo SVG puede perjudicar el rendimiento

SVG puede perjudicar el rendimiento si contiene demasiadas rutas, filtros complejos, sombras, máscaras o animaciones innecesarias.

Los filtros SVG pueden ser costosos si se aplican sobre áreas grandes o si se animan constantemente. También hay que tener cuidado con repetir muchos SVG inline en una misma página, porque pueden aumentar el tamaño del HTML.

La idea no es usar SVG siempre, sino usarlo cuando realmente aporta valor.

SVG y posicionamiento SEO

Los SVG pueden contribuir indirectamente al SEO si ayudan a que la página sea más rápida, clara y accesible. Sin embargo, no conviene verlos como una técnica milagrosa de posicionamiento.

Para SEO, lo importante sigue siendo que el contenido esté bien estructurado, que las imágenes tengan sentido dentro del contexto, que los recursos no ralenticen la carga y que la información importante no quede escondida dentro de elementos visuales difíciles de interpretar.

Si usas un SVG como imagen, cuida el atributo alt. Si es decorativo, no lo sobrecargues con texto innecesario. Si transmite información relevante, asegúrate de que esa información también pueda entenderse fuera del elemento visual.

Casos de uso recomendados para SVG

SVG es especialmente útil en varios escenarios habituales del desarrollo web.

Iconos de interfaz

Los iconos son uno de los casos de uso más claros. Botones, menús, enlaces, tarjetas, etiquetas y estados de interfaz pueden beneficiarse de iconos SVG escalables y fáciles de personalizar.

Además, al poder adaptarse mediante CSS, encajan muy bien en componentes reutilizables.

Logotipos

Un logotipo en SVG mantiene su nitidez en cualquier tamaño. Puede verse bien tanto en una cabecera pequeña como en una sección destacada o en una pantalla de alta resolución.

También permite crear versiones adaptadas a distintos fondos o temas visuales.

Ilustraciones simples

Las ilustraciones con formas planas, colores definidos y pocos detalles funcionan muy bien en SVG. Son habituales en secciones hero, páginas de error, bloques explicativos, empty states o pantallas de onboarding.

Gráficos y visualizaciones

SVG también se utiliza en gráficos de datos, diagramas, mapas y visualizaciones interactivas. Permite representar elementos de forma precisa y manipularlos dinámicamente.

Patrones y fondos decorativos

Ondas, líneas, puntos, formas geométricas y patrones pueden crearse en SVG para dar personalidad visual a una interfaz sin depender de imágenes pesadas.

Cuándo no deberías usar SVG

Aunque SVG sea un formato muy útil, hay situaciones en las que no es la mejor opción.

No deberías usar SVG para fotografías reales, imágenes con mucho detalle, texturas complejas o composiciones con miles de variaciones de color. En esos casos, un formato rasterizado optimizado suele ser más adecuado.

Tampoco conviene usar SVG si el archivo resultante es más pesado que una alternativa en WebP, AVIF, JPG o PNG. La decisión debe basarse en el tipo de imagen y en el rendimiento real.

Además, si no tienes control sobre el origen del SVG, es importante revisarlo antes de integrarlo. Un SVG descargado de cualquier sitio o subido por usuarios debe sanitizarse antes de publicarse.

Errores comunes al trabajar con SVG

Uno de los errores más frecuentes es exportar desde una herramienta de diseño y subir el SVG tal cual, sin optimizarlo. Esto puede añadir peso innecesario y dificultar el mantenimiento.

Otro error habitual es usar SVG inline para todo. Aunque este método ofrece mucho control, no siempre es necesario. A veces, una simple etiqueta img es más que suficiente.

También es común olvidar la accesibilidad. Un icono decorativo anunciado por un lector de pantalla puede generar ruido. Un icono funcional sin nombre accesible puede impedir que una persona complete una acción.

Por último, otro error frecuente es usar SVG solo como recurso estético, sin pensar en su función dentro de la interfaz. Un gráfico visualmente bonito aporta poco si no ayuda a entender mejor la página o a mejorar la experiencia.

Preguntas frecuentes sobre gráficos SVG

¿SVG es mejor que PNG?

No siempre. SVG suele ser mejor para iconos, logotipos, ilustraciones simples y gráficos vectoriales que necesitan escalar sin perder calidad.

PNG puede ser más adecuado para imágenes rasterizadas, capturas o gráficos con transparencia que no necesitan manipulación vectorial.

La elección depende del tipo de imagen, del peso del archivo y del uso dentro de la interfaz.

¿Los SVG son buenos para el SEO?

Pueden serlo de forma indirecta. Un SVG optimizado puede ayudar a mejorar el rendimiento, la claridad visual y la accesibilidad de una página.

Pero el SEO no depende solo del formato de imagen. También importan la estructura del contenido, la velocidad de carga, los textos alternativos, la intención de búsqueda y la experiencia de usuario.

¿Es seguro subir SVG a WordPress?

Depende de cómo se gestione. SVG puede contener código, por lo que permitir subidas sin control puede suponer un riesgo de seguridad.

Si necesitas usar SVG en WordPress, es recomendable hacerlo con una configuración segura, limitar quién puede subir estos archivos y sanitizarlos antes de publicarlos.

En general, conviene tratar los SVG como código, no como simples imágenes.

SVG no es solo un formato, es una decisión de diseño

Los gráficos SVG son una herramienta muy valiosa para la web moderna. Permiten crear interfaces más nítidas, flexibles, escalables y adaptables. Son especialmente útiles para iconos, logotipos, ilustraciones, gráficos y elementos visuales que deben mantener su calidad en diferentes tamaños y dispositivos.

Pero su verdadero valor no está solo en la tecnología. Está en saber cuándo usarlos, cómo optimizarlos y cómo integrarlos de forma responsable.

Un SVG bien utilizado puede mejorar el rendimiento, reforzar la identidad visual de una marca y facilitar la creación de sistemas de diseño más coherentes. Un SVG mal utilizado puede añadir peso innecesario, generar problemas de accesibilidad o introducir riesgos de seguridad.

Por eso, la pregunta no debería ser simplemente: “¿uso SVG o no?”. La pregunta más útil sería: ¿este recurso visual se beneficia realmente de ser vectorial, escalable, editable y accesible?

Si la respuesta es sí, SVG puede convertirse en uno de tus mejores aliados en la web.

Porque al final, desarrollar una buena interfaz no consiste solo en elegir tecnologías modernas. Consiste en tomar decisiones que hagan que la experiencia sea más clara, más rápida, más flexible y más fácil de usar.

Y en ese equilibrio entre diseño, rendimiento y accesibilidad, los SVG tienen mucho que aportar.