Размытый логотип SVG на веб-странице

Я создал svgлоготип для веб-сайта ( http://prionts.com.au/ ). К сожалению, логотип на экране выглядит размытым. Это особенно заметно на ставне «О» и тексте «Фотография Рио Джонса». Изображение ниже показывает, что я имею в виду.

Логотип домашней страницы Принтс

Немного информации в помощь:

  • Я построил логотип размером 2520 на 1110 пикселей. В таком размере он выглядит красиво и хрустяще. Он отображается на веб-странице шириной 210 ​​пикселей или размером 1/12. Это слишком большое уменьшение размера?
  • Написание — это текст, преобразованный в план.
  • Активы не размещены идеально по пикселям. Я попытался сдвинуть все точки затвора до идеального края пикселя, но, похоже, это не улучшило его.

Нужно ли мне:

  • Создать логотип с разрешением, в котором он будет отображаться? Я думал, что на 210 я действительно начну терять способность утончать вещи - это всего 8 пикселей в ширину на букву для «Фотографии Рио Джонса».
  • Убедитесь, что все точки идеальны по пикселям?
  • Преобразовать в png?
  • Использовать текст svg вместо контура? Я думал об этом, но проблема с кросс-браузерностью.
  • Или что-то другое?

Я был бы признателен за любые советы по тому, как сделать этот логотип красивым и понятным.

Веб-сайт выглядит идеально до пикселя на моем экране. Вы уверены, что не просто слишком сильно увеличиваете масштаб или достигаете предела разрешения вашего монитора? Потому что остальная часть вашего скриншота тоже имеет более низкое разрешение.
@ Лучано. Зум был 100%. Экран шириной 1680 пикселей. Не самый последний и лучший, но, безусловно, должен быть достаточно большим. Я сделал снимок на Chrome. Логотип выглядит лучше в Firefox и почти идеален на мобильных устройствах. Я думаю, разные способы рендеринга svg.
Логотип мне тоже нравится. Никакой заметной разницы в Firefox/Chrome, при использовании монитора 1600 x 900, даже ваш скриншот выглядит нормально в полном размере - возможно, я слепой?!?! Все мониторы имеют пиксели, к сожалению, такова жизнь.
Как говорили другие, мне кажется, что все в порядке. Я вижу , где могут быть более четкие линии, но для меня они выглядят такими же четкими, как и другие логотипы в Интернете, и довольно стандартными. Предложения, которые вы предложили о создании логотипа с предполагаемым размером дисплея и идеальным пикселем, могут помочь, но я действительно не стал бы тратить слишком много времени, если только это вас действительно не беспокоит.
@Мэнли и другие. Вы, ребята, слишком добры. Теперь я немного меньше беспокоюсь об этом. Больше всего меня раздражал логотип в левом верхнем углу.

Ответы (2)

О, да. Я получил ваш вопрос сейчас. Я полагаю, что вас беспокоят неровные круглые линии логотипа на левой панели . "прионты" Я очень хорошо могу это связать, всякий раз, когда мы пытаемся создать что-то наклонное, появляются эти зазубренные края.

Мой лучший выбор в этом случае может заключаться в том, что вы сохраните букву «О» отдельно и экспортируете ее в PNG 24, а затем поместите между «отпечатками» и объедините свой логотип.

Вы также можете попробовать это с другими форматами файлов, но PNG 24 даст вам лучший вариант прозрачности.

Не забудьте оптимизировать его для Интернета.

Это слишком поздно и может быть не вашей проблемой, но для других людей, которые могут сюда приехать:

Если вы используете фильтры SVG, результат будет напоминать растровое изображение.

Фильтры SVG работают путем растеризации SVG.

Размытый логотип SVG на веб-странице
СпросиСетьПолитика конфиденциальности1y, 0v