Зачем тег image в SVG и как с этим работать?

Question

[Sector567]

В авакод скачал картинку в формате svg. Но работать с ней как с svg нельзя, на fill картинка не реагирует, при увеличении появляются пиксели, и есть подозрения, что это из-за того, что внутри этого svg лежит тег image.
Что это? Зачем в svg image? Получается что внутри обычное растровое изображение? Как с этим работать?

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="10" viewBox="0 0 14 10"><g><g><image width="14" height="10" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAKCAYAAACE2W/HAAAAdElEQVQoU5WR0RHAIAhDYQy7oh2nrtiOYYPCeVrxKp/IMwkw7VZ8MlEm3uJOQBkc6j8YbyWAXIGZijQqBf8Tg8rcUeYA9j99rE+gZtWDzc3EUbM3wrYIpJFMo5O+IQrS0c3V7DXTGpRXvdMK8s8hth0lU34BA1wwqwjghXMAAAAASUVORK5CYII="/></g></g></svg>

Comments

[Vladislav]

Это наверное растровое изображение замаскированное под свг

[WapSter]

Да там обычный растр.

Как с этим работать?

Закажи у дизайнера нормальные svg или сохраняй в png/jpeg и работай как обычно.

[Sector567]

Владислав, а для чего это нужно?

[Sector567]

WapSter, а зачем вообще в svg вставлять растровую картинку?

[WapSter]

Sector567, не зачем, но ты у редактора попросил svg он тебе как мог и выдал svg.

[Sector567]

WapSter, понял, сяб

Answer 1

[quiplunar]

Как с этим работать?

Никак!)

Обычная растровая фотография может быть закодирована в base64 и вставлена inline в css, html, svg. В вашем примере обычная фотография закодирована в base64 и вставлена в svg. Считайте что это обычная фотография.

Скачайте эту же фотографию в jpeg и работайте с ней.

Comments

[Sector567]

а зачем их вставляют в тот же svg?

Answer 2

[Роман Дворянов]

Тэг SVG - это контейнер по своей сути, который позволяет в себе использовать и векторные изображения и растровые, закодированные в base64, а также в SVG можно вставить почти любой html тэг, в том числе и style, и они будут работать

Comments

[Sector567]

А для чего эти контейнеры нужны?
Я просто думал, что svg это чисто для векторной графики. Зачем растровое изображение вставлять в контейнер svg?

[Роман Дворянов]

Sector567, Можно перемешивать вектор с растром таким образом. Например в иллюстраторе рисует дизайнер иконку, сунул готовый фон, растровой картинкой, сверху пару векторных элементов. Вот так и оказывается там тэг img

[Роман Дворянов]

Эти контейнеры нужны, это как лист или холст для рисунка

[Sector567]

Роман Дворянов, понял, спасибо

Answer 3

[Hcuy]

Это язык разметки масштабируемой векторной графики, или просто SVG, очень классная тема. Как по мне лучше всего работу этого языка разметки описал этот участник сообщества Stack Overflow в своем блоге.

Comments

[WapSter]

"Знаток" ты код посмотри, он про закодированную в base64 растровую картинку))

[Hcuy]

WapSter, увидел :) ладненько, я тут лишний

Answer 4

[Александр]

Что делать когда у тебя только растровая версия, а пользователь хочет скачать SVG?
Правильно - использовать тег image+base64 - пусть качает свой SVG.

Самый быстрый способ получить SVG из растра - вставить его фоном и обрисовать ручками. Так как конвертеры много мусора плодят, а пока их настроишь - уже нарисовал.

Comments

[Sector567]

ох, не думаю, что это так легко обрисовать