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

147

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

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

image svg bitmapimage chmike
источник

Ответы:

207

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

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

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

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

Эрик Дальстрём
источник
2
@ Александр, это отдельный вопрос, и я уверен, что вы можете найти ответ на него на этом сайте (кодирование чего-либо в base64 не зависит от svg).
Эрик Дальстрем
1
@Erik - Предположим, у меня повторяется одно и то же изображение тысячу раз в одном SVG-файле. Могу ли я разместить данные base64 в одном месте, и пусть изображение ссылается на эти данные оттуда?
Rohit Vats
3
@Erik - не берите в голову, я получил свой ответ отсюда - stackoverflow.com/questions/16685014/… . Ответ говорит о группировке там. :)
Rohit Vats
3
Не забудьте объявить пространство имен xlinkкак есть: xmlns:xlink="http://www.w3.org/1999/xlink"некоторые браузеры /
зрители
1
К вашему сведению: согласно моему опыту, браузер Chrome отображает это изображение, даже если вы не укажете widthи heightв теге svg image. Однако Firefox и IE не отображают изображение, если вы пропустите эти атрибуты. Поэтому обязательно укажите их!
Камнедробилка
23

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

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

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

GarethOwen
источник
если SVG требует URI данных, то это, по-видимому, не является недостатком - я отредактирую свой ответ
GarethOwen
Встроенные изображения (данные URI) будут кэшироваться вместе с документом, в котором они находятся, см., Например, stackoverflow.com/questions/4791807/data-uris-and-caching
Эрик Дальстрём,
Точно - если документ svg изменится, встроенное растровое изображение будет перезагружено, даже если оно совпадает. Если мы ссылаемся на URL-адрес http, это может быть кэшировано отдельно в документе svg.
GarethOwen
1
Хорошая точка зрения. В моем комментарии к ответу Ника вы увидите рациональное встраивание растрового изображения в изображение SVG. Хотя вы правы, кодировка плохая и неэффективная. Это должен быть отдельный двоичный кодированный файл, перемещаемый вместе с изображением svg.
chmike
2

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

Ник
источник
Это зависит от варианта использования. Я рассматриваю вариант использования, в котором копируется svg-файл, и доступ к Интернету не всегда доступен (например, визитная карточка). ИТ также позволяет сохранить использование карты в тайне. С помощью связанного изображения владелец изображения может отслеживать все показы своих карточек, которые могут быть ему интересны, но не владельцу карточки. Автономное изображение SVG имеет смысл.
Чмике
Это правда, если вы используете абсолютный URL, указывающий куда-то в Интернете. Но использовать относительный URL-адрес легко, так что если файл SVG является локальным, изображение тоже будет. Если у вас также есть требование, чтобы это был один единственный распространяемый файл, то это снова меняет дело.
Ник
В некоторых случаях требуется, чтобы SVG-изображение было автономным, то есть ОДИН файл, содержащий все изображение. При обработке изображений в файловых системах необходимость переносить / хранить несколько файлов для обеспечения визуализации изображения - нехорошая вещь - вещи могут быть несинхронизированы или отброшены слишком легко.
Минок
-1

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

mightyplow
источник
На самом деле. Я только что нашел эту ссылку: w3.org/TR/SVG/struct.html#ImageElement . К сожалению, это не отвечает моей озабоченности, которая, как я заметил, не указана в вопросе. Я отредактирую вопрос.
chmike