6 распространенных ошибок SVG (и как их исправить)

Кто-то недавно спросил меня, как я подхожу к отладке встроенных SVG. Поскольку это часть DOM, мы можем проверить любой встроенный SVG в любом браузере DevTools. И благодаря этому у нас есть возможность оценить ситуацию и выявить любые потенциальные проблемы или возможности для оптимизации SVG.

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

1. viewBox ценности

Ассоциация viewBox часто вызывает путаницу при работе с SVG. Технически можно использовать встроенный SVG без него, но мы потеряем одно из его самых значительных преимуществ: масштабирование с помощью контейнера. В то же время он может работать против нас при неправильной настройке, что приводит к нежелательному клиппингу.

Элементы присутствуют, когда они обрезаны — они просто находятся в той части системы координат, которую мы не видим. Если бы мы открыли файл в какой-нибудь программе редактирования графики, это могло бы выглядеть так:

Самый простой способ исправить это? Добавлять overflow="visible" в SVG, будь то в нашей таблице стилей, встроенной в style или непосредственно как атрибут представления SVG. Но если мы также применим background-color к SVG или если вокруг него есть другие элементы, все может выглядеть немного не так. В этом случае лучшим вариантом будет отредактировать viewBox чтобы показать ту часть системы координат, которая была скрыта:

Есть несколько дополнительных вещей о viewBox которые стоит осветить, пока мы в теме:

Как viewBox работать?

SVG — это бесконечный холст, но мы можем контролировать то, что мы видим и как мы это видим через окно просмотра и окно просмотра. viewBox.

Ассоциация область просмотра оконная рама на бесконечном холсте. Его размеры определяются width и height атрибуты или в CSS с соответствующими width и height характеристики. Мы можем указать любую единицу длины, которую захотим, но если мы укажем безразмерные числа, по умолчанию они будут пикселями.

Ассоциация viewBox определяется четырьмя значениями. Первые два являются отправной точкой в ​​верхнем левом углу (x и y значения, допускаются отрицательные числа). Я редактирую их, чтобы изменить кадр изображения. Последние два — это ширина и высота системы координат внутри области просмотра — здесь мы можем редактировать масштаб сетки (о чем мы поговорим в разделе, посвященном Масштабирование).

Вот упрощенная разметка, показывающая SVG viewBox и width и height оба атрибута установлены на <svg>:

<svg viewBox="0 0 700 700" width="700" height="700"> <!-- etc. -->
</svg>

Рефрейминг

Итак, это:

<svg viewBox="0 0 700 700">

…сопоставляется с этим:

<svg viewBox="start-x-axis start-y-axis width height">

Окно просмотра, которое мы видим, начинается там, где 0 по оси абсцисс и 0 по оси Y встречаются.

Изменив это:

<svg viewBox="0 0 700 700">

…к этому:

<svg viewBox="300 200 700 700">

…ширина и высота остаются прежними (700 единиц каждая), но начало системы координат теперь находится в 300 точку на оси x и 200 по оси Y.

В следующем видео я добавляю красный <circle> к SVG с центром в 300 точку на оси x и 200 по оси Y. Обратите внимание, как меняется viewBox Координаты на те же значения также изменяют положение круга в верхнем левом углу кадра, в то время как отображаемый размер SVG остается прежним (700×700). Все, что я сделал, это «переосмыслил» вещи с помощью viewBox.

Масштабирование

Мы можем изменить последние два значения внутри viewBox для увеличения или уменьшения изображения. Чем больше значения, тем больше единиц SVG добавляется, чтобы поместиться в области просмотра, что приводит к уменьшению изображения. Если мы хотим сохранить соотношение 1:1, наш viewBox Ширина и высота должны соответствовать нашим значениям ширины и высоты окна просмотра.

Давайте посмотрим, что произойдет в Illustrator, когда мы изменим эти параметры. Артборд – это viewport который представлен белым квадратом размером 700 пикселей. Все остальное за пределами этой области является нашим бесконечным холстом SVG и по умолчанию обрезается.

На рис. 1 ниже показана синяя точка на 900 вдоль оси x и 900 по оси Y. Если я изменю последние два viewBox ценности из 700 в 900 как это:

<svg viewBox="300 200 900 900" width="700" height="700">

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

