SVG prend-il en charge l'incorporation d'images bitmap?

147

Une image SVG est-elle purement vectorielle ou pouvons-nous combiner des images bitmap en une image SVG? Que diriez-vous des transformations appliquées sur les images bitmap (perspective, mappages, etc.)?

Edit : Les images peuvent être incluses dans un SVG par référence de lien. Voir http://www.w3.org/TR/SVG/struct.html#ImageElement . Ma question était en fait de savoir si des images bitmap peuvent être incluses dans le svg afin que l'image svg soit autonome. Sinon, chaque fois que l'image svg est affichée, le lien doit être suivi et l'image téléchargée. Apparemment, les fichiers .svg sont simplement des fichiers xml.

image svg bitmapimage chmike
la source

Réponses:

207

Oui, vous pouvez référencer n'importe quelle image de l' <image>élément. Et vous pouvez utiliser des uri de données pour rendre le svg entièrement autonome. Un exemple:

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

Les points sont l'endroit où vous ajouteriez les données encodées en base64, les éditeurs de graphiques vectoriels prenant en charge svg ont généralement une option pour enregistrer avec des images intégrées. Sinon, il existe de nombreux outils pour l'encodage vers et depuis base64.

Voici un exemple complet de la suite de tests svg.

Erik Dahlström
la source
2
@Aleksandar c'est une question distincte, et je suis sûr que vous pouvez trouver une réponse sur ce site (encoder quelque chose en base64 n'est pas spécifique à svg).
Erik Dahlström
1
@Erik - Supposons que la même image soit répétée mille fois dans le même fichier svg. Puis-je placer des données base64 à un endroit et laisser l'image faire référence à ces données à partir de là?
Rohit Vats
3
@Erik - Peu importe, j'ai eu ma réponse d'ici - stackoverflow.com/questions/16685014/… . La réponse parle de regroupement là-bas. :)
Rohit Vats
3
N'oubliez pas de déclarer l'espace xlinkde noms tel xmlns:xlink="http://www.w3.org/1999/xlink"
quel
1
FYI: selon mon expérience, le navigateur Chrome affiche cette image même si vous ne spécifiez pas widthet heightdans la balise d'image svg. Cependant, Firefox et IE n'affiche pas l'image si vous omettez ces attributs. Assurez-vous donc de les spécifier!
Stonecrusher
23

J'ai posté un violon ici, montrant des données, des images distantes et locales intégrées 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>
Davestewart
la source
17

Vous pouvez utiliser un URI de données pour 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 passera par toutes les transformations svg normales.

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

GarethOwen
la source
si l'URI de données est requis par SVG, alors ce n'est probablement pas un inconvénient - je modifierai ma réponse
GarethOwen
Les images intégrées (URI de données) seront mises en cache avec le document dans lequel elles se trouvent, voir par exemple stackoverflow.com/questions/4791807/data-uris-and-caching
Erik Dahlström
Exactement - si le document svg change, le bitmap incorporé sera rechargé, même s'il est identique. Si nous établissons un lien vers une URL http, cela peut être mis en cache séparément dans le document svg.
GarethOwen
1
Bon point. Dans mon commentaire à la réponse de Nick, vous verrez le rationnel d'incorporer l'image bitmap dans l'image svg. Bien que vous ayez raison, l'encodage est mauvais et inefficace. Il doit s'agir d'un fichier codé binaire séparé déplacé avec l'image svg.
chmike
2

Vous pouvez utiliser une data:URL pour incorporer une version encodée en Base64 d'une image. Mais ce n'est pas très efficace et ne recommande pas l'incorporation de grandes images. Une raison quelconque de créer un lien vers un autre fichier n'est pas possible?

pseudo
la source
Cela dépend du cas d'utilisation. Le cas d'utilisation que je considère est celui où un fichier svg est copié et l'accès à Internet n'est pas toujours disponible (par exemple, carte de visite). Cela permet également de garder l'utilisation de la carte privée. Avec une image liée, le propriétaire de l'image pourrait suivre tous les affichages de ses cartes qui peuvent être intéressants pour lui mais pas pour le titulaire de la carte. L'image svg autonome a du sens.
chmike
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 le sera aussi. Si vous avez également l'exigence qu'il doit s'agir d'un seul fichier redistribuable, cela change à nouveau les choses.
Nick
Il existe des cas d'utilisation pour lesquels vous souhaitez qu'un graphique SVG soit autonome, c'est-à-dire UN fichier contenant toute l'image. Le fait de devoir transporter / stocker plusieurs fichiers pour s'assurer qu'une image est rendue n'est pas une bonne chose lors de la gestion d'images sur des systèmes de fichiers - les choses peuvent se désynchroniser ou être supprimées trop facilement.
Minok
-1

Il est également possible d'inclure des bitmaps. Je pense que vous pouvez également utiliser des transformations à ce sujet.

puissant
la source
En effet. Je viens de trouver ce lien: w3.org/TR/SVG/struct.html#ImageElement . Malheureusement, cela ne répond pas à ma préoccupation qui, j'ai remarqué, ne figure pas dans la question. Je vais modifier la question.
chmike le