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

Question

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

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

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

184

image svg bitmapimage

Источник

user75517 06 июн '11 в 08:56

7 ответов

Решение

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

33

Источник

user1715497 21 янв '13 в 13:51

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

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

23

Источник

user144486 06 июн '11 в 10:07

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

4

Источник

user21399 06 июн '11 в 09:57

Если вы хотите использовать это изображение несколько раз в SVG (см .):

      <image id="img" xlink:href="data:image/png;base64,BASE64_DATA" />

<use href="#img" />
<use href="#img" />

1

Источник

user10018427 19 окт '21 в 16:35

Я придумал несколько решений для рисования космического захватчика в SVG:

В первом методе используетсяpathс . Многократно останавливая и запуская строку, мы можем построить растровое изображение, пройдя строки развертки. Это имеет тот недостаток, что координата y каждой «точки» смещается вверх на 0,5 пикселя, потому что координата «y» рассматривается как серединаstroke-width="1".

      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path
    stroke="black"
    fill="none"
    d="M 4 4 l 1 0
M 10 4 l 1 0
M 5 5 l 1 0
M 9 5 l 1 0
M 4 6 l 7 0
M 3 7 l 2 0
M 6 7 l 3 0
M 10 7 l 2 0
M 2 8 l 11 0
M 2 9 l 1 0
M 4 9 l 7 0
M 12 9 l 1 0
M 2 10 l 1 0
M 4 10 l 1 0
M 10 10 l 1 0
M 12 10 l 1 0
M 5 11 l 2 0
M 8 11 l 2 0"
/>
</svg>

Второй – за счет использования<marker>сmarker-start,marker-mid, иmarker-endатрибуты:

      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <defs>
    <marker
      id="dot"
      viewBox="0 0 1 1"
      refX="0.5"
      refY="0.5"
      markerWidth="1"
      markerHeight="1">
      <rect width="1" height="1" />
    </marker>
  </defs>
  <polyline
    points="4 4 10 4
5 5 9 5
4 6 5 6 6 6 7 6 8 6 9 6 10 6
3 7 4 7 6 7 7 7 8 7 10 7 11 7
2 8 3 8 4 8 5 8 6 8 7 8 8 8 9 8 10 8 11 8 12 8
2 9 4 9 5 9 6 9 7 9 8 9 9 9 10 9 12 9
2 10 4 10 10 10 12 10
5 11 6 11 8 11 9 11"
    fill="none"
    stroke="none"
    marker-start="url(#dot)"
    marker-mid="url(#dot)"
    marker-end="url(#dot)" />
</svg>

Третий метод заключается в определении a и многократном обращении к нему с помощью

      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<g fill="none"><rect id="dot" width="1" height="1"/></g>
<g fill="black">
<use href="#dot" x="4" y="4"/>
<use href="#dot" x="10" y="4"/>
<use href="#dot" x="5" y="5"/>
<use href="#dot" x="9" y="5"/>
<use href="#dot" x="4" y="6"/>
<use href="#dot" x="5" y="6"/>
<use href="#dot" x="6" y="6"/>
<use href="#dot" x="7" y="6"/>
<use href="#dot" x="8" y="6"/>
<use href="#dot" x="9" y="6"/>
<use href="#dot" x="10" y="6"/>
<use href="#dot" x="3" y="7"/>
<use href="#dot" x="4" y="7"/>
<use href="#dot" x="6" y="7"/>
<use href="#dot" x="7" y="7"/>
<use href="#dot" x="8" y="7"/>
<use href="#dot" x="10" y="7"/>
<use href="#dot" x="11" y="7"/>
<use href="#dot" x="2" y="8"/>
<use href="#dot" x="3" y="8"/>
<use href="#dot" x="4" y="8"/>
<use href="#dot" x="5" y="8"/>
<use href="#dot" x="6" y="8"/>
<use href="#dot" x="7" y="8"/>
<use href="#dot" x="8" y="8"/>
<use href="#dot" x="9" y="8"/>
<use href="#dot" x="10" y="8"/>
<use href="#dot" x="11" y="8"/>
<use href="#dot" x="12" y="8"/>
<use href="#dot" x="2" y="9"/>
<use href="#dot" x="4" y="9"/>
<use href="#dot" x="5" y="9"/>
<use href="#dot" x="6" y="9"/>
<use href="#dot" x="7" y="9"/>
<use href="#dot" x="8" y="9"/>
<use href="#dot" x="9" y="9"/>
<use href="#dot" x="10" y="9"/>
<use href="#dot" x="12" y="9"/>
<use href="#dot" x="2" y="10"/>
<use href="#dot" x="4" y="10"/>
<use href="#dot" x="10" y="10"/>
<use href="#dot" x="12" y="10"/>
<use href="#dot" x="5" y="11"/>
<use href="#dot" x="6" y="11"/>
<use href="#dot" x="8" y="11"/>
<use href="#dot" x="9" y="11"/>
</g>
</svg>

Уточнение<rect> <use>вышеприведенное решение состоит в том, чтобы определить двоичные перестановки, которые можно повторно использовать позже. Этот стиль напоминает дни 8-битного программирования со спрайтами:

      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<g fill="none">
<g id="s0001"><rect x="3" width="1" height="1"/></g>
<g id="s0010"><rect x="2" width="1" height="1"/></g>
<g id="s0011"><rect x="2" width="2" height="1"/></g>
<g id="s0100"><rect x="1" width="1" height="1"/></g>
<g id="s0110"><rect x="1" width="2" height="1"/></g>
<g id="s1000"><rect width="1" height="1"/></g>
<g id="s1011"><rect width="1" height="1"/><rect x="2" width="2" height="1"/></g>
<g id="s1100"><rect width="2" height="1"/></g>
<g id="s1101"><rect width="2" height="1"/><rect x="2" width="1" height="1"/></g>
<g id="s1110"><rect width="3" height="1"/></g>
<g id="s1111"><rect width="4" height="1"/></g>
</g>
<g fill="black">
<use href="#s1000" x="4" y="4"/>
<use href="#s0010" x="8" y="4"/>
<use href="#s0100" x="4" y="5"/>
<use href="#s0100" x="8" y="5"/>
<use href="#s1111" x="4" y="6"/>
<use href="#s1110" x="8" y="6"/>
<use href="#s0001" x="0" y="7"/>
<use href="#s1011" x="4" y="7"/>
<use href="#s1011" x="8" y="7"/>
<use href="#s0011" x="0" y="8"/>
<use href="#s1111" x="4" y="8"/>
<use href="#s1111" x="8" y="8"/>
<use href="#s1000" x="12" y="8"/>
<use href="#s0010" x="0" y="9"/>
<use href="#s1111" x="4" y="9"/>
<use href="#s1101" x="8" y="9"/>
<use href="#s1000" x="12" y="9"/>
<use href="#s0010" x="0" y="10"/>
<use href="#s1000" x="4" y="10"/>
<use href="#s0010" x="8" y="10"/>
<use href="#s1000" x="12" y="10"/>
<use href="#s0110" x="4" y="11"/>
<use href="#s1100" x="8" y="11"/>
</g>
</svg>

0

Источник

user881441 23 фев '23 в 04:48

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

-1

Источник

user780156 06 июн '11 в 08:59

Другие вопросы по тегам image svg bitmapimage

user109374 06 июн '11 в 10:02 2011-06-06 10:02 · Accepted Answer · 2011-06-06 10:02

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

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

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

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