Розовый квадрат свидетельствует о том, как сетка масштабируется в соответствии с областью просмотра: единица становится меньше, и больше линий сетки помещается в ту же область области просмотра. Вы можете поиграть с теми же значениями в следующем Pen, чтобы увидеть эту работу в действии:

2. Отсутствует width и height

Еще одна общая вещь, на которую я обращаю внимание при отладке встроенного SVG, заключается в том, содержит ли разметка width or height атрибуты. Во многих случаях это не имеет большого значения, если только SVG не находится внутри контейнера с абсолютным позиционированием или гибкого контейнера (поскольку Safari вычисляет SVG). width значение с 0px вместо auto). Исключая width or height в этих случаях мешает нам видеть полное изображение, как мы можем видеть по открытие этой демонстрации CodePen и сравнение его в Chrome, Safari и Firefox (нажмите на изображение, чтобы увеличить его).

Решение? Добавьте ширину или высоту в качестве атрибута представления, встроенного в атрибут стиля или в CSS. Избегайте использования высоты отдельно, особенно когда она установлена ​​на 100% or auto. Другой обходной путь заключается в установить право и левые значения.

Вы можете поиграть с следующая ручка и комбинировать различные варианты.

3. Непреднамеренный fill и stroke цвета

Возможно также, что мы применяем цвет к <svg> тег, будь то встроенный стиль или исходящий из CSS. Это нормально, но в разметке или стилях могут быть другие значения цвета, конфликтующие с цветом, установленным на <svg>, в результате чего части становятся невидимыми.

Вот почему я склонен искать fill и stroke атрибуты в разметке SVG и сотрите их. В следующем видео показан SVG, стилизованный в CSS, с красным fill. Есть несколько случаев, когда части SVG заполнены белым цветом непосредственно в разметке, которую я удалил, чтобы показать недостающие части.

4. Отсутствующие идентификаторы

Это может показаться очень очевидным, но вы будете удивлены, как часто я вижу, как это всплывает. Допустим, мы создали SVG-файл в Illustrator и очень старательно назвали наши слои, чтобы при экспорте файла вы получили хорошие совпадающие идентификаторы в разметке. Допустим, мы планируем стилизовать этот SVG в CSS, подключившись к этим идентификаторам.

Это хороший способ делать вещи. Но много раз я видел, как один и тот же файл SVG экспортировался во второй раз в одно и то же место, а идентификаторы были разными, обычно при непосредственном копировании/вставке векторов. Возможно, был добавлен новый слой, или один из существующих был переименован или что-то в этом роде. Как бы то ни было, правила CSS больше не соответствуют идентификаторам в разметке SVG, в результате чего SVG отображается не так, как вы ожидаете.

В больших файлах SVG нам может быть трудно найти эти идентификаторы. Это хорошее время, чтобы открыть DevTools, проверить ту часть графики, которая не работает, и посмотреть, совпадают ли эти идентификаторы.

Итак, я бы сказал, что стоит открыть экспортированный SVG-файл в редакторе кода и сравнить его с оригиналом, прежде чем что-то менять. Такие приложения, как Illustrator, Figma и Sketch, умны, но это не значит, что мы не несем ответственности за их проверку.

5. Контрольный список для отсечения и маскирования

Если SVG неожиданно обрезается и viewBox все в порядке, я обычно смотрю на CSS для clip-path or mask свойства, которые могут мешать изображению. Соблазнительно продолжать смотреть на встроенную разметку, но полезно помнить, что стиль SVG может происходить где-то еще.

Отсечение и маскирование CSS позволяют нам «скрывать» части изображения или элемента. В SVG, <clipPath> это векторная операция, которая вырезает части изображения без промежуточных результатов. <mask> tag — это пиксельная операция, позволяющая использовать эффекты прозрачности, полупрозрачности и размытия краев.

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

• Убедитесь, что обтравочный контур (или маска) и изображение перекрывают друг друга. Перекрывающиеся части - это то, что отображается.
• Если у вас есть сложный путь, который не пересекает вашу графику, попробуйте применить преобразования, пока они не совпадут.
• Вы по-прежнему можете проверять внутренний код с помощью DevTools, даже если <clipPath> or <mask> не отображаются, так что используйте его!
• Скопируйте разметку внутри <clipPath> и <mask> и вставьте его перед закрытием </svg> ярлык. Затем добавьте fill к этим фигурам и проверьте координаты и размеры SVG. Если вы все еще не видите изображение, попробуйте добавить overflow="hidden" до <svg> тег.
• Убедитесь, что созданного Идентификатор используется для <clipPath> or <mask>, и что один и тот же идентификатор применяется к фигурам или группе фигур, которые обрезаются или маскируются. Несоответствующий идентификатор нарушит внешний вид.
• Проверьте наличие опечаток в разметке между <clipPath> or <mask> теги.
• fill, stroke, opacity, или некоторые другие стили, применяемые к элементам внутри <clipPath> бесполезны — единственной полезной частью является геометрия области заполнения этих элементов. Вот почему, если вы используете <polyline> он будет вести себя как <polygon> и если вы используете <line> вы не увидите никакого эффекта отсечения.
• Если вы не видите свое изображение после применения <mask>убедитесь, что fill маскирующего содержимого не полностью черное. Яркость маскирующего элемента определяет непрозрачность конечного изображения. Вы сможете видеть сквозь более яркие части, а более темные части скроют содержимое вашего изображения.

Вы можете играть с замаскированными и обрезанными элементами в эта ручка.

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

Знаете ли вы, что SVG — это язык разметки на основе XML? Что ж, это так! Пространство имен для SVG установлено на xmlns атрибут:

<svg xmlns="http://www.w3.org/2000/svg"> <!-- etc. -->
</svg>

О пространствах имен в XML нужно знать многое, и у MDN есть отличный учебник по этому вопросу. Достаточно сказать, что пространство имен предоставляет браузеру контекст, информируя его о том, что разметка специфична для SVG. Идея состоит в том, что пространства имен помогают предотвратить конфликты, когда в одном файле находится более одного типа XML, например SVG и XHTML. Это гораздо менее распространенная проблема в современных браузерах, но она может помочь объяснить проблемы с рендерингом SVG в старых браузерах или браузерах, таких как Gecko, которые строго определяют типы документов и пространства имен.

Спецификация SVG 2 не требует пространства имен при использовании синтаксиса HTML. Но это важно если в приоритете поддержка устаревших браузеров — плюс, ничего не помешает добавить. Таким образом, когда <html> элемент xmlns атрибут определен, он не будет конфликтовать в тех редких случаях.

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <body> <svg xmlns="http://www.w3.org/2000/svg" width="700px" height="700px"> <!-- etc. --> </svg> </body>
</html>

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

textarea:valid { background: white url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26"> <circle cx="13" cy="13" r="13" fill="%23abedd8"/> <path fill="none" stroke="white" stroke-width="2" d="M5 15.2l5 5 10-12"/> </svg>') no-repeat 98% 5px;
}

Когда мы удаляем пространство имен внутри SVG в свойстве фона, изображение исчезает:

Другой распространенный префикс пространства имен: xlink:href. Мы часто используем его, когда ссылаемся на другие части SVG, такие как шаблоны, фильтры, анимация или градиенты. Рекомендуется начать замену с href поскольку другой устарел, начиная с SVG 2, но могут быть проблемы совместимости со старыми браузерами. В этом случае мы можем использовать оба. Просто не забудьте включить пространство имен xmlns:xlink="http://www.w3.org/1999/xlink" если вы все еще используете xlink:href.

Прокачай свои навыки SVG!

Я надеюсь, что эти советы помогут вам сэкономить массу времени, если вы обнаружите, что устраняете неполадки с неправильно отображаемыми встроенными SVG. Это как раз то, что я ищу. Может быть, у вас есть другие красные флажки, за которыми вы следите — если да, сообщите мне в комментариях!

Суть в том, что стоит иметь хотя бы базовое понимание различные способы использования SVG. Вызовы CodePen часто включают SVG и предлагают хорошую практику. Вот еще несколько ресурсов для повышения уровня:

Есть несколько людей, которым я предлагаю следовать за совершенством, связанным с SVG:

• SEO-контент и PR-распределение. Получите усиление сегодня.
• Платоблокчейн. Интеллект метавселенной Web3. Расширение знаний. Доступ здесь.
• Источник: https://css-tricks.com/6-common-svg-fails-and-how-to-fix-them/