Как уменьшить логотип без потери качества inkscape

Я действительно совсем не графический дизайнер (программист), но я баловался редактированием изображений с помощью GIMP и Inkscape .

Вот моя ситуация: у меня есть красивое, четкое изображение моего логотипа в виде SVGфайла в Inkscape. Однако, когда я пытаюсь экспортировать его как растровое изображение меньшего размера ( PNG), изображение теряет качество и становится размытым. Я пытался изменить настройки и еще много чего, но мне не удалось сохранить четкие изображения меньшего размера.

Вот рассматриваемый SVG - файл с логотипом:введите описание изображения здесь

Вот ссылка на то же изображение, экспортированное в формате PNG меньшего размера:

http://test.fittedthreads.com/images/path3017.png

Любая помощь приветствуется.

Растрирование изображения вызывает небольшое размытие из-за antialiasing, и это более заметно на небольших изображениях, но обычно степень размытия, вызванная сглаживанием, допустима. Я экспортировал ваш логотип в два формата (последний сохраненный в файле: 1389x271 и меньший: 200x39), и оба экспорта выглядят нормально. Не могли бы вы добавить в свой пост один из ваших неудовлетворительных экспортов, пожалуйста?
@PaoloGibellini Только что добавил изображение. Хотя при уменьшении масштаба все выглядит нормально, есть ли способ сохранить детализацию изображения, чтобы при увеличении оно оставалось четким?
Зачем вам «увеличивать» png?
Скотт имеет в виду следующее: png — это двумерный массив целых чисел фиксированного размера. При отображении значения отображаются как квадрат фиксированного размера. При масштабировании квадрат увеличивается на одинаковую величину как по осям x, так и по y, в результате чего визуализируется квадрат большего размера. Размер блока увеличен. Векторные линии хранятся в виде точек (с плавающей запятой) и визуализируются с использованием чисел с плавающей запятой, а затем сэмплируются с текущим выходным разрешением, вы всегда получаете наименьший возможный размер единицы для устройства вывода.
Когда вы экспортируете в растр, такой как .PNG, вы должны сделать разрешение (размер) таким же большим, как самый большой «зум», который вы хотите поддерживать (для получения наилучших результатов). Поэтому, если вы хотите увеличить размер 200 x 35 в пять раз, вам нужно экспортировать его как 1000 x 175, чтобы в файле было достаточно данных для полной плавности при полном увеличении.
Есть ли причина, по которой вы не хотите использовать SVG? Он помещается прямо в тег IMG, как PNG, GIF или JPG, и вы масштабируете его, устанавливая ширину (например, width="202px"). Вы можете использовать PNG в качестве резервной копии для людей, использующих старые браузеры (например, IE8 или более ранние версии), но современные браузеры прекрасно справляются с SVG. Прочтите это для получения дополнительной информации: css-tricks.com/using-svg

Ответы (1)

Как указал @horatio, вполне нормально терять детали при увеличении изображения фиксированного размера.

Предполагая, что конечным пунктом назначения вашего изображения является веб-страница, когда вы выполняете операцию масштабирования, браузер масштабирует растровые изображения , обычно путем интерполяции.

Если вас интересует веб-страница, которую можно масштабировать, вы можете использовать непосредственно SVG в качестве формата изображения (см. комментарий @denmch), зная, что только современные браузеры способны управлять векторными изображениями , или вы можете просто использовать большое изображение ( см. комментарий @mgkrebbs) и указать размер вывода на уровне кода (очевидно, это увеличивает потребление полосы пропускания для страницы).

Например, в html мы можем сравнить три варианта (логотип SVG, маленький PNG, большой PNG):

<table border='1'>
    <tr><td>SVG image</td><td><img src='./thelogo.svg' with='200px' height='39px'></td></tr>
    <tr><td>Big PNG image</td><td><img src='./thelogo_big.png' with='200px' height='39px'></td></tr>
    <tr><td>Small PNG image</td><td><img src='./thelogo_small.png' with='200px' height='39px'></td></tr>
</table>

Результат:

Три логотипа

При масштабировании добиваемся:

Три логотипа увеличены

Небольшое изображение в формате PNG кажется размытым (оно интерполировано по biggerразмеру!), в то время как большое изображение PNG остается неразмытым (оно интерполировано по smallerразмеру) до тех пор, пока масштаб не будет ниже определенного уровня. Изображение SVG останется четким.

Все зависит от того, что вам нужно сделать...

Как уменьшить логотип без потери качества inkscape
СпросиСетьПолитика конфиденциальности1y, 0v