Как вставить картинку внутрь svg разметки?

Question

[V-ampre]

Всем привет, вопрос такой: есть схема зала в виде структуры тегов svg которые генерируются динамически, внутрь этой структуры надо вставить изображение (логотип).

Есть ли возможность сделать это примерно как вставка картинки в html, т.е просто с помощью тега?

Answer 1

[AngReload]

Можно так:

<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>

А можно так:

<svg width="700" height="660">
  <defs>
    <pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="1" width="1">
      <image x="0" y="0" xlink:href="url.png"></image>
    </pattern>
  </defs>
  <circle id='top' cx="180" cy="120" r="80" fill="url(#image)"/>
</svg>

https://jsfiddle.net/7uc2pohg/1/

Comments

[V-ampre]

а png будет масштабироваться вместе с окружающим svg?

[Moskus]

V-ampre, вы про масштабирование в вопросе нихрена не сказали. Даже если будет, то выглядеть это будет, естественно, также уродливо, как любая растровая картинка в разрешении, отличном от оригинального.

[AngReload]

V-ampre, да конечно, там ведь указаны размеры в SVG. Будет скейлиться как и любой другой svg-элемент.
Но, как и говорит чел выше, качество ресайза будет таким же как и у обычной картинки. А ведь логотип выглядит так как будто его делали векторным, но сохранили в PNG. Вам бы спросить, может художник давал исходники?

[V-ampre]

AngReload, заказчик потерял исходники))