22. SVG con herramientas

Curso HTML5 desde cero — Freimel Jerez

En esta lección aprenderás a crear y exportar SVG utilizando herramientas profesionales. Esto es clave para trabajar iconos, logotipos y gráficos optimizados para la web.

🛠️ Herramientas más usadas

• Figma: Ideal para diseño web moderno
• Adobe Illustrator: Estándar profesional
• Inkscape: Gratis y open source
• SVGOMG: Optimización de SVG

🎨 Flujo recomendado

1. Diseña el gráfico en la herramienta
2. Exporta como SVG
3. Optimiza el código
4. Inserta el SVG en HTML

📄 SVG exportado (ejemplo)

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect width="100" height="100" rx="12" fill="#22c55e" />
  <text x="50" y="55" text-anchor="middle" fill="#020617">SVG</text>
</svg>

⚡ Optimización básica

• Eliminar width y height si no son necesarios
• Usar viewBox
• Reducir decimales
• Eliminar metadatos

🚫 Errores comunes

• Exportar SVG como imagen rasterizada
• No optimizar el código
• Usar SVG gigantes para iconos pequeños

🎥 Video de la lección

Debes ver el video completo para desbloquear el proyecto final.

📌 Resumen

• Las herramientas aceleran el trabajo con SVG
• Siempre optimiza antes de publicar
• SVG es clave para rendimiento web

🔥 En la siguiente lección realizarás el Proyecto Final HTML5.