Los gráficos vectoriales son un método para comunicar una serie de formas, coordenadas y rutas a su contexto de renderización. Son un conjunto de instrucciones sobre cómo se debe dibujar una imagen. Cuando la imagen se escala verticalmente o se reduce, el conjunto de puntos y líneas que representa se vuelve a dibujar a escala. Una curva suave entre dos puntos se rediseñará con la misma fluidez en cualquier tamaño, de manera similar a como se vuelve a dibujar un borde definido por CSS en un elemento HTML a medida que se escala ese elemento en el viewport.
Los Gráficos vectoriales escalables (SVG) son un lenguaje de marcación basado en XML desarrollado por el W3C. Es un formato de imagen vectorial diseñado para la Web moderna.
Cualquier software de diseño dedicado a la edición de material gráfico vectorial te permitirá exportar una imagen como un archivo SVG. Sin embargo, como es un lenguaje de marcación legible y estandarizado, también se puede crear y editar con cualquier software de edición de texto, independientemente del software que se use para crearlo, aunque rápidamente se vuelve poco realista para imágenes de cualquier complejidad real. El formato SVG se puede diseñar con CSS o contener JavaScript que compila interacciones y comportamientos en las imágenes.
Más allá del atractivo obvio para diseñadores y desarrolladores, SVG también es un formato increíblemente potente en términos de experiencia del usuario final. La información descriptiva que contiene una fuente SVG suele ser muy compacta en comparación con la información basada en cuadrícula de píxeles más prescriptiva de los formatos de imagen de trama, en el caso de las formas simples (para simplificar en exceso, la diferencia entre decirle al navegador "dibujar una línea roja de 1 px entre 1x1 y 1x5" y"1x1 es un píxel rojo ". 1 x 2 es un píxel rojo. 1 x 3 es un píxel rojo. 1x4 es un píxel rojo. 1x5 es un píxel rojo". La cara opuesta es que la naturaleza descriptiva de SVG requiere más interpretación (más "pensamiento") del navegador. Por este motivo, la renderización de los archivos SVG complejos puede ser más exigente. En la misma línea, una imagen muy compleja podría significar un conjunto detallado de instrucciones y un gran tamaño de transferencia.
Es posible que se requiera un poco de ensayo y error antes de que puedas reconocer instantáneamente una fuente de imagen candidata para ser mejor proporcionada por SVG en lugar de un formato de trama convencional. Sin embargo, existen algunas pautas: los elementos de la interfaz, como los íconos, casi siempre son bien recibidos por SVG. Es probable que el material gráfico con líneas nítidas, colores sólidos y formas claramente definidas sea un fuerte candidato para SVG.
SVG es un tema extenso: un lenguaje de marcación completo hecho para coexistir junto con HTML, con capacidades y opciones de estilo únicas. Para obtener una introducción más detallada a SVG, consulta el instructivo de MDN para SVG.