Domina las Etiquetas Avanzadas de SVG para Diseños Web Fáciles (2025)
¿Quieres crear diseños web impresionantes sin complicarte? Los gráficos SVG (Scalable Vector Graphics) van más allá de círculos y rectángulos. En esta guía, te explico etiquetas avanzadas como <image>, <foreignObject> y <g> de forma sencilla, con ejemplos que puedes copiar. Además, te mostraré cómo creadorlogos.com, la mejor herramienta para crear SVG fácil, te ayuda a diseñar sin escribir código. ¡Empecemos!
¿Qué puedes hacer con SVG más allá de las figuras básicas?
Además de figuras como <circle>, <ellipse>, <rect>, <polygon>, <polyline> y <path> (aprende más en este enlace), el SVG te permite añadir imágenes, videos e interactividad. ¡Transforma tu web con estas etiquetas!
1. Añade imágenes con la etiqueta <image>
Con <image>, puedes insertar fotos o imágenes en tu SVG. Es perfecto para logotipos o diseños mixtos. Aquí tienes un ejemplo simple:
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<image x="50" y="50" width="200" height="200" href="https://creadorlogos.com/images/transparencia.png"></image>
<circle cx="150" cy="125" r="25" fill="blue"></circle>
</svg>
Resultado:
La imagen está en (x=50, y=50) con 200x200 píxeles, y un círculo la decora. ¿Fácil, verdad?
2. Incrusta videos con <foreignObject> que se autoejecuten
Con <foreignObject>, puedes añadir videos que se reproduzcan automáticamente dentro de tu SVG. Este ejemplo usa los atributos <autoplay>, <loop> y <muted> para que el video se ejecute en bucle sin sonido. Asegúrate de cerrar siempre la etiqueta <video> con </video> para que sea válida en SVG. Aquí un ejemplo corregido:
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400">
<foreignObject id="id" requiredExtensions="http://www.w3.org/1999/xhtml" width="100%" x="0" y="0" height="100%">
<g xmlns="http://www.w3.org/1999/xhtml">
<video autoplay="autoplay" loop="loop" muted="muted" preload="auto" width="100%" height="100%">
<source src="https://creadorlogos.com/videos/videosejemplos/Spaceship-33411g.mp4" type="video/mp4"></source>
</video>
</g>
</foreignObject>
</svg>
Resultado:
El video ocupa el 100% del área SVG, se reproduce automáticamente en bucle y sin sonido. Para que tu cliente lo haga, dile: "Añade los atributos <autoplay>, <loop> y <muted> a la etiqueta <video> dentro de <foreignObject>, y asegúrate de cerrar la etiqueta con </video>. Esto asegura que el video se reproduzca en bucle y cumpla con las políticas de navegadores modernos."
3. Agrupa con la etiqueta <g>
La etiqueta <g> agrupa elementos para moverlos o estilizarlos juntos. Ideal para diseños organizados:
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<g id="grupo1" transform="translate(100,100)">
<circle cx="50" cy="50" r="40" fill="red"></circle>
<rect x="0" y="0" width="80" height="80" fill="green"></rect>
</g>
</svg>
Resultado:
El grupo se mueve a (100,100). ¡Ahorra tiempo agrupando!
4. Crea un escenario SVG completo con creadorlogos.com
Si eres de los que no disfruta crear contenido escribiendo líneas de código, desde creadorlogos.com he creado un escenario SVG para que subas todos los elementos que desees sin programar. Con nuestro creador de logotipos online, puedes insertar figuras primitivas como <circle>, <rect>, <polygon> o <polyline> (como vimos en otros tutoriales), miles de iconos formados por <path>, texto con más de 40,000 tipos de fuentes increíbles, e incluso imágenes y videos, como te he enseñado hoy. Además, puedes agrupar todo con <g> para organizar tu diseño y guardarlo en formato SVG vectorial o como una imagen estática PNG con fondo transparente.
Aquí tienes un ejemplo de un SVG animado creado con creadorlogos.com. Puedes verlo directamente embebido a continuación usando el archivo
Este escenario incluye un cuadrado, un icono, texto, una imagen y un video animado, todo agrupado. puedes personalizarlo sin código y guardarlo en tu proyecto. ¡Prueba crear tu propia animación hoy!
Convierte tu web con SVG y creadorlogos.com
SVG es una herramienta poderosa para el diseño web, permitiéndote usar <image>, <foreignObject>, <g>, <path> y más para crear gráficos escalables y animados. Si prefieres no programar, creadorlogos.com te ofrece una solución completa: inserta figuras, iconos, texto, imágenes, videos y animaciones sin esfuerzo, y exporta todo en SVG o PNG. Regístrate hoy en y empieza a crear diseños únicos para tu web en minutos. ¡Haz que tu sitio destaque con SVG y creadorlogos.com!
