Este SVG muestra el texto "GambesS IT" con la URL debajo, y un efecto de código cayendo en el fondo. El fondo oscuro lo proporciona el CSS del contenedor `div`.
Icono Redondo "WyGieS"
Este es el SVG del icono redondo, perfecto para un favicon o un pequeño logo. Está incrustado directamente aquí para que veas el código, pero en la práctica, para un favicon, se codifica en la etiqueta `link` como se ve en el `<head>`.
El código para este icono es lo que se usa en el <link rel="icon"...> en el <head> de esta misma página, ¡así que ya deberías verlo en la pestaña de tu navegador!
Conceptos Clave de los SVG
Para recordar cómo modificar estos SVG y entender por qué no pierden calidad al redimensionarse:
**SVG es Vectorial:** Se basa en matemáticas (puntos, líneas, curvas), no en píxeles. Por eso, puedes escalarlos a cualquier tamaño sin que se pixelen.
**XML/HTML:** Los SVG son archivos XML, lo que los hace legibles y editables con un editor de texto. Se incrustan directamente en HTML usando la etiqueta <svg>.
**`viewBox`:** Define el "lienzo" interno del SVG. Permite que el SVG se redimensione manteniendo sus proporciones y el posicionamiento de sus elementos internos.
**`text` y `tspan`:** Elementos para añadir texto. Puedes aplicar estilos como font-family, font-size, fill (color de relleno), stroke (color de borde), text-anchor (alineación) directamente o con CSS.
**`circle`, `rect`, etc.:** Elementos para formas básicas.
**`g` (grupo):** Agrupa elementos para aplicarles estilos o transformaciones a todos a la vez.
**Animación CSS:** Para efectos dinámicos como el código cayendo, se usan @keyframes en CSS para animar propiedades como transform (para movimiento o escala) y opacity.
**`link rel="icon" type="image/svg+xml"`:** La forma correcta de usar un SVG como favicon.