Как поставить png/jpg картинку в качестве фона svg?

Question

[Ваня Петило]

Здравствуйте!
Очень-очень нужна помощь от очень-очень экспертов.
Что есть в наличии: дизайн-макет, два рандомных фото из яндекса и никаких идей.
Что требуется: подставить на требуемые места изображения. На место красной и зелёной фигур, см. ниже.


С зелёной формой вопросов никаких нет -- border-radius на 100% и ок. Но что делать с красной формой? Может как-то использовать маску, svg, что-то ещё? Много перечитал информации, но я либо не там ищу, либо не то. Вариант конвертировать изображение в base64 и сунуть внутрь svg сразу в топку -- слишком накладно хранить изображение целиком в БД (вместо просто ссылки на него), а все изображения будут храниться в ней.

Comments

[Олег]

Узнал новое про формат после вашего вопроса.
https://www.w3.org/TR/SVG/struct.html
5.1.3. Definitions

structurally external element
Elements that define its structure by reference to an external resource. Specifically, the following elements are structurally external elements when they have an ‘href’ attribute: ‘audio’, ‘foreignObject’, ‘iframe’, ‘image’, ‘script’, ‘use’ and ‘video’.

Оказывается они тоже не безопасными могут быть :( Формат позволяет внедрять внешние ресурсы.

А по вашему вопросу сильно не помогу, но попробуйте слоями сделать
1. фон
2. картинка прямоугольная со скруглением
3.круг с заливкой
4. аватарка

в css стили можно писать для субэлементов svg

[Ваня Петило]

Олег, уже пробовал ставить туда круг с залиткой и лишь поверх аватарку -- слишком заметно, там на фоне градиент :(
+ тени очень сильно всё ломают

Answer 1

[Арсений Матыцин]

Для сложной формы да, SVG-маску, для кругляша хватит border-radius-а. Впрочем ничего не мешает сгенерировать SVG прямо в теле HTML. Как вставлять изображения в тело или в качестве фона — смотри спецификацию SVG.

Comments

[Ваня Петило]

Вы имеете в виду вот такой способ?


Увы, он не работает. Фреймворк (VueJS) отчаянно не позволяет мне динамически подставить туда ссылку на изображение.

[Ваня Петило]

UPD: Так, ладно, мне удалось вставить изображение в тело способом выше. Просто нужно было убрать xlink.
Но это не делает вопрос решенным -- выреза под аватарку нет, я получил просто скруглённый прямоугольник.

[Арсений Матыцин]

Ваня Петило, у vue есть определенный подход для вывода атрибутов, зачем идти вопреки, если можно нагуглить, как это делать правильно?)

[Ваня Петило]

Арсений Матыцин, да, знаю х) меня просто немного сбил xlink: , раньше не имел дела с ним. Побоялся, что если уберу -- сломаю всё. Но нет, не сломал, всё заработало

Answer 2

[Ваня Петило]

Итак, немного отдохнув и затем вернувшись к разметке и стилям я продолжил шаманить и всё таки, у меня получилось. Спасибо Арсений Матыцин за подтверждение того, что тут должна быть SVG-маска.
Для тех, кто тоже пытался или кому интересно, вот разметка и стили рабочего варианта: