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 атрибути обидва встановлені на <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 на осі ординат зустрічаються.

Змінивши це:

<svg viewBox="0 0 700 700">

…до цього:

<svg viewBox="300 200 700 700">

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

У наступному відео я додаю червоний <circle> до SVG з центром у 300 точка на осі х і 200 на осі y. Зверніть увагу, як змінюється viewBox координати на ті самі значення також змінює розміщення кола у верхньому лівому куті кадру, тоді як відтворений розмір SVG залишається незмінним (700×700). Все, що я зробив, це «переформатував» речі за допомогою viewBox.

Масштабування

Ми можемо змінити останні два значення всередині viewBox щоб збільшити або зменшити зображення. Що більші значення, то більше одиниць SVG додається для розміщення у вікні перегляду, що призводить до меншого зображення. Якщо ми хочемо зберегти співвідношення 1:1, наші viewBox ширина та висота мають відповідати нашим значенням ширини та висоти вікна перегляду.

Давайте подивимося, що відбувається в Illustrator, коли ми змінюємо ці параметри. Монтажна панель - це viewport який представлено білим квадратом розміром 700 пікселів. Усе інше за межами цієї області є нашим нескінченним полотном SVG і обрізається за замовчуванням.

На малюнку 1 нижче показано синю крапку на 900 вздовж осі х і 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 (торкніться зображень, щоб побачити більше).

Рішення? Додайте ширину або висоту як атрибут презентації, вбудований атрибут style або 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> — це векторна операція, яка вирізає частини зображення без напівдосягнення. The <mask> тег — це операція з пікселями, яка забезпечує прозорість, ефекти напівпрозорості та розмиті краї.

Це невеликий контрольний список для налагодження випадків, коли задіяні відсікання та маскування:

• Переконайтеся, що відсічний контур (або маска) і графіка перекривають одне одного. Відображаються частини, що перекриваються.
• Якщо у вас є складний шлях, який не перетинає вашу графіку, спробуйте застосувати перетворення, доки вони не збігаються.
• Ви все ще можете перевірити внутрішній код за допомогою DevTools, навіть якщо <clipPath> or <mask> не відображаються, тому використовуйте це!
• Скопіюйте розмітку всередину <clipPath> та <mask> і вставте його перед закриттям </svg> тег. Потім додайте a fill до цих фігур і перевірте координати та розміри SVG. Якщо ви все ще не бачите зображення, спробуйте додати overflow="hidden" до <svg> бирка.
• Переконайтесь, що a створеного ID використовується для <clipPath> or <mask>, і той самий ідентифікатор застосовується до фігур або групи фігур, які обрізано або замасковано. Невідповідний ідентифікатор порушить зовнішній вигляд.
• Перевірте наявність друкарських помилок у розмітці між <clipPath> or <mask> теги.
• 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 у властивості фону, зображення зникає:

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

Підвищуйте свої навички SVG!

Я сподіваюся, що ці поради допоможуть вам заощадити масу часу, якщо ви виявите, що вирішуєте проблеми з неправильно відтвореними вбудованими SVG. Це саме те, що я шукаю. Можливо, у вас є інші червоні прапорці, на які ви спостерігаєте — якщо так, розкажіть мені в коментарях!

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

Є кілька людей, яких я пропоную слідкувати за досконалістю, пов’язаною з SVG:

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