{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кто-то недавно спросил меня, как я подхожу к отладке встроенных SVG. Поскольку это часть DOM, мы можем проверить любой встроенный SVG в любом браузере DevTools. И благодаря этому у нас есть возможность оценить ситуацию и выявить любые потенциальные проблемы или возможности для оптимизации SVG.","type":"unstyled","key":"578jl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Но иногда мы вообще не можем видеть наши SVG. В этих случаях есть шесть конкретных вещей, на которые я обращаю внимание при отладке.","type":"unstyled","key":"fbd0b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. Значения viewBox","type":"header-two","key":"7a0co"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"viewBox часто вызывает путаницу при работе с SVG. Технически можно использовать встроенный SVG без него, но мы потеряем одно из его самых значительных преимуществ: масштабирование с помощью контейнера. В то же время он может работать против нас при неправильной настройке, что приводит к нежелательному обрезанию.","type":"unstyled","key":"2q28s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Элементы присутствуют, когда они обрезаны — они просто находятся в той части системы координат, которую мы не видим. Если бы мы открыли файл в какой-нибудь программе редактирования графики, это могло бы выглядеть так:","type":"unstyled","key":"5mt1n"},{"data":{"image":{"id":"63f702cc5003113bb643798a"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Скриншот из редактора Photoshop ","type":"atomic:image","key":"fitk0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":45,"style":"BOLD"},{"length":7,"offset":364,"style":"BOLD"}],"text":"Самый простой способ исправить это? Добавьте overflow='visible' в SVG, будь то в нашей таблице стилей, встроенный в атрибут стиля или непосредственно как атрибут представления SVG. Но если мы также применим фоновый цвет к SVG или если у нас есть другие элементы вокруг него, все может выглядеть немного не так. В этом случае лучшим вариантом будет отредактировать viewBox, чтобы показать ту часть системы координат, которая была скрыта.","type":"unstyled","key":"5t0rg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Есть несколько дополнительных моментов, связанных с viewBox, о которых стоит рассказать, пока мы обсуждаем эту тему.","type":"unstyled","key":"dgqhh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как работает viewBox?","type":"header-two","key":"6am66"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":99,"style":"ITALIC"},{"length":7,"offset":110,"style":"ITALIC"}],"text":"SVG — это бесконечный холст, но мы можем контролировать то, что мы видим и как мы это видим, через viewport и viewBox.","type":"unstyled","key":"ahi0n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Viewport — это рамка окна на бесконечном холсте. Его размеры определяются атрибутами ширины и высоты или в CSS с соответствующими свойствами ширины и высоты. Мы можем указать любую единицу длины, которую захотим, но если мы укажем безразмерные числа, по умолчанию они будут пикселями.","type":"unstyled","key":"aqrl4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"},{"length":15,"offset":365,"style":"ITALIC"}],"text":"ViewBox определяется четырьмя значениями. Первые два являются отправной точкой в верхнем левом углу (значения x и y, допускаются отрицательные числа). Их можно редактировать, чтобы изменить кадр изображения. Последние два — это ширина и высота системы координат внутри области просмотра — здесь мы можем редактировать масштаб сетки (о чем мы поговорим в разделе «Масштабирование»).","type":"unstyled","key":"2bfgb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот упрощенная разметка, показывающая SVG viewBox и атрибуты ширины и высоты, установленные в svg:","type":"unstyled","key":"3mhut"},{"data":{"image":{"id":"63f704e33876d93b6f676513"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример viewBox","type":"atomic:image","key":"6q3mk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Переосмысление","type":"header-two","key":"opa5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итак, это:","type":"unstyled","key":"bqtfd"},{"data":{"image":{"id":"63f7052972051e06a1473198"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Привет viewBox в svg","type":"atomic:image","key":"bd5id"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"…сопоставляется с этим:","type":"unstyled","key":"1c436"},{"data":{"image":{"id":"63f705557297bf7c32e7b8fa"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"сопоставление значений viewBox в теге svg","type":"atomic:image","key":"b7dov"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Окно просмотра, которое мы видим, начинается там, где встречаются 0 по оси x и 0 по оси y.","type":"unstyled","key":"flbvs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Изменив это:","type":"unstyled","key":"2u768"},{"data":{"image":{"id":"63f7065a7297bf7c32ea376f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"171nq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"…на это:","type":"unstyled","key":"6lqf5"},{"data":{"image":{"id":"63f70674e59c5a53fdf882a2"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"85ft2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"…ширина и высота остаются прежними (по 700 единиц каждая), но начало системы координат теперь находится в точке 300 по оси x и 200 по оси y.","type":"unstyled","key":"dmlqn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Увеличение","type":"header-two","key":"f52jk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":48,"style":"BOLD"},{"length":8,"offset":298,"style":"BOLD"},{"length":8,"offset":355,"style":"BOLD"}],"text":"Мы можем изменить последние два значения внутри viewBox, чтобы увеличить или уменьшить изображение. Чем больше значения, тем больше единиц SVG добавляется, чтобы поместиться в области просмотра, что приводит к уменьшению изображения. Если мы хотим сохранить соотношение 1:1, ширина и высота нашего viewBox должны соответствовать значениям ширины и высоты viewport.","type":"unstyled","key":"bat1v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":36,"style":"ITALIC"}],"text":"Давайте посмотрим, что произойдет в Photoshop, когда мы изменим эти параметры. Монтажная область — это область просмотра, представленная белым квадратом размером 700 пикселей. Все остальное за пределами этой области является нашим бесконечным холстом SVG и по умолчанию обрезается.","type":"unstyled","key":"9j4b5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На рис. 1 ниже показана синяя точка на 900° по оси x и 900° по оси y. Если я изменю последние два значения viewBox с 700 на 900 следующим образом:","type":"unstyled","key":"ujfe"},{"data":{"image":{"id":"63f70aa93876d93b6f761b18"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"29cj0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"…тогда синяя точка почти полностью снова видна, как показано на рисунке 2 ниже. Наше изображение уменьшено, потому что мы увеличили значения viewBox, но фактические размеры ширины и высоты SVG остались прежними, а синяя точка вернулась ближе к необрезанной области.","type":"unstyled","key":"127u2"},{"data":{"image":{"id":"63f70af74a47cc2b29463359"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рисунок 1","type":"atomic:image","key":"ar6eg"},{"data":{"image":{"id":"63f70b0c4a47cc2b29466837"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рисунок 2","type":"atomic:image","key":"5f874"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Розовый квадрат свидетельствует о том, как сетка масштабируется, чтобы соответствовать размеру окна просмотра: единица становится меньше, и больше линий сетки помещается в ту же область окна просмотра. ","type":"unstyled","key":"20eh4"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":7,"offset":42}],"inlineStyleRanges":[],"text":"Вы можете поиграть с теми же значениями в CodePen, чтобы увидеть эту работу в действии.","type":"unstyled","key":"a5ldq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":14,"style":"BOLD"},{"length":6,"offset":22,"style":"BOLD"}],"text":"2. Не хватает width и height","type":"header-two","key":"22dq8"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":24,"offset":481}],"inlineStyleRanges":[{"length":4,"offset":342,"style":"ITALIC"},{"length":4,"offset":353,"style":"ITALIC"}],"text":"Еще одна распространенная вещь, на которую я обращаю внимание при отладке встроенного SVG, — содержит ли разметка атрибуты width или height. Во многих случаях это не имеет большого значения, если только SVG не находится внутри контейнера с абсолютным позиционированием или гибкого контейнера (поскольку Safari вычисляет значение ширины SVG с 0px вместо auto). Исключение width или height в этих случаях не позволяет нам увидеть полное изображение, в чем мы можем убедиться, открыв эту демонстрацию CodePen и сравнив ее в Chrome, Safari и Firefox.","type":"unstyled","key":"fd69k"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":23,"offset":225}],"inlineStyleRanges":[{"length":4,"offset":176,"style":"ITALIC"},{"length":4,"offset":185,"style":"ITALIC"}],"text":"Решение? Добавьте ширину или высоту в виде атрибута, встроенного в атрибут стиля или в CSS. Избегайте использования высоты отдельно, особенно если для нее установлено значение 100% или auto. Другой обходной путь — установить правое и левое значение.","type":"unstyled","key":"3b35o"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":21,"offset":19}],"inlineStyleRanges":[],"text":"Вы можете поиграть со следующим примером и комбинировать различные варианты.","type":"unstyled","key":"4u90h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":26,"style":"BOLD"},{"length":6,"offset":33,"style":"BOLD"}],"text":"3. Непреднамеренные цвета fill и stroke","type":"header-three","key":"9bt63"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":47,"style":"BOLD"},{"length":3,"offset":211,"style":"BOLD"}],"text":"Также может быть, что мы применяем цвет к тегу . Затем добавьте заливку к этим фигурам и проверьте координаты и размеры SVG. Если вы все еще не видите изображение, попробуйте добавить overflow='hidden' в тег