HTML SVG
Antes, el mini proyecto pedía un sitio personal pequeño. Esta lección inicia una pista opcional de gráficos. SVG permite a HTML dibujar iconos y formas nítidas con matemáticas, no píxeles. Alcance práctico: cómo poner SVG en la página — no un curso completo de diseño.
Por qué SVG en un curso HTML
Las imágenes raster se ven borrosas al ampliar. SVG describe rutas y formas; el logo sigue nítido. Los principiantes ven SVG como icono de cabecera o insignia. Saber en línea frente a archivo mantiene páginas ligeras y accesibles.
Respuesta directa
1) En línea: árbol svg en el HTML. 2) Archivo: guarda .svg y cárgalo con img y alt. 3) Prefiere en línea para CSS/JS o nombre preciso. 4) Prefiere img para logos estáticos. 5) Nombra gráficos con significado. 6) Este curso solo incrusta.
📊 SVG embedding beginners use
| Choice | What it does | Beginner tip |
|---|---|---|
| Inline svg | Shapes live in the HTML tree | Easy to style and label in-page |
| img to .svg | Treats SVG like an image file | Simple for static logos |
| viewBox | Maps SVG coords to the viewport | Keep width/height + viewBox aligned |
| Accessible name | alt or aria-label on meaningful art | Empty name only if truly decorative |
| Scales cleanly | Vectors stay sharp when resized | Great for icons and UI marks |
| Not a photo format | Photos stay JPEG/PNG/WebP | Use SVG for shapes/icons, not camera shots |
SVG en línea diminuto
El SVG en línea es marcado. Un círculo con viewBox y nombre accesible muestra el trabajo HTML: el navegador dibuja; tú controlas tamaño y significado.
<svg width="80" height="80" viewBox="0 0 80 80" role="img" aria-label="Green circle">
<circle cx="40" cy="40" r="32" fill="#2a7"></circle>
</svg>
Leer la demo en línea
- svg es la raíz
- width/height caja de diseño; viewBox coordenadas
- circle es una forma hija
- role=img más aria-label nombra el gráfico
- al cambiar tamaño sigue nítido
- el mini proyecto usó img para fotos; aquí la «imagen» puede ser marcado
SVG como archivo de imagen
Si ya existe logo.svg, trátalo como media: src y alt útil. Las rutas deben coincidir con la carpeta.
<img src="images/logo.svg" alt="Site logo" width="120">
Leer el patrón de archivo
- src apunta al .svg
- alt lleva el nombre accesible
- width controla el tamaño; los vectores escalan limpio
- CSS estiliza la caja img más fácil que cada ruta en línea
- Reutiliza un archivo en varias páginas
- Siguiente: canvas dibuja con píxeles JS — otra herramienta
Elegir en línea vs archivo
- Icono a teñir con CSS: a menudo en línea
- Logo de marca estático: img
- Fotos: formatos raster
- Ilustración enorme en línea: prefiere archivo
- Gráfico con significado: siempre nómbralo
- Autoría SVG profunda: camino posterior
Práctica — SVG en la página
- Pega el círculo; confirma render.
- Cambia width/height — sigue nítido.
- Carga .svg con img+alt.
- Quita aria-label/alt un momento.
- Icono en línea junto a un encabezado en copia del mini proyecto.
- Frase: SVG es marcado o archivo vectorial — no sustituye fotos.
- Vista previa: canvas dibuja con script.
Errores fáciles
- Olvidar nombres accesibles
- Pegar árboles SVG enormes en línea
- Usar SVG para fotos
- Omitir viewBox
- Confundir SVG con canvas
- Tomar la intro como curso de ilustración
- Soltar hábitos a11y del mini proyecto
Resumen
- SVG dibuja formas e iconos independientes de resolución
- En línea con svg o archivo con img
- Nombra gráficos con significado
- Vectores escalan; fotos siguen raster
- El mini proyecto fue el build; aquí empieza gráficos opcionales
- Siguiente: canvas en HTML
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior