Как изображение из png перевести в svg код?

Question

[WebforSelf]

Наткнулся на сайт где иконки сделаны посредством SVG кода

<svg class="social_icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
    <path fill="currentColor" d="M14.194 9.824c0 0 1.284 1.268 1.601 1.855 0.009 0.013 0.013 0.022 0.014 0.028 0.129 0.217 0.161 0.387 0.098 0.512-0.107 0.207-0.47 0.311-0.593 0.32 0 0-2.206 0-2.269 0-0.158 0-0.487-0.041-0.887-0.318-0.306-0.214-0.61-0.565-0.904-0.909-0.44-0.511-0.82-0.954-1.205-0.954-0.049 0-0.097 0.008-0.143 0.024-0.291 0.092-0.661 0.507-0.661 1.613 0 0.346-0.273 0.543-0.464 0.543 0 0-0.991 0-1.039 0-0.354 0-2.198-0.124-3.832-1.847-2.003-2.11-3.802-6.343-3.82-6.381-0.112-0.274 0.123-0.423 0.377-0.423h2.291c0.307 0 0.407 0.186 0.477 0.352 0.081 0.191 0.381 0.957 0.873 1.817 0.797 1.399 1.287 1.968 1.678 1.968 0.074 0 0.144-0.018 0.21-0.056 0.511-0.281 0.416-2.107 0.392-2.483 0-0.073-0.001-0.815-0.263-1.174-0.187-0.257-0.507-0.357-0.699-0.394 0.052-0.075 0.161-0.189 0.302-0.256 0.35-0.175 0.983-0.2 1.611-0.2h0.349c0.681 0.010 0.857 0.053 1.105 0.116 0.499 0.119 0.508 0.442 0.464 1.543-0.013 0.314-0.026 0.668-0.026 1.085 0 0.089-0.004 0.188-0.004 0.289-0.015 0.564-0.035 1.2 0.364 1.462 0.051 0.032 0.11 0.049 0.172 0.049 0.138 0 0.552 0 1.674-1.925 0.492-0.85 0.873-1.853 0.9-1.928 0.022-0.042 0.089-0.16 0.17-0.208 0.062-0.038 0.144-0.044 0.187-0.044h2.695c0.294 0 0.493 0.044 0.532 0.156 0.065 0.18-0.013 0.73-1.243 2.394-0.207 0.277-0.389 0.517-0.549 0.726-1.115 1.464-1.115 1.538 0.066 2.649z"></path>
</svg>

Есть иконка в PNG , как ее преобразовать в данный код?

Comments

[Lynn «Кофеман»]

Иконка vk в svg наверняка гуглится

В общем случае, только нарисовать заново.

[Сергей delphinpro]

1 путь
Найти такую же https://www.flaticon.com/search?word=vk

2 путь
Нужен растр высокого разрешения, ориентировочно 256-512 пикселей.
Грузим раст в иллюстратор, делаем трассировку, редактируем при необходимости.
Необходимость в редактировании будет тем меньше, тем выше разрешение исходника.

Answer 1

[Andrew]

Нарисовать

Comments

[WebforSelf]

В смысле? только в векторе рисовать и тогда код можно будет взять?

[Andrew]

WebforSelf, ну да, либо ручками координаты прописывать в path d="

[Rustam Bainazarov]

WebforSelf, да, именно нарисовать. Вставлять такого вида растр в вектор совершенно не надо, ничего от этого вы не получите.

Answer 2

[Николай Чуприк]

Если это простое контурное изображение, то тогда можно загрузить его в векторный графический редактор, например в Adobe Illustrator, там векторизовать и сохранить в формате svg. Если же это сложное полутоновое изображение, то его конечно тоже можно векторизовать, но это лишено смысла: такая картинка потеряет качество, svg-файл будет огромен, внутри он будет весь кривой-косой с кучей мусора, и всё это будет тормозить.

Но в целом векторизация растрового изображения — это плохая практика, костыль, использование которого оправдано лишь в особых случаях.

Поэтому, если растровая png-картинка проста, лучше её установить в том же Иллюстраторе в качестве подложки и аккуратно перерисовать её в векторе.

Answer 3

[100torsherov]

Есть несколько вариантов

1. Можно воспользоваться онлайн конвертером
   https://jpg2pdf.ru/ru/png2svg но, эта картинка слишком низкого разрешения, вряд ли получится хорошо
   
2. Конвертировать с помощью Inkscape или Adobe Illustrator
   
3. Нарисовать её в Inkscape или Adobe Illustrator, как предлагает Николай Чуприк