Поддерживает ли 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