SVG prend-il en incorporant des images bitmap ?

Question

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

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

Answer 1

Oui, vous pouvez faire référence à n'importe quelle image de l' <image> élément. Et vous pouvez utiliser les données d'uri pour 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.

Voici un exemple de l'svg testsuite.

Answer 2

J’ai posté un violon ici, afficher les données, distant et images locales intégrées dans SVG, à l’intérieur d’une page HTML :

http://JSFIDDLE.net/MxHPq/

Answer 3

Vous pouvez utiliser un URI de données pour fournir les données de l’image, par exemple :

L’image va passer par toutes les transformations svg normal.

Mais cette technique présente des inconvénients, par exemple l’image ne va pas être mise en cache par le navigateur

Answer 4

Vous pouvez utiliser un `` URL pour incorporer une version codées en Base64 d’une image. Mais il n’est pas très efficace et ne recommanderais incorporant des images volumineuses. N’importe quelle raison qui relie à un autre fichier n’est pas faisable ?

Answer 5

Il est également possible d’inclure des images bitmap. Je pense que vous pouvez également utiliser des transformations là-dessus.