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

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

134 голосов
/ 06 июня 2011

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

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

Ответы [ 5 ]

186 голосов
/ 06 июня 2011

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

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

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

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

21 голосов
/ 21 января 2013

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

Вы можете использовать Data 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.

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

2 голосов
/ 06 июня 2011

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

0 голосов
/ 06 июня 2011

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

...