SVG shape-rendering crispEdges: когда это полезно?

Используйте shape-rendering="crispEdges", если SVG имеет намеренно жесткие, преимущественно прямые края и в конечном размере отображения результат с ним лучше. Если разница ничтожна, оставьте значение по умолчанию auto. На изогнутой графике подсказка может сделать край грубее. Она меняет то, как рендерер рисует существующие фигуры, а не сами фигуры. Спецификация SVG 2 называет это подсказкой и разрешает рендереру уменьшать сглаживание или выравнивать некоторые края по пикселям устройства.

Это различие важно, если маленькая иконка выглядит размытой или логотип после экспорта кажется зубчатым. crispEdges не превращает встроенный PNG в контуры, не исправляет поврежденный контур и не обещает одинаковые пиксели во всех браузерах. Прежде чем менять весь файл, сравните характерную фигуру с auto, crispEdges и geometricPrecision в размерах, которые действительно увидят люди.

О чем crispEdges просит рендерер

У SVG есть четыре значения shape-rendering. Это приоритеты, а не четыре формата экспорта. Значение по умолчанию auto позволяет рендереру балансировать скорость, контраст краев и геометрическую точность. crispEdges предпочитает сильный контраст краев и может подавлять сглаживание; geometricPrecision предпочитает точную геометрию. Справочник атрибутов SVG MDN объясняет, что рендерер может иначе обрабатывать все края либо только почти горизонтальные и почти вертикальные. Обязательного фильтра повышения резкости нет.

Атрибут родительского SVG может наследоваться дочерними фигурами, поэтому задание в корне способно повлиять на круг, который должен оставаться гладким. Вместо этого задайте его отдельному прямоугольнику или контуру. Если одновременно действуют атрибут представления SVG и объявление CSS shape-rendering, приоритет имеет свойство CSS.

Мы сравнили одинаковые фигуры в двух размерах

Мы создали прямоугольный знак на сетке и изогнутый контур как оригинальные фигуры SVG. Разметка, заливки и viewBox были одинаковыми во всех трех столбцах; менялось только значение shape-rendering. Каждая фигура отображалась в размере 63 и 111 CSS-пикселей в Chromium при масштабе браузера 100%. Изображение — снимок этого локального теста в браузере, а не иллюстрация вымышленного результата.

Одинаковая геометрия SVG, три подсказки, два размера

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

Это один рендеринг Chromium, а не исследование совместимости браузеров. Просмотрщик PDF, редактор дизайна или браузер с другим масштабом устройства может иначе растеризовать те же контуры. Определение SVG 2 намеренно оставляет выбор реализации открытым.

Проверьте одну фигуру перед применением ко всему файлу

Сохраните копию SVG, затем задайте подсказку характерной фигуре. Например, примените ее к прямоугольной части иконки, оставив изогнутую деталь с auto:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <rect x="4" y="4" width="16" height="8" fill="#154b67"
        shape-rendering="crispEdges" />
  <path d="M5 18 Q12 11 19 18" fill="none" stroke="#23a6a1"
        stroke-width="2" shape-rendering="auto" />
</svg>

Откройте файл в предназначенном просмотрщике в малом размере иконки и в большем размере. Сравните с сохраненным оригиналом, включая диагонали и кривые. Если вы оформляете встроенный SVG через CSS, проверьте, нет ли правила, переопределяющего атрибут. Удалите подсказку, если она не дает существенного улучшения: ненужное свойство усложняет диагностику последующих различий отображения.

Подберите исправление под настоящий симптом

Для спрайта PNG, где точная пиксельная сетка и есть дизайн, сохранение растра может быть самым чистым выбором. CSS image-rendering: pixelated управляет выборкой при масштабировании изображения; это другое свойство, чем SVG shape-rendering. Руководство по конвертации пиксельной графики объясняет, когда сохранить сетку, построить векторные клетки или намеренно сгладить контур.

Когда подходит PerfectVector

Если единственный исходник — небольшой сведенный PNG и вам нужны редактируемые контуры, подсказка рендеринга их не создаст. PerfectVector полезен на предыдущем этапе: преобразуйте PNG в вариант SVG, затем проверьте фигуры в нужном размере. Проверьте внешний контур, внутренние отверстия и мелкие детали, прежде чем применять подсказку отображения к выбранным контурам. Трассировка может переосмыслить пиксели как геометрию, но не решит, должна ли ступенька пиксельной графики стать гладкой кривой.

Сохраните PNG, если исходная сетка — конечная графика. Если чистый SVG уже есть и странно выглядит только его отображение в браузере, исправьте непосредственно отображение или геометрию. Когда сведенный PNG действительно требует редактируемых контуров, создайте вариант SVG с PerfectVector, проверьте его контуры и сравните рендеринг браузера в конечном размере перед добавлением crispEdges.

FAQ

Удаляет ли crispEdges сглаживание у всех фигур SVG? Нет. Он просит рендерер предпочесть контраст краев. Спецификация допускает разные реализации, включая изменение только некоторых почти вертикальных или горизонтальных краев. Проверьте результат в просмотрщике, который будете использовать.

Стоит ли задавать shape-rendering="crispEdges" всему SVG? Только если это помогает каждой дочерней фигуре. Подсказка в корне может влиять и на изогнутые элементы. Атрибут на одном прямоугольнике проще оценить, и он с меньшей вероятностью сделает кривую грубой.

Исправит ли crispEdges белые швы или размытый PNG внутри SVG? Он не закрывает настоящий зазор и не заменяет пиксели растра векторными контурами. Сначала диагностируйте геометрию шва. Для масштабированного PNG используйте подходящий способ масштабирования растра или создайте редактируемые векторные контуры, если нужны именно они.

Sources

1. W3C — SVG 2 shape-rendering property — Определяет четыре значения как подсказки рендереру и объясняет допустимые компромиссы.
2. MDN — SVG shape-rendering attribute — Описывает подходящие фигуры SVG, наследование и приоритет CSS.
3. MDN — CSS shape-rendering property — Описывает поведение свойства и причины различий рендеринга кривых.
4. MDN — CSS image-rendering property — Отличает масштабирование растровых пикселей от рендеринга краев векторных фигур.