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 nuestra guía completa), 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.
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400">
<foreignObject 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:
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>4. Crea un escenario SVG completo con creadorlogos.com
Si prefieres no escribir código, desde creadorlogos.com ponemos a tu disposición nuestro creador de logotipos online para diseñar de forma visual y exportar tus proyectos en formato SVG o PNG.
