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

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

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

1. viewBox значения

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

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

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

Есть несколько дополнительных моментов, о viewBox которых стоит рассказать, пока мы обсуждаем эту тему:

Как этот viewBox работает?

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

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

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

Вот упрощенная разметка, показывающая SVG viewBox widthи& height атрибуты and, установленные на <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 пересекаются оси x и 0y.

Изменив это:

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

Решение? Добавьте ширину или высоту, будь то в качестве атрибута представления, встроенного в атрибут style или в CSS. Избегайте использования высоты самой по себе, особенно когда для нее установлено значение 100% или 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 или mask свойств, которые могут помешать изображению. Заманчиво продолжать смотреть на встроенную разметку, но полезно помнить, что стиль SVG может происходить в другом месте.

Обрезка и маскировка CSS позволяют нам “скрывать” части изображения или элемента. В SVG& <clipPath> это векторная операция, которая вырезает части изображения без промежуточных результатов. <mask> Тег - это операция с пикселями, которая обеспечивает прозрачность, эффекты полупрозрачности и размытые края.

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

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

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

Повышайте уровень своих навыков SVG!

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