Как конвертировать картинку файл в svg и вывести ее на странице?

Question

[Kostylev2021]

Вот картинка верх которой нужно преобразовать в svg
нужно эту картинку
преобразовать в svg и вывести в html документе .
Пробовал в формате png на сайте convertio конвертировать но сохраняется пустой файл.
Мне кажется нужно в специальных редакторах конвертировать и не в формате png .
Подскажите как правильно преобразовать эту картинку и вывести ее на странице.

Comments

[Rerurk]

1.в svg такое нет.
2. Png Photoshop. Создать не видимый фон

[Kostylev2021]

Мне написали что можно вставить две svg-шки (сверху и снизу) на вопрос как такое верстать

[ambisinister One]

Inkscape

[Pavstyuk]

А что дизайнер макета не предоставляет материал?
Если нет, то выкрутиться можно. Для этого есть GIMP и Inkscape. Все опенсорс, ставится и прекрасно работает. Чтобы хорошо безболезненно верстать, хотя бы Inkscape знать надо обязательно.
Советую обратить внимание на ресурс бесплатных векторных картинок vecteezy.com
Вот пара подходящий примеров прямо от туда:
один, второй.

[archelon]

Kostylev2021, если у вас эта картинка целиком такая, с рваными краями, то, конечно, не нужен svg, просто используйте ее как есть.

[Ankhena]

Kostylev2021,

Мне написали что можно вставить две svg-шки (сверху и снизу) на вопрос как такое верстать

Это вам помогло бы, если бы не было общего изображение у "верха" и серединки и у "низа" и серединки.

Не майтесь дурью, возьмите одно целое изображение.

Почему из всех предложенных вариантов вы выбрали самый дурацкий, неудобный и не дающий никакого профита? :)

Answer 1

[Степан Воеводин]

В данном случае ничего не остается, только воспользоваться трассировкой в каком-нить инструменте, например Illustrator.

Вот результат таким манипуляций:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 344.4 13.89">
  <path fill="#fff" d="M344.4 4.08c-1.02-.12-2.04-.19-3.05-.35-2.94-.48-5.87-1.01-8.81-1.49-.54-.09-1.19-.2-1.65.01-2.13.94-4.22.29-6.32-.02-.58-.09-.99-.14-1.06.66-.17 2.08-1.89 3.26-3.98 2.82-2.82-.59-5.63-1.33-8.48-1.67-2.12-.26-4.29.01-6.45.03-1.68.01-3.35.07-5.03-.01-.64-.03-1.36-.25-1.87-.63-1.6-1.17-3.29-1.82-5.33-1.75-.97.04-2.02-.36-2.92-.8-1.98-.96-3.42-1.21-4.85 1.67-.25.5-1 .87-1.59 1.04-1.37.41-2.79.61-4.17.98-2.51.67-4.71-.35-6.87-1.3-.83-.36-1.43-.21-2.1.1-5.03 2.34-10.29 3.12-15.78 2.44-.36-.04-.74.02-1.07-.09-1.55-.51-2.4-.04-3.34 1.4-.67 1.01-2.29 1.72-3.58 1.91-2.07.3-4.22.1-6.33.03-1.18-.04-2.36-.33-3.54-.39-.51-.03-1.05.24-1.56.38-.33.09-.65.21-.98.31-.48.16-1.09.18-1.43.49-1.83 1.67-4.02 1.25-6.12 1.04-1.44-.14-2.84-.7-4.27-1.01-.69-.15-1.43-.12-2.13-.22-4.14-.6-8.25.28-12.38.3-3.03.02-6.06-.16-9.09-.19-.46 0-.93.31-1.39.49-.52.21-1.05.66-1.56.63-3.01-.17-6-.45-9.01-.7-.16-.01-.32-.12-.46-.1-3.91.57-7.82 1.13-11.72 1.77-.49.08-1.01.5-1.36.9-.67.77-1.47.92-2.44.93-3.62.02-7.24.29-10.85.15-3.32-.13-6.68-.42-9.93-1.09-2.03-.42-3.95-1.41-6.12-1.27a.655.655 0 0 1-.45-.14c-1.84-1.59-4.12-.74-6.18-1.13-.26-.05-.58 0-.82.1-2.09.93-4.14.37-6.16-.21-3.02-.88-6-1.95-9.04-2.77-2.16-.59-4.4-.86-6.59-1.36-.58-.13-1.06-.74-1.64-.83-.96-.15-1.96-.1-2.94-.04-.52.03-1.03.38-1.55.39-2.71.04-5.43.02-8.14.01-3.14 0-6.06.79-8.79 2.33-1.71.96-3.49.96-5.33.46-.57-.16-1.2-.4-1.74-.3-2.44.46-4.73-.11-7.01-.83-1.64-.51-3.24-.76-5.01-.55-1.37.19-2.84-.41-4.28-.6-.63-.08-1.33-.11-1.93.05-2.07.58-3.96.6-5.82-.77-.57-.42-1.71-.31-2.52-.13-1.49.33-2.79-.11-4.22-.38-2.78-.52-5.6-1.36-8.53-.11-1.1.47-2.57.01-3.88.02-.39 0-1.03.09-1.11.3-.43 1.21-1.36.82-2.1.67-1.46-.31-2.88-.81-4.33-1.16-.93-.22-1.89-.31-2.84-.41-1.19-.14-2.21.18-3.24.86-.8.54-1.84.92-2.8 1.01-2.28.21-4.58.34-6.86.24-1.73-.08-3.41-.48-4.97-1.51-1.08-.71-2.49-1.14-3.79-1.24-.85-.07-1.8.62-2.66 1.07-1.94 1-3.99 1.55-6.16 1.72V0h344.4v4.08z"/>
</svg>

Answer 2

[Фёдор]

Вам уже дали ответ в прошлой теме по этой же картинке и предложили 2 варианта исполнения. Объедините слои в одну группу и сохраните в png формате.

Почитайте про другие форматы изображений.

spoiler

https://webref.ru/layout/html5-css3/img/format