Ne SVG prennent en charge l'intégration des images bitmap?

Est une image SVG purement vectorielle ou peut-on combiner des images bitmap en une image SVG ?
Comment sur les transformations appliquées sur les images bitmap (point de vue, les mappages, etc.) ?

Modifier: les Images peuvent être inclus dans une SVG par un lien de référence. Voir http://www.w3.org/TR/SVG/struct.html#ImageElement. Ma question était en fait si les images bitmap peut être inclus à l'intérieur de la svg de sorte que l'image svg serait autonome. Sinon, à chaque fois que l'image svg est affiché le lien doit être suivi et l'image téléchargée. Apparemment .les fichiers svg sont simplement des fichiers xml.

InformationsquelleAutor chmike | 2011-06-06
  1. 186

    Oui, vous pouvez faire référence à n'importe quelle image de la <image> élément. Et vous pouvez utiliser les données d'uri de faire le svg entièrement autonome. Un exemple:

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

    Le nombre de points est l'endroit où vous devez ajouter le encodé en base64 de données, éditeurs graphiques vectoriels que le support du svg ont généralement une option pour l'enregistrement avec des images incorporées. Sinon, il y a beaucoup d'outils pour l'encodage et de base64.

    Ici un exemple de la svg testsuite.

    • Si je n'utilise pas d'éditeurs graphiques vectoriels (par exemple: je veux créer mon fichier svg avec c++ ou Python), comment puis-je obtenir encodé en base64 des données d'image au format bmp?
    • une autre question, et je suis sûr que vous pouvez y trouver une réponse sur ce site (encodage quelque chose en base64 n'est pas svg-spécifique).
    • Supposons que j'ai la même image répétée mille fois dans le même fichier svg. Puis-je passer en base64 de données en un seul lieu et de laisser l'image se référer à des données à partir de là?
    • Jamais l'esprit, j'ai eu ma réponse d'ici - stackoverflow.com/questions/16685014/.... Réponse parle de regroupement de là. 🙂
    • Ne ressemble pas à ce qui est entièrement pris en charge dans iOS encore. Les Bitmaps ne sont pas rendus.
    • Je trouve cela un peu difficile à croire, n'hésitez pas à poster une nouvelle question avec ce que vous avez.
    • b64.io est un excellent outil pour convertir svg en base64
    • N'oubliez pas de déclarer l'espace de noms xlink est : xmlns:xlink="http://www.w3.org/1999/xlink" certains navigateur/spectateur ne peut pas voir votre image sans qu'il
    • Pour info: selon mon expérience le navigateur google Chrome affiche cette image, même si vous ne spécifiez pas widthet height dans le svg balise image. Cependant IE et Firefox n'affiche pas l'image si vous omettez ces attributs. Donc, assurez-vous de spécifier de!

    InformationsquelleAutor Erik Dahlström
  2. 21

    J'ai posté un violon ici, affichage de données, locale et distante d'images embarqués en SVG, à l'intérieur d'une page 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>
    InformationsquelleAutor davestewart
  3. 17

    Vous pouvez utiliser un Les données URI de fournir les données d'image, par exemple:

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

    L'image va passer par tous normal svg transformations.

    Mais cette technique présente également des inconvénients, par exemple, l'image ne sera pas mis en cache par le navigateur

    • si les données URI est requis par SVG, alors ce n'est sans doute pas d'inconvénient, je vais modifier ma réponse
    • Les images incorporées (données Uri) sera mis en cache avec le document, reportez-vous à l'e.g stackoverflow.com/questions/4791807/data-uris-and-caching
    • Exactement - si le document svg changements, le bitmap intégrée sera rechargé, même si c'est le même. Si nous avons un lien vers une URL http, ce qui peut être mis en cache séparément pour le document svg.
    • Bon point. Dans mon commentaire de Nick réponse vous verrez la raison de l'incorporation d'une image bitmap en image svg. Si vous êtes de droite, l'encodage est mauvais et inefficace. Il doit être séparé binaire codé fichier déplacé le long de avec l'image svg.
    InformationsquelleAutor GarethOwen
  4. 2

    Vous pouvez utiliser un données: URL pour intégrer une version encodée en base 64 d'une image. Mais ce n'est pas très efficace et ne le recommande pas l'incorporation d'images de grande taille. Aucune raison de lier à un autre fichier n'est pas faisable?

    • Cela dépend du cas d'utilisation. Le cas d'utilisation que j'envisage est là une svg fichier est copié et l'accès à internet n'est pas toujours disponible (c'est à dire la carte d'affaires). IL permet également de garder l'utilisation de la carte privé. Avec une image liée, le propriétaire de l'image pouvait suivre tous les écrans de ses cartes qui peuvent être intéressantes pour lui mais pas pour le titulaire de la carte. Autonome image svg sens.
    • C'est vrai si vous utilisez une URL absolue pointant vers quelque part sur Internet. Mais il est facile d'utiliser une URL relative, de sorte que si le fichier SVG est local, l'image sera trop. Si vous avez également l'obligation qu'il a d'être un seul et même fichier redistribuable, alors que les changements les choses à nouveau.
    • Il y a des cas d'utilisation pour l'endroit où vous voulez une SVG graphiques pour être autonome - c'est UN fichier qui contient l'ensemble de l'image. Avoir à la transporter/stocker plusieurs fichiers afin de s'assurer qu'une image est rendue n'est pas une bonne chose lorsque vous manipulez des images sur des systèmes de fichiers, les choses peuvent sortir de la synchronisation ou de la tombe trop facilement.
    InformationsquelleAutor Nick
  5. -1

    Il est également possible d'inclure des images bitmap. Je pense que vous pouvez également utiliser des transformations que les.

    • En effet. Je viens de trouver ce lien : w3.org/TR/SVG/struct.html#ImageElement. Malheureusement, il n'a pas répondu à ma préoccupation, j'ai remarqué n'est pas indiqué dans la question. Je vais modifier la question.
    InformationsquelleAutor mightyplow