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

115

¿Es una imagen SVG puramente vectorial o podemos combinar imágenes de mapa de bits en una imagen SVG? ¿Qué hay de las transformaciones aplicadas en las imágenes de mapas de bits (perspectiva, mapeos, etc.)?¿SVG admite la incorporación de imágenes de mapa de bits?

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 se pueden incluir dentro de la svg para que la imagen svg sea independiente. 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.

Fuente

2011-06-06 chmike

158

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

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

Los puntos es donde deberá añadir los datos codificados en base64, editor de gráficos vectoriales SVG que apoyan por lo general tienen una opción para guardar con imágenes incrustadas. De lo contrario, hay muchas herramientas para codificar hacia y desde base64.

Aquí hay un completo example del svg testsuite.

Fuente

2011-06-06 10:02:53

Si no uso editores de gráficos vectoriales (por ejemplo, quiero crear mi svg con C++ o Python), ¿cómo obtengo los datos base64 de la imagen bmp? – Aleksandar

@Aleksandar es una pregunta aparte, y estoy seguro de que puede encontrar una respuesta en este sitio (la codificación de algo a base64 no es específica de svg). –

@Erik - Supongamos que tengo la misma imagen repetida mil veces en el mismo archivo svg. ¿Puedo colocar datos de base64 en un solo lugar y dejar que la imagen se refiera a esos datos desde allí? –

-1

También es posible incluir bitmaps. Creo que también puedes usar transformaciones en eso.

Fuente

2011-06-06 08:59:36 mightyplow

Indeed. Acabo de encontrar este enlace: http://www.w3.org/TR/SVG/struct.html#ImageElement. Lamentablemente, no responde a mi preocupación, que noté que no se menciona en la pregunta. Voy a editar la pregunta. – chmike

Puede usar un 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?

Fuente

2011-06-06 09:57:37 Nick

Depende del caso de uso. El caso de uso que estoy considerando es dónde se copia un archivo svg y el acceso a Internet no siempre está disponible (es decir, tarjeta de visita). También permite mantener el uso privado de la tarjeta. Con una imagen vinculada, el propietario de la imagen puede rastrear todas las pantallas de sus tarjetas que pueden ser interesantes para él, pero no para el titular de la tarjeta. Self-svg image 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 para 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 cambia las cosas de nuevo. – Nick

Existen casos de uso para los que desea que un gráfico SVG sea independiente, es decir, UN archivo que contiene la imagen completa. Tener que transportar/almacenar varios archivos para asegurar que se represente una imagen no es algo bueno cuando se manejan imágenes en sistemas de archivos: las cosas pueden desajustarse o perderse fácilmente. – Minok

Se puede usar un Data URI para suministrar los datos de 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á a través de todas las transformaciones SVG normales.

Sin embargo, esta técnica tiene desventajas, por ejemplo, la imagen no se almacenan en caché por el navegador

Fuente

2011-06-06 10:07:28 GarethOwen

si el SVG de datos es requerido por SVG, entonces, presumiblemente, esto no es una desventaja. Editaré mi respuesta. – GarethOwen

Las imágenes incorporadas (URI de datos) se almacenarán en caché con el documento en el que se encuentran; consulte, por ejemplo, http://stackoverflow.com/ questions/4791807/data-uris-and-caching –

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, esta puede almacenarse en caché por separado en el documento svg. – GarethOwen

he publicado un violín aquí, que muestra los datos, imágenes remotas y locales integrados 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>

Fuente

2013-01-21 13:51:00 davestewart

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

Respuesta

Cuestiones relacionadas