¿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 nuestro escenario online), 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.

<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.

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 creando 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, miles de iconos formados por <path>, texto con fuentes increíbles, e incluso imágenes y videos. ¡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. 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. ¡Haz que tu sitio destaque hoy mismo!