Поддерживает ли SVG встраивание растровых изображений?

является ли SVG-изображение чисто векторным или мы можем объединить растровые изображения в SVG-изображение ? Как насчет преобразований, применяемых к растровым изображениям (перспектива, сопоставления и т. д.) ?

редактировать: изображения могут быть включены в SVG по ссылке. См.http://www.w3.org/TR/SVG/struct.html#ImageElement. Мой вопрос был в том, могут ли растровые изображения быть включены в svg, чтобы изображение svg было автономным. В противном случае, когда изображение SVG отображаемая ссылка должна быть выполнена, а изображение загружено. По-видимому.файлы SVG просто XML-файлы.

121
bitmapimage image svg

5 ответов

Да, вы можете ссылаться на любое изображение из <image> элемент. И вы можете использовать uri данных сделать svg полностью автономным. Пример:

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

точки-это то, где вы добавляете закодированные данные base64, Редакторы векторной графики, которые поддерживают svg, обычно имеют возможность сохранения со встроенными изображениями. В противном случае существует множество инструментов для кодирования в base64 и из него.

вот полный пример из svg объекта testsuite.

167

Я разместил скрипку здесь, показывая данные, удаленные и локальные изображения, встроенные в SVG, внутри 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>
20

можно использовать URI данных для предоставления данных изображения, например:

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

изображение будет проходить все обычные преобразования svg.

но этот метод имеет недостатки, например, изображения не будет кэшироваться браузером

16

вы можете использовать data: URL-адресом для встраивания кодированной версии изображения Base64. Но он не очень эффективен и не рекомендовал бы встраивать большие изображения. По какой причине ссылка на другой файл невозможна?

2

его можно добавить рисунки. Я думаю, что вы также можете использовать преобразования на этом.

-1