3

Имеется вектор, при больших размерах он имеет хорошие границы, но при уменьшении размера от 25px - вектор начинает себя вести очень странно! Появляется эффект пиксилизации на границах!

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 800"><g stroke="#fff" stroke-miterlimit="10"><use xlink:href="#B"/><use xlink:href="#B" y="252"/><use xlink:href="#B" y="496"/></g><defs ><path id="B" d="M780.5 169.6a42 42 0 0 1-41.9 41.9H61.3a42 42 0 0 1-41.9-41.9v-.8a42 42 0 0 1 41.9-41.9h677.3a42 42 0 0 1 41.9 41.9v.8z"/></defs></svg>

Иконка в 50px

Вектор в размере width: 50px;

Иконка в 20px

Вектор в размере width: 20px;

Как видно у вектора у которого width:20px; появились серые или полупрозрачные полоски. Можно ли от них как либо избавится, может не правильно нарисован сам вектор?

Уже в стилях прописал shape-rendering: geometricPrecision;

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

Бывает что на определенных размерах вектор выглядит идеально, а на некоторых отвратительно.

1 ответ 1

6

Пиксилизация происходит из-за того, что координаты имеют дробную часть.
В вашем примере: d="M780.5 169.6a42

Вот как это выглядит :

введите сюда описание изображения

У SVG стандартная, целочисленная величина - 1px поэтому при рендеринге дробной части она добивается до целого серыми тонами.

Посмотрите ответ на Enso.

Кратко:

  1. Используйте целочисленные svg значения координат
  2. Используйте атрибут shape-render = "crispEdges"
  3. Если возможно изменение дизайна, избегайте контрастных цветов границ.

Практические советы

  • Если нужна стандартная иконка, то лучше взять готовую, которую рисовали профессионалы Верный показатель - небольшой код

Если хочется нарисовать самостоятельно, то необходимо:

  1. Выбирать минимально-достаточные размеры viewBox
  2. Помнить, что ширина линии размещается симметрично относительно осевой. Если ширина линии 4px, то 2px будут внешними. Эта одна из причин подрезки контуров.

Ниже пример расположения линии шириной 1px Видите по полпикселя относительно осевой

введите сюда описание изображения

  1. Рисовать лучше только одиночными линиями, так как при двойном контуре невозможно сделать анимацию линий.

В вашем примере я нарисовал три линии, шириной 4px, концы линий закруглены stroke-linecap:round;

введите сюда описание изображения

Ниже код:

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"  height="10vh"
viewBox="0 0 40 40" version="1.1" style="border:1px solid red">
<style>
.s0{
	fill:none;
	stroke-linecap:round;
	stroke-width:4;
	stroke:#000;
}

</style>  
  <path d="M5 10 35 10" class="s0"/>
  <path d="M5 20 35 20" class="s0"/>
  <path d="M5 30 35 30" class="s0"/>
</svg>

Для изменения размера иконки, используйте - height="10vh"
Красная рамка показывает размеры холста SVG, удобно при отладке, после завершения удалите - style="border:1px solid red"

8
  • 1
    @МаксимСиваконь Рисовал в Inkscape, в принципе можно в любом векторном редакторе После использовал оптимизатор SVG-EDITOR 13 дек 2019 в 4:25
  • 1
    я вот пользуюсь таким оптимизатором nano 13 дек 2019 в 4:34
  • 1
    @МаксимСиваконь интересно, а он очищает от мусора, который оставляют за собой векторные редакторы или только сжимает SVG? Посмотрите я делал подборку инструментов для работы с SVG ru.stackoverflow.com/a/925990/28748 13 дек 2019 в 4:39
  • 1
    @МаксимСиваконь Да не за что :) Но чаще нужно чтобы path были не объеденены Я обычно убираю чекбоксы Combine paths where possible и Remove whitespace в режиме Extreme (may alter image quality) легче код читать. Вообще смотрите мой профиль и вы тоже полюбите SVG :) 14 дек 2019 в 5:42
  • 1
    @Bharata Здравствуй дорогой! Долго будешь жить. Сегодня вспоминал тебя, - "куда, Bharata надолго пропал :)" Сотни ответов на ruSO? Почему бы Вам не написать книгу? 14 дек 2019 в 18:25

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.