image - una - convertir mapa de bits a vectores illustrator
¿SVG admite la incorporación de imágenes de mapa de bits? (5)
¿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 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 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.
Publiqué un violín aquí, mostrando datos, imágenes remotas y locales incrustadas en SVG, dentro de una página HTML:
<!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>
Puede usar un URI de datos para suministrar 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 svg normales.
Pero esta técnica tiene desventajas, por ejemplo, el navegador no almacenará en caché la imagen
Puede utilizar una URL de data: 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?
También es posible incluir bitmaps. Creo que también puedes usar transformaciones en eso.
Sí, puede hacer referencia a cualquier imagen del elemento <image> . Y puede usar los uri de datos 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 debe agregar los datos base64 codificados, los editores de gráficos vectoriales que soportan svg generalmente 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 example completo de svg testsuite.
