¿SVG admite la incorporación de imágenes de mapa de bits?

147

¿Es una imagen SVG puramente vectorial o podemos combinar imágenes de mapa de bits en una imagen SVG? ¿Qué tal las transformaciones aplicadas en las imágenes de mapa de bits (perspectiva, mapeos, etc.)?

Editar : las imágenes se pueden incluir en un SVG por referencia de enlace. Ver http://www.w3.org/TR/SVG/struct.html#ImageElement . Mi pregunta era, de hecho, si las imágenes de mapa de bits pueden incluirse dentro de la svg para que la imagen svg sea autónoma. De lo contrario, siempre que se muestre la imagen svg, se debe seguir el enlace y descargar la imagen. Aparentemente, los archivos .svg son simplemente archivos xml.

image svg bitmapimage chmike
fuente

Respuestas:

207

Sí, puede hacer referencia a cualquier imagen del <image>elemento. Y puede usar los datos uri para hacer que el svg sea completamente autónomo. Un ejemplo:

<image width="100" height="100" xlink:href="data:image/png;base64,...">

Los puntos es donde agregaría los datos codificados de base64, los editores de gráficos vectoriales que admiten svg generalmente tienen una opción para guardar con imágenes incrustadas. De lo contrario, hay muchas herramientas para codificar desde y hacia base64.

Aquí hay un ejemplo completo de la prueba de svg.

Erik Dahlström
fuente
2
@Aleksandar es una pregunta separada, y estoy seguro de que puedes encontrar una respuesta para ella en este sitio (codificar algo en base64 no es específico de svg).
Erik Dahlström
1
@Erik: supongamos que tengo la misma imagen repetida mil veces en el mismo archivo svg. ¿Puedo colocar datos de base64 en un lugar y dejar que la imagen haga referencia a esos datos desde allí?
Rohit Vats
3
@Erik - No importa, recibí mi respuesta desde aquí - stackoverflow.com/questions/16685014/… . La respuesta habla de agrupar allí. :)
Rohit Vats
3
No olvide declarar el espacio de nombres xlinkcomo está: xmlns:xlink="http://www.w3.org/1999/xlink"algunos navegadores / visores no pueden ver su imagen sin ella
Marc_Alx
1
FYI: según mi experiencia, el navegador Chrome muestra esta imagen incluso si no especificas widthy heighten la etiqueta de imagen svg. Sin embargo, Firefox e IE no muestran la imagen si omite estos atributos. ¡Así que asegúrate de especificarlos!
Stonecrusher
23

Publiqué un violín aquí, que muestra datos, imágenes remotas y locales incrustadas en SVG, dentro de una página HTML:

http://jsfiddle.net/MxHPq/

<!DOCTYPE html>
<html>
<head>
    <title>SVG embedded bitmaps in HTML</title>
    <style>

        body{
            background-color:#999;
            color:#666;
            padding:10px;
        }

        h1{
            font-weight:normal;
            font-size:24px;
            margin-top:20px;
            color:#000;
        }

        h2{
            font-weight:normal;
            font-size:20px;
            margin-top:20px;
        }

        p{
            color:#FFF;
            }

        svg{
            margin:20px;
            display:block;
            height:100px;
        }

    </style>
</head>

<body>
    <h1>SVG embedded bitmaps in HTML</h1>
    <p>The trick appears to be ensuring the image has the correct width and height atttributes</p>

    <h2>Example 1: Embedded data</h2>
    <svg id="example1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <image x="0" y="0" width="5" height="5" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="/>
    </svg>

    <h2>Example 2: Remote image</h2>
    <svg id="example2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <image x="0" y="0" width="275" height="95" xlink:href="http://www.google.co.uk/images/srpr/logo3w.png" />
    </svg>

    <h2>Example 3: Local image</h2>
    <svg id="example3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <image x="0" y="0" width="136" height="23" xlink:href="/img/logo.png" />
    </svg>


</body>
</html>
Davestewart
fuente
17

Puede usar un URI de datos para proporcionar los datos de la imagen, por ejemplo:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<image width="20" height="20" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="/>

</svg>

La imagen pasará por todas las transformaciones normales de svg.

Pero esta técnica tiene desventajas, por ejemplo, la imagen no será almacenada en caché por el navegador

GarethOwen
fuente
si los datos URI es requerido por SVG, entonces esto es de suponer ninguna desventaja - Voy a editar mi respuesta
GarethOwen
Las imágenes incrustadas (URI de datos) se almacenarán en caché con el documento en el que se encuentran, consulte, por ejemplo, stackoverflow.com/questions/4791807/data-uris-and-caching
Erik Dahlström
Exactamente: si el documento svg cambia, el mapa de bits incrustado se volverá a cargar, incluso cuando sea el mismo. Si vinculamos a una URL http, esto se puede almacenar en caché por separado en el documento svg.
GarethOwen
1
Buen punto. En mi comentario a la respuesta de Nick, verá lo racional de incrustar la imagen de mapa de bits en la imagen svg. Aunque tiene razón, la codificación es mala e ineficiente. Debería ser un archivo codificado binario separado movido junto con la imagen svg.
Chmike
2

Puede usar una data:URL para incrustar una versión codificada en Base64 de una imagen. Pero no es muy eficiente y no recomendaría incrustar imágenes grandes. ¿Alguna razón para vincular a otro archivo no es factible?

Mella
fuente
Depende del caso de uso. El caso de uso que estoy considerando es cuando se copia un archivo svg y el acceso a Internet no siempre está disponible (es decir, tarjeta de visita). También permite mantener privado el uso de la tarjeta. Con una imagen vinculada, el propietario de la imagen podría rastrear todas las pantallas de sus tarjetas que pueden ser interesantes para él pero no para el titular de la tarjeta. La imagen svg autónoma tiene sentido.
Chmike
Eso es cierto si usa una URL absoluta que apunta a algún lugar en Internet. Pero es fácil usar una URL relativa, de modo que si el archivo SVG es local, la imagen también lo será. Si también tiene el requisito de que tiene que ser un solo archivo redistribuible, eso cambiará las cosas nuevamente.
Nick
Hay casos de uso en los que desea que un gráfico SVG sea autónomo, es decir, UN archivo que contiene toda la imagen. Tener que transportar / almacenar varios archivos para garantizar que se renderice una imagen no es algo bueno cuando se manejan imágenes en sistemas de archivos; las cosas pueden desincronizarse o caerse con demasiada facilidad.
Minok
-1

También es posible incluir mapas de bits. Creo que también puedes usar transformaciones en eso.

mightyplow
fuente
En efecto. Acabo de encontrar este enlace: w3.org/TR/SVG/struct.html#ImageElement . Lamentablemente, no responde a mi preocupación y noté que no se menciona en la pregunta. Editaré la pregunta.
Chmike