21. SVG en línea

Curso HTML5 desde cero — Freimel Jerez

En esta lección aprenderás a usar SVG en línea dentro de HTML. SVG (Scalable Vector Graphics) permite crear gráficos vectoriales que no pierden calidad y pueden ser animados y estilizados con CSS.

🎯 ¿Qué es SVG?

SVG es un formato gráfico basado en XML. A diferencia de las imágenes tradicionales, los SVG se pueden escalar infinitamente sin perder calidad.

🧩 SVG incrustado en HTML

Cuando colocas un SVG directamente dentro del HTML, puedes modificarlo con CSS y JavaScript.

<svg width="120" height="120" viewBox="0 0 120 120">
  <circle cx="60" cy="60" r="50" fill="#22c55e" />
</svg>

🟢 Ejemplo visual

🎨 Estilizar SVG con CSS

Puedes aplicar clases y estilos como cualquier otro elemento HTML.

<svg class="icon">
  <rect x="10" y="10" width="100" height="100" />
</svg>

📌 Ventajas del SVG en línea

• No pierde calidad al escalar
• Pesa menos que imágenes PNG o JPG
• Editable con CSS y JavaScript
• Ideal para iconos y logotipos

🚫 Errores comunes

• Usar SVG como imagen cuando se necesita animar
• No definir el viewBox
• Insertar SVG sin accesibilidad

🎥 Video de la lección

Debes ver el video completo para desbloquear la siguiente lección.

📌 Resumen

• SVG es gráfico vectorial escalable
• SVG en línea permite animación y estilos
• Ideal para iconos y branding

En la siguiente lección aprenderás SVG con herramientas.