Как сделать чтобы иконки выглядели четко?

Question

[lookingfor2]

Иконки на сайте выглядят размыто, я их брал с макета, они в формате png. Вот пример:



В мобильной версии, вообще выглядит плохо.

Я заметил на одном сайте, все иконки в формате svg, смотрится четко, без размытости.

<i class="svg inline  svg-inline-tizer_svg" aria-hidden="true"><svg data-name="Group 9 copy" xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><defs><style>.cls-1,.cls-2{fill:#307fdd;fill-rule:evenodd}.cls-2{opacity:.1}</style></defs><path data-name="Rounded Rectangle 24 copy" class="cls-1" d="M974,85h-1l-4,4h-1l-1-1V85h-2.1a11.879,11.879,0,0,0,.709-2H968l1,1v2.344L972.266,83H974a2,2,0,0,0,2-2V64a2,2,0,0,0-2-2H942a2,2,0,0,0-2,2V81a2,2,0,0,0,2,2h0.393a11.879,11.879,0,0,0,.709,2H942a4,4,0,0,1-4-4V64a4,4,0,0,1,4-4h32a4,4,0,0,1,4,4V81A4,4,0,0,1,974,85Zm-33.9,7.159c0.01,0,.016-0.011.025-0.014l7.9-2.87c0-.093-0.028-0.181-0.028-0.275V86.7a8.976,8.976,0,0,1-2.954-5.8A1.483,1.483,0,0,1,944,79.5v-3a1.488,1.488,0,0,1,1-1.4V71a6,6,0,0,1,6-6h6a6,6,0,0,1,6,6v4.1a1.488,1.488,0,0,1,1,1.4v3a1.483,1.483,0,0,1-1.046,1.408A8.976,8.976,0,0,1,960,86.7V89c0,0.094-.023.182-0.028,0.275l7.9,2.87c0.009,0,.015.01,0.025,0.014A2.984,2.984,0,0,1,970,95v2a3,3,0,0,1-3,3H941a3,3,0,0,1-3-3V95A2.984,2.984,0,0,1,940.1,92.159ZM950,68V67.141A3.991,3.991,0,0,0,947,71h0a3.972,3.972,0,0,0,3.181-1.6A5.916,5.916,0,0,1,950,68Zm11,3a4,4,0,0,0-4-4h-5v1a4,4,0,0,0,4,4h3a3.959,3.959,0,0,0,2-.555V71Zm0,9V79a1,1,0,0,0,0-2V73.633A5.942,5.942,0,0,1,959,74h-3a5.992,5.992,0,0,1-4.946-2.609A5.92,5.92,0,0,1,947,73h0v4a1,1,0,0,0,0,2v1A7,7,0,0,0,961,80Zm-11,8.062V89a4,4,0,0,0,8,0V88.062A9,9,0,0,1,950,88.062ZM940,97h0a1,1,0,0,0,1,1h26a1,1,0,0,0,1-1V95a0.986,0.986,0,0,0-.788-0.957l0-.012-7.659-2.782a5.99,5.99,0,0,1-11.112,0l-7.659,2.782,0,0.012A0.986,0.986,0,0,0,940,95v2Zm18-18h-1a1,1,0,0,1,0-2h1A1,1,0,0,1,958,79Zm-1.716,2.307a1,1,0,1,1,1.43,1.39l0.01,0.01A5.617,5.617,0,0,1,953.973,84a5.424,5.424,0,0,1-3.677-1.28l0.007-.006a0.995,0.995,0,1,1,1.435-1.375l0,0A3.206,3.206,0,0,0,954,82a3.106,3.106,0,0,0,2.282-.695ZM951,79h-1a1,1,0,0,1,0-2h1A1,1,0,0,1,951,79Z" transform="translate(-938 -60)"></path><path data-name="Rounded Rectangle 30" class="cls-2" d="M977,80v3l-1,1h-3l-3,3h-1a2,2,0,0,1-2-2V67a2,2,0,0,1,2-2h7a2,2,0,0,1,2,2V80h-1Zm-8,14v3l-1,2H940l-1-1,13-5,1,1,2,2h3l4-3,2-1,3,1ZM956,73l-3-1-1-1-1-2V66h6l4,1,1,2v4h-6Z" transform="translate(-938 -60)"></path></svg>
</i>

Может кто знает, как эффективно бороться с плохим качеством иконок или правильно переводить в формат svg как в примере выше из png?

Онлайн сервисы плохо с этим справляются.

Answer 1

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

Не стоит надеяться, что взяв растровое изображение можно получить векторное. Да, можно, но это аншлаг, обычно наоборот. Поэтому:
1. Нет ничего сложного в том, чтобы набросать среднестатистический флаг от руки в любом редакторе изображения векторного формата, от AI до Inkscape. А некоторые типа России, Украины можно вообще рисовать программно, это 3 и 2 полигона соответственно.
2. Почти всегда и все флаги можно найти уже в готовом svg -формате где-то в интернетах. Например тут.