Fundamentos de SVG (dibujar imágenes vectoriales)

En esta lección dibujarás figuras directamente en la página con etiquetas, sin usar ningún archivo de imagen.

SVG describe gráficos mediante coordenadas, así que se ve nítido a cualquier tamaño. Dentro de <svg> se colocan figuras: <rect> (rectángulo, con x, y, width, height), <circle> (círculo, con centro cx, cy y radio r) y <text>. El origen de coordenadas está arriba a la izquierda y la y crece hacia abajo.

El código de ejemplo dibuja un rectángulo morado con las esquinas redondeadas (rx), un círculo rosa y una línea de texto. Cambia los números y verás las figuras moverse por el lienzo.

Lo que más despista al principio es el eje y invertido respecto a las matemáticas del colegio: aquí, aumentar la y baja. También conviene entender viewBox, que define el sistema de coordenadas interno y permite que el dibujo escale con el contenedor.

En proyectos reales, los iconos y logotipos se sirven en SVG casi siempre: pesan poco, se ven perfectos en pantallas de alta densidad y su color se puede cambiar desde CSS, algo imposible con un PNG.