unkstd

в точности такие картинки не найти. ну или в глубинах интернета. из всего этого можно только достать иконки которые по центру. material design icons гугли

1) растрируй фигуру(слой->растрировать->фигуру).
2) делаешь прямоугольник через инструмент "прямоугольная область" или же "выделение"(смотри картинку).
3) затем берёшь ластик и выделенную область стираешь.
4) Profit!

в блоке где ты хочешь картинку надо стиль прописывать в аргументе style что-бы всё сработало. просто копируй следующее и вставь в тег там где аргументы:

style="background-image: url(<?php bloginfo('template_directory')?>/media/third.jpg)"

лично я так вставлял картинку и всё работало

просмотри файл svg в редакторе -> копируй весь код кроме тега xml -> вставь всё это дело туда куда тебе надо -> как в html можно элементы которые ты хочешь сделать интерактивными называть через классы -> ну и пошло поехало. только если ты хочешь творить такие вещи как эффекты при наведении или градиенты тут тебе гугл в помощь. надеюсь трудностей не возникнет
p.s стили надо писать внутри svg через тег style