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

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

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

Ответ 1

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

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

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

Вот полный пример из svg testsuite.

Ответ 2

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

Ответ 3

Для предоставления данных изображения вы можете использовать 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-преобразования.

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

Ответ 4

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

Ответ 5

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