web-dev-qa-db-fra.com

SVG prend-il en charge l’intégration d’images bitmap?

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

Modifier : Les images peuvent être incluses dans un fichier 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 pouvaient être incluses à l'intérieur du 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.

imagesvgbitmapimage
136
chmike

Oui, vous pouvez référencer n'importe quelle image à partir du <image> élément. Et vous pouvez utiliser data uri's 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 souhaitez ajouter les données encodées en base64. Les éditeurs de graphiques vectoriels prenant en charge svg ont généralement une option permettant d'enregistrer avec des images incorporées. Sinon, il existe de nombreux outils pour l’encodage vers et depuis base64.

Voici un exemple complet de la suite de tests svg.

187
Erik Dahlström

J'ai posté ici un violon montrant des données, des images distantes et locales intégrées à SVG, au sein 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>
21
davestewart

Vous pouvez utiliser un Data URI 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 a des inconvénients, par exemple, l'image ne sera pas mise en cache par le navigateur.

17
GarethOwen

Vous pouvez utiliser un data: _ URL pour incorporer une version d’une image encodée en Base64. Mais ce n'est pas très efficace et ne recommande pas l'intégration d'images volumineuses. Un lien vers un autre fichier est impossible?

2
Nick