Вот так можно сохранить в векторном виде
Нужно сверстать как на этом макете
Как можно такое сверстать с картинкой в шестиугольнике и с текстом?
Вот так можно сохранить в векторном виде
Нужно сверстать как на этом макете
Как можно такое сверстать с картинкой в шестиугольнике и с текстом?
Собственно не сложно это
<svg viewBox="0 0 1000 800" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="ptn" patternUnits="userSpaceOnUse" width="100%" height="100%">
<image xlink:href="https://edem-v-gosti.ru/upload/iblock/e58/92198620.jpg"
x="0" y="0" width="100%" height="100%"/>
</pattern>
</defs>
<path transform="translate(34,0)" d="M0,400 40,340 110,340 150,400 110,460 40,460 " fill="url(#ptn)"/>
<path d="M20,400 70,330 920,330 990,400 920,470 70,470z" fill="none" stroke="#000" stroke-width="2"/>
<text x="220" y="370" font-size="40" text-transform="uppercase">Продукция высокого качества</text>
<text font-size="18px">
<tspan x="220" y="395">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi odit explicabo dolor inventore</tspan>
<tspan x="220" y="415">perferendis minima cumque reprehenderit iste laborum culpa praesentium suscipit asperiores</tspan>
<tspan x="220" y="435">necessitatibus aperiam at unde itaque, saepe temporibus quam, accusamus laudantium?</tspan>
<tspan x="220" y="455">quibusdam minus. Aspernatur, ad nulla iure eveniet ducimus voluptatibus sed</tspan>
</text>
</svg>
А это по макету
<svg viewBox="0 0 1000 800" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="ptn" patternUnits="userSpaceOnUse" width="100%" height="100%">
<image xlink:href="https://edem-v-gosti.ru/upload/iblock/e58/92198620.jpg"
x="0" y="0" width="100%" height="100%"/>
</pattern>
</defs>
<path d="M20,400 70,330 920,330 990,400 920,470 70,470z" fill="none" stroke="#000" stroke-width="2"/>
<path transform="translate(0,-200)scale(1.5)" d="M0,400 40,340 110,340 150,400 110,460 40,460 " fill="url(#ptn)"/>
<text x="260" y="370" font-size="30" text-transform="uppercase">Продукция высокого качества</text>
<text font-size="14px">
<tspan x="260" y="395">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi odit explicabo dolor inventore</tspan>
<tspan x="260" y="415">perferendis minima cumque reprehenderit iste laborum culpa praesentium suscipit asperiores</tspan>
<tspan x="260" y="435">necessitatibus aperiam at unde itaque, saepe temporibus quam, accusamus laudantium?</tspan>
<tspan x="260" y="455">quibusdam minus. Aspernatur, ad nulla iure eveniet ducimus voluptatibus sed</tspan>
</text>
</svg>